The Coffee Shop Mobile App

I completed the design for this application as part of my Google UX Design Certificate. It marks my very first attempt at UX design. The journey was intense, frustrating, but immensely rewarding.

A big shoutout to my friends and family (a.k.a my users and test subjects) for contributing to some lofty product requirements and making the project a lot more challenging than necessary.

“I’ve presented this project unfiltered, together with the errors I made and the valuable lessons I learned along the way”

Project Summary

  • Luigi’s Coffee Shop is a family-run business located in the serene neighbourhood of Woodside, California. It is a mere 15-minute drive to a newly commissioned technology park.

    The little town has seen an influx of techies in recent times which has had a positive impact on the business.

    So far the coffee shop has thrived on a traditional business model, but Giorgio is concerned about a possible threat from franchises and a more digitally inclined competition.

  • Giorgio has a loyal customer base which he has built over the years. However, he suspects that his newer patrons are underserved.

    He plans to expand his menu options to appeal to a larger market and has asked me to help with a mobile application that aligns with current trends.

  • By building a mobile app, Luigi’s Coffee Shop can address the new market opportunity while also offering a net new set of purchase options for an established customer base.

Foundational Research

  • I conducted interviews with a few patrons so that I could understand the users I’d be designing for.

    The research surfaced a few groups within the target market Giorgio was talking about, like working professionals between the ages of 25-34.

    However, another potential group that caught my attention were college students, 18-25. They offered a different perspective which I thought was worth exploring.

    While online ordering was the expected favorite, a few other service opportunities became apparent.

  • I created a few personas to give more context to the groups I was talking to. I wanted to understand what brought people to Luigi’s. What were their stories, motivations, frustrations, and goals?

    I also wanted to discover more about the technology they used, their comfort with it, online shopping habits, and daily routines etc. to see how a digital experience could connect with them.

  • Through initial desk research and field observations, it was clear that businesses like Luigi’s had not fully embraced digital.

    However, it is not guaranteed that new entrants were insulated from stepping in.

  • While convenience and time-savings topped most respondents lists, some of the underlying circumstances revealed pain-points driving those motivations.

User Journey Maps

  • Running through a typical day in the life of someone like Jason revealed some interesting insights.

    You can almost feel the emotional, mental and physical roller-coaster of the user as he/she wrestles with their day.

    The impact points for someone like Jason occur early on in the day. If I can solve the problem given the timeline and user constraints, I could make a meaningful difference.

  • The problem wasn’t as straight-forward as anticipated. Yes, an online ordering app make sense, but having something that goes beyond the generic would make all the difference.

    Luigi’s Coffee Shop does not have a delivery service in place. We can tackle this via services like Uber eats, DoorDash, GrubHub, and others. But, that still leaves a question open - How do I ensure the order arrives in a state that delights the customer?

    Alternatively, a customer to come to Luigi’s, spend the shortest time possible, and exit seamlessly.

    Would that ensure customers receive their orders in a state that is equivalent to ordering at the coffee shop?

Capability Mapping

  • I scribbled out a few thoughts and organized them into 3 distinct circles. I listed user needs from my conversations and mapped them to alternative solutions, including Luigi’s Coffee Shop.

    A new set of capabilities would be needed for Giorgio to compete in the long-run and I planned to have the mobile application play an integral role in it.

Storyboards

  • I drew up storyboards to go over a typical day in Bridget’s life (one of the personas I created). I wanted to walk her path and see things from her perspective in her current state.

    I also created an optimistic scenario that embedded Luigi’s Coffee Shop into her routine, elevating her to a positive state.

Sketches

  • My initial sketches focused on layouts of the menu with visual elements, descriptive content, and action buttons. I wanted to understand what resonated with users. What pulled them in and prompted them to act.

    I then tried to incorporate those items into a base version that I could build on. My goal was to keep it simple, clean and restrict the user to critical actions.

    I was actually planning a home screen that linked to various app features. But, I wanted to wait until features like group orders and auto-orders were tested and gained traction.

    In the interim, I landed users on the menu screen to minimize time-to-value.

  • Action plan & Version 1: Incorporated the learnings from all wireframe iterations:

    • Created categories for items.

    • Created a spotlight for featured items.

    • included item image, name, and short description.

    • I temporarily changed the last bottom navigation bar tile to “My Account”.

    • Concentrated on key actions and decluttered the layout.

    • Began working on the Auto-Ordering and Group-Orders concept.

Digital Wireframes

  • From my preliminary research findings, I converted the paper sketches to a digital format so that I could share them with a few more users for quick feedback.

    The screens were aligned to research findings and optimized for improvement.

    My goal was to reduce cognitive load while keeping allowing free navigational flow for the user.

Low-Fidelity Prototype

  • After a few basic digital screens were built, I stitched together a low fidelity prototype around a typical ordering workflow.

    I then conducted a usability test to secure feedback around the various pages, layouts, frustration points, interpretations, click-paths and general commentary from users.

    In addition to placing an order, I gave users a few other tasks, like adding a tip or applying a coupon to their order. I also incorporated item collection options into the ordering process.

    I then consolidated the feedback into themes and drew insights from them.

    Usability Test Intent

    I was curious to see what users had to say about the layout, interactions, and overall flow.

    I wanted to use the feedback to refine my designs to resonate better with users before building out mockups.

Sticker Sheet

  • I used the digital wireframes to form the base for my mockups. Once created, I ran it through contrast testing for WCAG AA and AAA compliancy.

    Originally, some areas of my design did not qualify for AAA, but satisfied AA criteria.

    However, since the project was being developed from scratch and I had control over the color palette, I made the changes where necessary.

  • I wanted to limit the number of actions users could take on any given screen to keep them engaged while also minimizing time to value.

    The CTAs were given sufficient emphasis while making use of negative space to keep key information areas and secondary actions in focus.

Usability Tests

  • Once the information architecture, basic workflows, and feedback through various iterations was incorporated, I began working on a sticker sheet as part of the design system.

    For disclosure, the sticker sheet displayed here does not cover all components available in the mobile app. The actual sticker sheet is far more comprehensive.

  • Once my original sticker sheet was created, I ran it through some accessibility contrasts tests. While the design passed AA and AAA standards, I did notice a bit of touch and go with green I had chosen for buttons and action points.

    I decided to go for a darker version of green which would offer a better contrast for users. That change can be seen the second version shown here.

Mockups

High-Fidelity Prototype

Basic Ordering Completion Flow

  • It took me some time to put the designs together, maintain consistency, and link them into meaningful workflows.

    I tried to keep things simple, intuitive, and restrict actions to those intended for each screen in the user’s path to goal.

Takeaways

  • I have a new found appreciation for UX design and designers. As a product manager I tend to question design decisions and test them for resiliency so that they answer the broadest set of use cases, possible behaviours, and potential scenarios.

    I learned just how insightful user feedback is to design, iteration, and refinement.

    It’s tough to keep things on brand, following a theme, while bringing fluidity to workflows and complying with accessibility and inclusion.

    The pain-points raised by users and the context in which they occur helped shape so much of the product, most of which I would not be able to imagine on my own.

    I’m certain that with more research, time, and resources, the project would have taken on even larger proportions with more features and better articulation.

Key Feature 1: Group Orders

  • The idea for Group Orders surfaced over conversations with college students. While not considered within the original target audience, this group displayed some interesting behaviors.

    Jason and Laura were seen gathering chairs, preparing for a few of their classmates to arrive. I observed the group as they haphazardly organized themselves around the tables.

    Ordering was equally chaotic as they struggled to filter their orders through one assigned individual. Those who persisted weren’t happy with end result. The rest congregated around the cashier who appeared visibly nervous.

    I spoke to both students after. They pointed me in the direction of several other groups around the premises struggling with similar issues.

    This got me thinking that a group ordering feature could address these pain-points and extend to other customer segments who may also have a need to consolidate orders.

  • Once a group is created, a group owner can generate an order code which is sent to all members within that group.

    All users have a 10-minute window to log the code and proceed with the group order. Once logged, users select items and pay for their respective orders as usual.

    Upon payment completion, the order is appended to the group owner’s cart for review and submission.

    Orders are either brought to the designated table via the table QR code workflow or picked up at the designated time via the collect at store workflow.

    Current constraints:

    • Users must have app access

    • A group must be created

    • Member usernames / handles must map to the database at the time of group creation.

    • Privacy and security measures will need to monitored and updated.

  • Planned Enhancements

    • Code entry window to be made customizable.

    • Members can be made joint owners / admins so that they can initiate a group order.

    • Initiating member to be tagged and visible to all others.

    • App download invitations to be made possible when necessary.

    • Factor current time in time selector

    • Item preparation time aligned to counter and estimated ready / collection time.

Key Feature 2: Auto-Orders

  • Flowing from my conversations with Jason and Bridget, preparation time and effort were difficult to accommodate into their daily routine.

    Delivery services could not deliver breakfast items fast enough. Somehow, users like Jason and Bridget needed to gain access to a breakfast they’d appreciate, on a schedule they could work around.

  • Users initiate an Auto-order workflow from within the app. They select an entire calendar week, set up a pick up time slot, and then proceed to create an order plan.

    They have the ability to assign dates to ordered items which will be prepared for collection at the specified time.

    Current Constraints

    • Items in an Auto-Order cannot be altered mid-way. The plan would have to be aborted.

    • Auto-orders can be placed for up to 7 consecutive days only.

    • A single time slot is assigned to an Auto-order.

    • Users cannot alter the collection time slot once fixed.

    • Time slots are currently fixed for 6am - 10:30am.

    • Items are restricted to breakfast only.

  • Planned Enhancements

    • Multi-time slot selection per ordered item.

    • Extended time slots based on open hours.

    • Extended time frame selection.

    • Complete menu access.

    • Alteration of order mid-way within reason.

    • Application of coupon codes.

    • Group order creation.

    • Current time to be factored into time selector.