Journey to UX Designer: Project 1 Summary
Task: Build a Simple App That Could Be Used to Buy a Cup of Coffee
On day four of my UX Designer course I began designing a simple app that someone could use to buy a cup of coffee. The only two constraints on me were that there had to be a transaction where a user ended up with a cup of coffee, and a low fidelity prototype had to be completed and tested in the next 29 hours.
Step 1: Conduct Field Research
I first teamed up with two other UX design students who had similar projects to conduct research on coffee drinkers and baristas in four different coffee shops. Our objective was to gain an understanding of who we would be designing our respective apps for and what the biggest pain points were in their experience of buying and selling coffee.
During the course of our research we learned that most of the customers we talked to valued location and convenience over both quality and price. They also did not necessarily like to wait a long time if they were on their way in to work, but if they were going to be getting coffee once the work day had already started, they did not mind waiting extra time.
Most of the baristas we talked to were concerned that they were losing out on tip income and the chance to build rapport with the customers that used apps to purchase coffee.
Step 2: Define Pain Points and Target Users
I made user flows as seen in figure 1 below, for each location and found that although they were different they all had pretty much the same pain point. The wait time to order was by far the longest part of the process.
Next, I sat down with the interviews still fresh in my mind and used a mind map tool to try and clump pain points and users into groups as seen below in figure 2. The mind map proved a useful tool for me since I still was not sure exactly which pain points I wanted to work on, but I knew that I would not be able to help everyone. Since the mind map does not impose a rigid structure, I was able to try many different organizations of both users and pain points until I had an idea of how I wanted to look at the problem.
I reorganized this information into a more structured chart. I then used this chart to narrow down what problems I might be able to solve and which users would be most likely to use the app, so that I could tailor it to best fit their needs. The chart shows the different types of coffee drinkers on the left and asks whether or not the possible pain points across the top are a problem for that type of coffee drinker as seen below in figure 3.
The chart let me narrow down my target users to people who are not picky about blends, don’t care about social interaction when buying coffee, want to save time, or are visiting a new city.
The easiest problems that I could address in addition to the objective of “being able to buy a cup of coffee,” were the wait times and the location of the nearest coffee shop.
Step 3: User Flows
The next thing I did was start laying out user flows as seen in figure 4 below. The pictures below show a user flow for signing up or signing in on the left and actually buying a cup of coffee on the right. When I laid out user flows, I saw that I could address the nearest location problem with a search by location or by name function. The results would also help address the wait time problem because they would display a “peak hours” graph for all the coffee shops in the area. To further address the speed at which someone could get coffee into their hands, a “1-touch order” could be set under profile so that all the user had to do was log in, or stay logged in, and hit the button to place their regular order.
Step 4: User Testing
After laying out several user flows in the app, I added each slide in the user flows to a prototyping app (prototyping on paper) and started making the links interactive as seen in figures 5 and 6 below.
After I had an interactive prototype I developed some basic tasks and took it out into the break area in our building and attempted some basic user testing.
Tasks for User Testing
1. Buy a cup of Starbucks coffee without any add-ins.
2. Buy a cup of coffee using the “1 click buy” option.
3. Log-in with Social Media profile.
4. Search Using Location.
5. Add heavy cream or honey to your coffee.
6. Ask, “Is there anything else I could do to immediately improve this app?”
I took feedback from the testing and completed a full iteration before I had to present the app to the design class. The results are seen at the link below.
Step 5: Reflection
I feel like the research went well and I became more comfortable with it the longer I walked around downing double espressos. It was interesting to learn that not everyone thought waiting in line was a problem at all, but in hindsight I guess I might have anticipated that a lot of people use those breaks during the day to avoid work for a while.
I am not a huge fan of the mind map tool but could see its usefulness after my third attempt to use it. I feel like I gained an understanding of how it can be used to start the process of grouping pain points and users. I liked the second chart I used because I feel like it clearly let me define what problems I wanted to address as well as who my target users were likely to be.
I liked drawing out the user flows on paper before I began trying to prototype. Just drawing them out and connecting arrows from one slide to the next allowed me to identify areas where I had not considered navigation and helped me define where I could address the speed and location issues in addition to helping sell coffee.
The user testing got better with each test as I refined the way I was conducting the tests in order to actually get feedback from potential users. By the last test, I felt like I had explained what was about to happen in a way that let the user know not to just rush through the processes and tell me it was fine. I was also better at deliberately slowing them down and making them tell me how they felt about each interaction they completed. I expect every project I complete will continue to expand my skills at all facets of UX, particularly information architecture, interaction design, and research.
Link to prototype: https://marvelapp.com/fc89j1g