Please note that some artifacts and sensitive information will be post-processed or excluded for confidentiality issues. All rights reserved to the publisher and designed institution(s) with no distribution. 

Overview

Fleets Coffee is a Toronto-based mobile coffee and technology company committed to delivering high-quality, fresh coffee products to commuters, students, and workers. In early 2020, they approached us with preliminary research and example wireframes for expert review and design and development support.

Challenge

Right from the start, we have identified the following challenges for this project:

  • Strong opinions received from the client

    • The client had some conceptual wireframes done. However, such wireframes may not be feasible for development or user-friendly.

  • Ambigous business vision

    • The client was not sure about their needs

  • Constraints in the chosen framework/API

Design process

In the project, we applied the double diamond design process(see picture below). Initial user and business analysis had been accomplished by the business team and the client before introducing the design to the team.

Image credit to TestingTime

Discovery and Define

With the help of all the prep work, the design was able to identify high-level use cases as follow:

  • Select and set default ordering location based on user’s location and preferences

  • Place orders for beverages and meals

  • Track the order status

  • Prepare customer orders at the right moment

  • Re-place orders

  • …

Once high-level use cases have been identified, I was able to create interaction diagrams to verify if there is any gaps and proceed to the iteration stage.

Design Iteration

I applied a three-point check between design, development, and business. There were 3 steps of a design iteration cycle for a design story:

  • Internal whiteboard session

    • Align requirements internally on a whiteboard or quick sketches

  • Internal check-in session prior to presenting to the client

    • Validate the technical feasibility of the purposed design

    • Verify all use cases and businesses pursuing

  • Stakeholder review

    • Present the solution to the client for a roundtable critique

    • Gather additional feedback via offline prototype

  • Client sign-off

I used quick sketches to align requirements or elicited ideas on screen elements or user flows beforehand. High-fidelity wireframes and prototypes were used to collect client feedback.

Quick sketches for user flow

Quick sketch for possible screen layout

In this stage, there were two major challenges:

  • Provide designs not only similar to the conceptual mockups but also developable with React Native

  • Able to apply the best UI/UX practices

For the first challenge, the 3-point check model was sufficient for design verification. We were able to alter/provide designs with the chosen component library for React Native. Constrained by the time and budget, I decided to decrease the use of customized components unless there was an ask from the client or required by features.

For the second challenge, I managed to push the revised design especially when the original mockups have issues (see picture below) with reasons in/from:

  • Scalability

    • If the design supports future menu expansion(see example below)

  • User Journey

    • If the design aligns with the actual user scenario

  • Best UI/UX Practise

Original mockups from the client. The design was not able to achieve without deep customization (left); The rainbow menu wasn’t intuitive to reach (right). The UI design from the original mockups didn’t meet the mobile UI design standard practice.

Original mockups from the client. The design was not able to achieve without deep customization (left); The rainbow menu wasn’t intuitive to reach (right) and does not support menu expansion nor allow users to make changes in menu category

We suggested to use top-down menu that supports future menu expansion, minimized the step to destination and encourage users to browse content.

Hands-Off and Support

Once we received a green light on a user story, I prepared the wireframes and export them to Zeplin along with the most updated design system and all the necessary graphics to ensure a smooth transition between design and development. The wireframe inventory will not cover the user flow. Developers could reference the clickable prototype for such information.

Besides the wireframes, another deliverable was a comprehensive style guide for digital interfaces. The client had an established style guide for printing and merchandise. The digital style guide was developed based on that and compiled with WCAG 2.0 AA standard.

Impacts

The app was released earlier in 2021. The business was impacted due to COVID. We received great feedback from the CEO. We were also working on a Kitchen app for the company that would help them manage customer orders.

Example Wireframes

Check it out Live

The ordering app is now available on both App Store and Google Play Store. Feel free to check it out!