Dunkin’ Donuts
Project Overview
Ordering on the Dunkin’ Donut app is a convenient way to order ahead so you don’t need to wait in line to order/pay and can just pick up your order once you arrive.
A great idea - unless you accidentally ordered to the wrong location because the UX for selecting a location was unclear due to the overwhelming number of “nearby” locations to choose from and the map being too zoomed out it doesn’t benefit the user and once you do have a location selected it is confusing to verify the chosen location.
It was hypothesized that the user would prefer for the app to suggest a location closest to the user to reduce the time it takes for the user to make a choice, along with a map that it more interactive in showing your current location and the location of the selected store.
All of these pain points and assumptions were addressed and tested in our final design solution which solves the current user flow of selecting a pickup order location.
Improve the user flow of selecting a location that the user will pick up their order from.
One major challenge that I was faced with was working with a smaller pool of users to do user tests on, due to the project being independent. Having a larger group of users for testing would have gotten more conclusive feedback and I would have been able to draw more conclusions and links between users.
Project Goals:
Challenges:
Existing App
Existing home screen has the order button all the way to the far left bottom - it is the last thing I see on the screen
So many initial options being shown to me in the same visual hierarchy and it’s hard to see where I am in relation to the locations
The map doesn’t zoom in once a location is chosen - it is even harder to see now where I am in relation to the selected location
The map in the checkout screen is even more zoomed out than before, making it less useful for location confirmation on this screen
My Process
My Process
My first step was to complete a discoverability phase. This included a UX Audit of the current user flow and a competitive analysis of competing apps.
Discoverability
I summarized 3 themes from this phase
1. Recommended Locations
2. Clear call to action
3. Reduce redundancy
User Journey
Hand Sketches
My next step included brainstorming and creating hand sketches to solve the current pain points noted during discoverability.
With my designs I wanted to avoid overwhelming the user by highlighting recommended options, while making the final selected location obvious for the user.
Low Fidelity Wireframe (V1 & V2)
In the next step I took the hand sketches I created and create low fidelity wireframes based on them.
User tests were conducted with the below wireframes to get feedback as quickly as possible at lower levels of design. The quicker I was able to get feedback the quicker I was able to adapt and improve the user flow.
User Testing and How I Adapted
When creating the questions for the user tests I focused on determining how easy was it for the user to order, favorite and select the desired location, and at what point in the user flow was it clear to the user which location was being selected. Along with finding out any other pain points the user may experience.
“There are too many call to actions on the home screen”
“The order button on the home page doesn’t look clickable”
“The nearby/recents/favorites might be a bit overwhelming.”
“I was confused at first why selecting my location didn't move me forward in the order flow.”
“It would be helpful to know how busy or how long the queue is at certain locations”
“If there was a way to see the order preview in the "See you Soon" screen to make sure I got my order correctly.”
“The large icon on the confirmation page distracts from the useful information”
“It would be useful to get directions from the app so the user can jump straight to getting directions to their pickup location.”
User Validation
“Necessary information (location, pricing, drink selection) was always present on screen when needed.”
“The wait time under the location selection is useful.”
“I liked the smooth location transition when switching between locations.”
“I like how the closest place to me was already selected. Most of the time people want to order something like coffee that is closest to them and that they can get asap. I like how the selected location's pin is larger than the other pins.”
“I liked the emphasis on picking the location first and foremost. I also liked that locations nearest to me were listed. Since dunkin is pretty ubiquitous in America, I could see this being genuinely helpful if I were in a new location”
High Fidelity Wireframe
(V3)
A high fidelity wireframe was created to implement user feedback.
Component List and UI
(V4)
Components and variants of components were implemented for design elements that were being re-used. These were used to implement the UI into the design.
Results
Through user testing I was able to receive valuable insights that allowed us to enhance the user experience and meet our project goals successfully.
Check out the final prototype here!