End to End Design
Udacity was considering opening a digitally enabled coffee shop experience. The company wanted students to be able to use this app to help place their orders, collaborate with other students, and facilitate a productive studying environment.
My task was to create and optimize the user flow for placing an order and receiving it with minimal disruption to their studying.
In interviewing several students about what they like in a coffee shop experience, I wanted to make sure the app was simple to use and intuitive for those who aren’t used to ordering coffee with an app.
Bottle necking at the pick up counter was a common complaint amongst the students, and pinpointing when their drink would be ready could help minimize the disruption in their studying.
I also wanted to equip it with a unique feature that would allow students to know when they could expect their order to be ready.
With a basic idea of what features I wanted to implement, I started to sketch some basic outlines of screen layouts. Then I turned the sketches into wireframes in Figma and started to map out the best flow.
By mapping out the colors, typography, and icons in a style guide, I was able to transform the wireframes into high fidelity prototype screens
After the screens are given some life, it’s time to make sure everyone could use them easily. I tested color contrast and changed color schemes, spacing, font sizes/boldness levels, and button sizes to make sure the app passed AAA accessibility guidelines
Making the screens look pretty is only half the battle! I turned the individual screens into a clickable prototype with a flow matching the mock up below. Then it was time to send the prototype into the world for a bit of usability testing.
I enlisted 10 different potential users to test the app out and put it through its paces. I asked each user to:
1. Add 2 items to the cart
2. Confirm the order
3. Pick up the order
In doing this I got some valuable information about the app. There were features that the users loved. They said the timer to when their drink was ready was cool, useful, and something they hadn’t really seen before. A total win for me!
But there was also a hole in my process that I needed to fix…
During my usability tests, I found that 60% of the users tested got confused when trying to add items to their cart. The original flow took users straight from the menu to the cart screen, and they were frustrated by the lack of transparency and choices in the navigation.
By adding in a new option where users could click further into a menu item to clarify the size or any additional flavors they may want in the drink before adding it to the cart, I was able to provide users with the clarity they craved and increased the success rate of the task to 100%
By making sure the flow made sense to actual potential users of the app, creating the style guide, and making sure the elements of the app are accessible to everyone - I can now hand off the design to the engineers to truly turn the order placing flow of the online coffee app into a reality. You can check out the full clickable prototype here.
Web Design: Adobe XD
To help round out my design skills, I took a course on how to design with Adobe XD. Below are some examples of projects I completed in that class!
A custom header with custom cards, designed to show a variety of different projects in a clear way.
On this page we learned how to make custom shapes to further organize information, and learned the art of the repeating grid in several forms.
A sample home page for a travel site, this project taught me how to create a clean blurred background for text and how to create an exciting menu in an intuitive, yet unexpected place.
Clean lines, typography, repeating grids, color theory, blurred backgrounds. This book store home page mock up was a culmination of everything I learned in the class!