FPoliSolutions

Process

When I was brought on to the project, I was given a home page design and an incomplete style guide. FPoliSolutions (FPS) already had a clear idea of their intended user. My first task was to help complete the style guide and continue prototyping more pages to establish a consistent, user-friendly theme that fits the character of the company.

Development followed an agile process with two-week sprints and daily scrum meetings.

FPS follows an agile software development process that consisted of biweekly sprint planning meetings and daily scrum meetings to share progress. This web application had its own sprint dedicated to it - occasionally I would lead the sprint planning meetings myself. To keep track of tasks, we used the JIRA platform and moved each item from the backlog to a "To-Do -> In Progress -> Complete" outline at the beginning of each sprint.

Every page begins with a Figma prototype.

Given the first iteration of a home page, I was expected to extrapolate that design and wireframe all the other site pages. The result was an interactive Figma prototype that laid out our plan for the website before ever writing any code. After showing the initial design around the company, I received feedback that the design needed more of the personal touch you'd expect from a small company. My second design addressed these concerns and incorporated many stock images of the industry and left space for company photos.

Initial website design iteration on Figma

Final website design iteration on Figma

A front-end powered by Bootstrap, SASS, jQuery, and Twig.

Through this project I learned the ins-and-outs of Bootstrap, which served as the foundation for the front-end of our site. With SASS, a CSS preprocessor, I was able to make more advanced modifications by compiling my own custom copy of Bootstrap while keeping all styling clean and organized. The template engine Twig is used throughout the site to load repetitive content and fill in database entries into the code of dynamic pages like News. Lastly, jQuery was incorporated across the site for various interactive functionality plus client-side form validation with the jQuery Validation plugin. Other tools like jQuery Validation Tooltips, a Bootstrap Date-Range Picker, Dropdown Multi-Select Tool, and Particles.js enhanced the sites visual aesthetic and functionality.

Integrating PHP and PostgreSQL to assist with CRUD operations.

Database integration was necessary to both load content into the website and receive and store information from users. We adhered to the Model, View, Controller standard and utilized PHP to build our back-end. I developed the Router and View controllers to display the appropriate pages when requested, as well as wrote model functions for seven database tables. Running my PostgreSQL script created the database and generated temporary data used in testing the site.

Guaranteed to be viewable on any device and any browser.

It was a priority for the website to fit on devices of all sizes and be compatible in a variety of web browsers. By customizing Bootstrap's preset breakpoints, I made five different responsive layouts for large desktops, laptops, tablets, and various phones. I also tested the site on the five major browsers to ensure compatibility on each, even accommodating many of the fallacies in Internet Explorer. Before deployment, I explored the site on a number of devices using LambdaTest's real-time device simulation software to confirm compatibility on devices we didn't have on-hand.

Ensuring the website would be found by many and interpreted by all.

To complete a robust website, I evaluated any accessibility issues in our website using the WCAG 2.0 guidelines and modified my code to ensure we met Level A compliance. My research into website Search Engine Optimization revealed several tricks to improve the relevance of our site in search results, such as using HTML meta tags, creating a sitemap for web indexing, and utilizing Google's structured data functionality.

Maintaining robust functionality throughout change.

This last step is always one of the most important to me, especially for projects that I will be handing off to a client and not maintaining myself. Every model and most controllers were tested to 100% coverage using over 30 PHPUnit tests. The interactive and dynamic content in our views was tested using Selenium, again on numerous browsers.