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.
UX Research
People track the food they eat to keep track of calories and other metrics to help monitor their weight and other health goals. Since the pandemic started in March of last year, more people have been consistently cooking at home than ever. The currently existing digital products make it difficult to get an accurate count of metrics from recipes of food cooked at home.
I was interested in creating a product for adult home cooks who are trying to easily and accurately count macros and calories to reach a goal weight.
My task was to learn about how home cooks currently use digital tools to track the food they eat, and what goals they are trying to achieve with these products. Then, I needed to help brainstorm the features that would be most beneficial to potential users and help set our app apart.
After conducting interviews and surveys with real people who had used nutrition tracking apps in the past, I discovered that the current process for tracking food was not easy and often encouraged eating less healthy processed/ prepackaged food to get the most accurate information. This was frustrating to almost every user I talked with and the roadblocks to easily track home cooked meals is what often lead users to quit using these apps altogether.
“It often seems like these apps are pushing me towards eating out or processed foods just because it’s easier track. This seems counterintuitive to my overall goal of losing weight and being healthy”
Users wanted to use these apps to make sure their calorie intake for the day was in an acceptable weight loss range. They also wanted to be able to see tangible proof of their progress. But they wanted to do so using food that they had prepared
In aggregating the information I got from user interviews, I was really able to see what people did and did *not* like about similar apps. This allowed me to start brainstorming where we needed to set ourselves apart
The two features that I gathered would be the most important to potential users of the app were:
a way to track the correct nutritional information based off a recipe they used to prepare food themselves and
a way to make sure they were still on track with their targeted weight loss goal.
I did a lot of concept sketching to get the general idea and eventually came up with these mock ups of what those screens might look like.
Users want to use products like this, but they need the products to work for them. In running this research study I learned just how big the opportunity is for our company. When the majority of users are complaining about a lack of a feature in the market place, we should try to figure out how to make that feature a reality.
Ultimately the next steps for this app are to:
run a large scale survey to validate the findings
create a wireframe to begin outlining potential user flow
collaborate with the engineers to make sure they can code what our users have been dreaming up