Ever been stuck grabbing the dreaded office coffee order?
Yea, me too. Oatmilk, 2 pumps of caramel, dirty chai – what even is that? With so many preferences, ordering for multiple people can be a long and complicated process. This is why I designed an app that simplifies this process tenfold. This way, you can order for your coworkers, friends, or family in no time.
Project Details
Objective: Design an app for a fictional local coffee shop.
Deliverables: Mobile app
Duration: December 2021-February 2022
Project role: UX Designer
Software: Figma, Adobe Photoshop
Interactive components
-
![]()
Text field & button
The text field displays a border when selected and features a blinking cursor. The button becomes darker when hovered over and pressed.
-
![]()
Calendar
This calendar features a hover effect for the mouse cursor, as well as a darker color when clicked.
-
![]()
Time reserve
This component is similar to a calendar component where it features a color when hovered upon and a darker color when clicked.
-
![]()
Dropdown menu
The menu displays multiple dropdown options. When the user makes a selection and clicks, the value is darkened. The dropdown menu also features an icon that rotates 180 degrees to indicate the open/closed state.
-
![]()
Link copied
The copy link feature has a nice gradient animation with a checkmark and placeholder text to indicate a successful copy action.
-
![]()
Toggle Invite
In this instance, an on/off toggle is used to turn to enable or disable the invite. It displays text and changes color to indicate the different stages.
Empathy mapping
User Interviews
To get started with my research, I knew I need to speak with users firsthand. In order to get their inner thoughts, I came up with these important questions:
How often do you order coffee in a physical location? How about online through an app?
Do you order coffee for yourself, the office, or somebody else?
What’s the biggest obstacle with ordering coffee through an app?
What features would you value in a coffee ordering app?
What does your beverage order usually look like?
After interviewing 5 participants (ages ranging from 23-60, diverse backgrounds), I created an empathy map for the users. In this example, we will be using Cecilia’s (name modified to preserve anonymity) empathy map. As you can see, Cecilia felt frustrated when she had to collect orders from co-workers because of the time commitment to such a task.
Problem Statement
While conducting the research and user interviews, the most prominent problem that I came across is that many users dreaded the task of ordering for multiple people. Especially those that order coffee for their coworkers. There was a lot of pressure in getting the order right after gathering all the details.
I felt like this since this is the biggest challenge, it would require my outermost attention. This is why I decided to start with this flow first.
After creating a user persona (left) this is the problem statement I drafted:
Rett is a busy real estate developer who needs an easy way to order coffee for multiple people because he frequently meets with clients for coffee dates or gets coffee for his office team.
Then, user flow.
After making a user journey map (can be found in the case study), I created a user flow. This helped me visualize the process as I began to think about drawing out some wireframes. The user flow helps me understand each individual step that needs to be taken by the user, which eliminated missed steps later on.
Wireframing Process
-
Storyboarding
To get started with the wireframing, I first drew out a storyboard. This got me in the perfect mindset to put my designs on paper. By doing a small picture storyboard, I was able to visualize some of the screens the user would be going through.
-
Crazy 8's
Then, it was time to sketch. I used the Crazy 8’s exercise to think of as many ideas as came to mind in a limited time frame. Then I went through my ideas and picked out what I liked the most out of them.
Digital Wireframes
It all began with an idea, and now I was taking it digital. I’ve had enough exposure to Figma now, that I feel like my wireframing process is equally fast or faster digitally than on paper. I had an idea of brand colors so I implemented those right away to give my design some depth and dimension. And, because I was getting really fast at creating components it was easy to get buttons and styles consistent. Win!
In one of the wireframes, I wanted to show a map with the location of the coffee shop. This came as the most challenging part and something that I want to work on further. Overall, designing a map is a whole new ball game for me, so I want to dive into it deeper when I get a chance.
Aside from that, I got a decent flow of digital wireframes in Figma. I knew more needed to be added as the prototyping stages are due to begin, but I was going to make them as I went along. I ended up making a lot of overlay screens, additional components and new icons as I went along the design.
Prototyping is where the magic happens. This is when I started creating more screens, components, and various overlays. This process is messy but organized at the same time. It can leave you very excited but also frustrated as you tinker with interactions for a long time. I was able to complete the interactions in order to have an easy flow.
Prototyping
In conclusion…
What’s next?
My next steps include expanding on the product module and adding detailed customizing for each offered beverage. In addition, completing the check-out process would make the app more final.
Win
My biggest win was during the prototyping stage. By adding interactive components and some basic animation, it created a more immersive experience for the user. I wanted to make sure to do small but impactful interactions. My goal was to not distract from the experience.
Challenge
My biggest challenge came from my ‘win’. Building these new interactions pushed me outside of my comfort zone. I had to dive deep into some new tutorials and go through my previous course load to find answers I needed and to perfect the materials.
Thank you. Next.
Thanks for taking the time to view my project. More coming soon, so until next time!