top of page
Designing an App for
Inkwell Coffee Shop
Summer 2022 | Pittsburgh
As part of the Google UX Design Professional Certificate program I'm currently enrolled in, I'm designing an app for a local coffee shop near my house. Using the Design Thinking framework, I strive to keep the user as the main focus of every decision I make.
Empathize
Inkwell Coffee Shop is a popular cafe in the Lawrenceville neighborhood of Pittsburgh. It has quite a bit of charm, with brick walls painted white and a plethora of plants hanging in its floor-to-ceiling windows. As a frequent visitor of the little shop, it became clear that the lack of a dedicated app was hindering the business. During peak hours, I noticed it's common for the line at the counter to extend out into the sidewalk outside. Most visitors don't bother waiting in line, leaving without making a purchase since there's usually only one or two baristas working at a time.
Mobile ordering is available through Grubhub, but the use of a third-party ordering system is often clunky, costly, and annoying for users. There are a decent number of seats throughout the little shop, but those are often full come mid-morning. These issues immediately stood out to me while I was working through the lessons of the Google UX Design course, so I decided to use them as an opportunity to enrich my design skillset.
The first step of the Design Thinking framework, and perhaps the most crucial, is to empathize with users. Speaking to some customers confirmed my initial observations: the lack of easy mobile ordering and the inability to know how crowded the cafe is were major issues. I created two user personas that embodied these points: Bill, a busy executive at a Pittsburgh office who wants an easy way to order his morning coffee on his way to work, and Alice, a recent graduate who enjoys doing freelance work in the cafe without having to worry about not finding available seating.
With these two personas, the next step was to create user stories for them. The user stories helped to give me a clear idea of what needed to be included in my app in order to satisfy the needs of the two personas and, by extension, the real-world users they represent. For my project, I chose to focus on Bill's needs first, as an easy means of ordering online is crucial for almost all businesses these days. I developed his user story into a journey map, which broke down his typical means of achieving his goal (ordering a coffee and a sandwich) into basic steps, then analyzing each step to see how the user experience could be improved.
Define
With Bill's persona and user journey map in mind, it was time to define the problem. Bill, a busy executive with a tight schedule, needs to be able to order coffee quickly so that he can get to work on time. During this stage, I also chose to design my app for a mobile device, as mobile ordering food and beverages is most often done on a smartphone.
After clearly defining the problem I needed to address and choosing which device I would design for, it was time to get creative.
Ideate
Once the problem was defined, I started to brainstorm ideas for a solution. The first step was to list out all the features that could improve the user experience of my app, no matter how small. Everything from an easy way to order online to a brand-new rewards program made the list.
I then began drawing up some design ideas for the various screens. I chose to focus on the user flow of submitting an order online first, as I believe that is the most valuable feature of my app. With that in mind, I took inspiration from various coffee and fast-food mobile apps, from Starbucks to Chipotle, and started drawing up some wireframes on paper. In order to get my designs on paper as quickly as possible, I used blocks with X's to represent images, horizontal lines to simulate text, and squares and circles to represent interactive buttons.
For each screen in the user flow, I drew up three to four brainstorm wireframes to test out different layouts and ideas. I then chose which features were most helpful to the user and combined those into a final version. Each of these final versions are shown below:
The goal for my app is to be simple to use, while also appearing elegant. Each page has a uniform navigation bar on the bottom of the screen, mimicking the design of many other popular mobile apps. The home page features a carousel that will rotate through featured menu items and advertisements for local events. The app shows which flavor of coffee is being brewed each day and how crowded the cafe is, both of which can be updated by the baristas in between serving customers. The home page also shows previous and favorite orders for users that are logged in.
The menu page is organized by category, with each item featuring an image and a price. When clicked, each item opens a new page that displays all the item details and possible customizations. Once the user is satisfied with their customizations, they can either add it to their cart or return to the menu page. Once an item is added to the cart, a second bar appears on top of the navigation bar (inspired by Starbucks' app) which displays the estimated wait time of the order, the total cost, and a little cart icon to instruct users to click on this bar when they are ready to check out.
The cart page lists out each item in the user's order, along with that item's customized options, price, and the option to remove it from the cart. The order's tax and total cost is listed below all the items. Users have the option to add any rewards they've earned, or they can just check out. Upon submitting the order, the user is taken to the order confirmation page, which thanks them for their order, provides them with an estimated wait time, and gives them the option to map their route to Inkwell's location.
Lo-Fi Prototype
​Starting with paper wireframes allowed me to quickly get my ideas drawn out. There was very low commitment to each design since I could always restart the drawing on a new sheet of paper. Once these first wireframes were finished, I moved on to the next step: creating a digital wireframe.
I used Figma for this next phase, as I am already familiar with the program. The first thing I did was convert all of my paper drawings into digital mockups. I kept the basic shapes and grayscale color scheme, as this wireframe is merely to show what the overall structure of the app will look like.
I used the prototyping feature in Figma to link the screens together to follow the user flow I had originally designed the paper wireframes for. For the lo-fidelity prototype, I linked all five screens needed to mobile order together, animating the process of the user starting an order, selecting items, and checking out. I also added a select payment screen to allow users to choose or add a payment method. In addition, I linked pages to each of the icons in the navigation bar to further fill out the prototype.
The next step is to test out the lo-fi prototype with users. I selected a pool of three potential users and created a list of simple tasks for them to accomplish. During the usability study, I used Figma's present feature and asked each user to carry out these tasks, such as adding a new payment method to their profile or ordering a latte.
While they did these activities, I recorded everything from their comments and questions to their click-paths as they moved through the prototype. I noted what tasks the users found simple, as well as which tasks users struggled with. Almost all users had trouble viewing their cart from the menu page without an icon of a cart to hint where they needed to go. Users also found it confusing that they needed to press the "Select Payment" button before submitting their order. What would the app do if the user didn't press that button before checking out?
Once the usability study was finished, I compiled my findings and organized them into an empathy map so that I could clearly see which features needed the most attention. I revisited the lo-fi prototype, making changes to reflect what the users said. I made it clear that there would be a cart icon in the final product, and I made selecting a payment method an automatic part of the checkout process.
Test
Hi-Fi Prototype
With user feedback gathered and the lo-fi prototype revised, next came the fun part: adding color, fonts, shapes, and pictures. Whereas the lo-fi prototype was meant to capture a rough outline of what the app will look like, a high-fidelity mockup gives stakeholders a much more complete picture.
I continued working in Figma, adding in elements of design to breathe life into the original gray, boxy prototype. I chose a sophisticated color scheme: a dark main color to embody the classy style of Inkwell, with pops of blue and copper to showcase the whimsical elements of the cafe. The icons in the navigation bar and the magnifying glass icon in the upper corner were designed to give users a clear idea of what they do. Pictures on the menu page provide users with an idea of what they can order, while large images on the home page and the item page entice users directly.
Once I finished the mockup, I created a design system in Figma that holds all of the design elements I used in the mockup, from the different font styles to the button shapes and colors. I turned each of those elements into a component, which allows me to paste instances of each component into future mockups, keeping the styles the same. These components also allow for easy editing if I need to make changes to any of the designs. Updating the parent design will automatically update any of the child instances simultaneously.
Takeaways
After another round of user testing and iterating on the hi-fi prototype, I am finally confident in the state of my project. The prototype is easy for users to move through and interact with. The design is aesthetically pleasing, and stark color-contrasts make the app accessible for those with low vision.
Working on this project has sharpened not only my design skills, but also my project-planning and organizational skills. I come from a background of graphic design and traditional arts, so designing the user interface for an app was a fun way to stretch and expand my designing muscles. Even though I was the sole designer of the app, I got to engage with real-world users who could benefit from this project, as well as my friends and family in a professional setting while leading usability studies.
Spearheading this project from start to finish has taught me so much about not only UX design, but also how to lead and organize projects. Being able to apply all of the skills I learned from the Google UX Design Professional certificate into a tangible project has not only bolstered my confidence, but has also given me a clear idea of how to lead real-world UX projects. I'm proud of the work I've done, and I can't wait to get started on my next project.
bottom of page