Play icon — Screencast of typical user flow in Application. All prices have been blurred for confidentiality purposes.

AFL Online

The design and development of an online ordering system for the largest mattress and foam manufacturer in the English-speaking Caribbean.

As the largest mattress and foam manufacturer in the English speaking Caribbean, Advance Foam processes over 22,000 orders each year. With the launch of their new website in 2017, the company was eager to rethink how it traditionally accepted orders, a process that was not only burdensome on its customers, but on the company itself. After an intense period of research where each part of the order entry process was thoroughly documented and examined it became increasingly clear that a single page web application could help automate this time consuming and error prone process that was heavily reliant on human intervention. Once this decision was made, an ideal user flow was designed, mock ups were developed and the application was built with iterative feedback from stakeholders on a regular basis. The application processed its first order August 2018, and since then, many of the company’s major customers have adopted the web application as the primary means by which they create, place and manage orders. Product features were then added to the platform on a regular basis as a means of continually on-boarding new clients while simultaneously refining existing customers’ user experience.

Notable contributions that I made to this project included:

Driving the gathering of requirements by documenting and analyzing existing customer habits and internal order processing techniques, architecting the company’s transition from a manual to a digital order entry process.
Designing and developing high-fidelity mock-ups detailing the UI/UX of the application using Sketch.
Architecting and building the entire view layer of the application, translating mock-ups into responsive React components optimized for both desktop and mobile devices.
Designing and building the front-end of a date picker and a custom pagination component, both of which fetch small, targeted sets of data from the backend API enabling customers and internal users of the application to seamlessly navigate through the thousands of previously placed orders.
Designing and the building the front-end of a modal with a typeahead input field that allows Sales Representatives and other internal users of the application to effortlessly switch between multiple customer accounts.

Diagram of the order entry process before the introduction of the web application — Diagram of the order entry process before the development of a web application:

Diagram of the order entry process after the introduction of the web application — Diagram of the order entry process after the development of a web application:

Diagram of the of the software used by staff for order entry — Diagram of the user interface of Freedom, the software used by staff when entering orders manually:

Table containing the data that was recorded for all of the orders placed during a single day — Analysis of a single day of orders:

Screenshot of the home page of Amazon's website — A selection of the interfaces that were evaluated and used as inspiration when designing the application’s UI:

Screenshot of the home page of the Casper's website — A selection of the interfaces that were evaluated and used as inspiration when designing the application’s UI:

Diagram analyzing the layout of an Amazon product page — A sample of the analysis done when evaluating an existing user interface:

Mock up of the home page of the AFL Online web application — A high-fidelity mockup of the home page of the application:

Screenshot of the Order History tab of the AFL Online web application on a mobile device — Screenshots of the application on a mobile device simulated using Chrome’s Developer Tools:

Screenshot of the Mattress and Foundation tab of the AFL Online web application on a mobile device — Screenshots of the application on a mobile device simulated using Chrome’s Developer Tools: