Problem Overview
With the previous iteration of the mobile ordering feature, users were limited to actions like viewing the status of the order. However, if issues occurred with their order like a delay or cancellation, the user would have no way of knowing. In addition, if the user wanted to contact the restaurant or report an issue with their order, they had no way of doing so. It lead to a lot of frustration and so I wanted to make sure I addressed those concerns in the future iteration.
The previous version of mobile order feature
Challenges
Lack of Style Guidelines
There was no established style guide to ensure that this feature was cohesive with the rest of the app. The style decisions at the time were constantly being modified. I tried to combat the issue by checking in with the design lead to make sure that my designs matched with his overall vision.
Partnering with LevelUp
Playfull partnered with LevelUp, a mobile ordering platform that gave us access to their API. Their API allowed us to gather information about their restaurants and add them to Playfull’s current list of mobile order restaurants, giving our users a greater variety of restaurants to order from.
The issue was that restaurants could not report if an order had been picked up or not, which made it tricky to determine the right time to ask users for their feedback on their order experience.
Process
User interviews
I started off by reviewing responses from previous user interviews as well as talk with a few of my friends about their experiences with mobile ordering apps. I reviewed the apps that they regularly used to get a better understanding of what those apps did to provide a positive user experience.
I also reviewed previous responses and asked my friends if they had any issues when after placing an order. When summarizing all of the information, I found a few common pain points they had which were:
• Difficulty with tracking the stage of their order once it was placed
• Not being notified when their order is ready or an issue arises
• Difficulty finding a restaurants contact information
• Unable to find clear directions on how to get to the restaurant to pick up their order
Design Kick-Off Meeting
I had a meeting with the rest of the design team about my findings. We discussed what features would have to be included in this project to be a good experience for users. From there we developed a lo-fi user flow.
Tracking order user flow
Solution
Order Status
Original Order Status
I used the simple order status that Ming originally created for the prototype and thought about ways I could build upon that based off the user flow.
My Changes to the Order Status
Order status changes
I included the pickup time and order number to the order status bar so that users wouldn’t have to make an additional tap to view when their order would be ready for pick up in the details section.
Push notifications
In the case that the user forgets to check the app, I included push notifications that would be sent to the user as a reminder of the status of their order.
Order summary/Order details
By clicking the details button, users will be taken to their order summary. I was able to implement the information users wanted in a mobile ordering app including a map, restaurant contact information, and the option to report issues.
With the map, users are able to select it and it will open their default map app on their phone and direct them to the restaurant location. To contact the restaurant, the user can select the phone number hyperlink to contact the restaurant. There’s also a link for users to report an issue.
Confirming pickup/Reviews
Since restaurants cannot confirm that the user has picked up their order, I included a “Complete Pickup” button for users to confirm that they’ve picked up their order. From there they can rate their order experience with the restaurant.
Once the user has picked up their order, they will have the option to rate their order experience and leave additional comments.
New iteration
The lead designer Ming, suggested that a direction and details should be on the banner as icons, so that the user can easily access the most important features without having to enter another section of the app.
First iteration (right) and second iteration
User testing
Me and my coworker Annie looking for people to test the ordering feature
Goals when conducting our user testing:
• Have the user explain the function of the status bar
• Find the restaurant contact information
• Report an issue with an order
Order status prototype
User Testing Feedback
We conducted interviews with 5 people to validate our solutions. All 5 users completely understood the purpose of the ordering status, knew how to report an issue and contact the restaurant. A few users also commented that they appreciated how the feature was straightforward and included all of the information that they found useful.
Next Iteration
After user testing, I talked with the design team to see if there were any other ways that the feature could be improved. We decided on changing the background color of the order status bar to a darker color to bring the users attention to the key information about their order. We also decided to move the confirm pickup button from the bottom of the screen to the order status bar so it easier for users to notice and access.
1st iteration, 2nd iteration, and 3rd iteration
Additional Changes
Adding Context to Star Ratings
Looking back, I realized that there is no context on what each star rating means. I assumed that everyone would have the same idea of what each rating is. Now for each star rating selected, users will know what their selection means. And similar to tags used in Lyft to provide drivers feedback, I added tags to provide restaurants feedback on their overall service.
