I redesigned a screen of Starbucks App

I did this to practice identifying and understand problems and solving and testing them.

So this is basically a design challenge I am doing which is a part of my curriculum of the UX Career Accelerator Program by Growth School.

So I was told to pick a screen of any app, find issues based on the Heuristic Evaluations, fix those issues, make a prototype, get it tested and improve it again. I tried doing just that.

Alright let me show you what I did —

Here is a video of how the user flow is while placing a default order.

And here is a link to the prototype of the improved version.

About Starbucks IN App
Starbucks In app is one out of many for different countries, this app helps the user to choose from the menu and place the order to skip the queue at the Barista, and also redeem rewards in a seamless way.

Why I chose Starbucks?
There was no particular reason, I was asked to pick a random app and a flow of the app and work on it, I scrolled through some apps of my phone, I found Starbucks and realised this is one of the apps I have not at all used enough, I figured why not check it out maybe my fresh insight on this could help me identify some issues, and I guess it did.

Basically to improve UI Skills it is best to learn from existing designs,

I also kept the Business Metrics in mind such as Optimising for funnel drop offs & Session Length Metrics. I feel improving the above features affects these in a direct way.

So I identified 3 problems, I was told I didn’t have to solve all problems because being a human sometimes we cant solve all problems, but I felt these were minor problems which could be solved nonchalantly so I did it.

I could find 3 issues under 2 Heuristic Evaluations — Flexibility & Efficiency of Use and User Control and Freedom.

1. No Mic Option For Search (User Control & Freedom)
2. No Order Customise Option while placing the order to reduce order placing time. (Flexibility & Efficiency of Use)
3. No Order Quantity Visibility while placing the order. (Flexibility & Efficiency of Use)

I did not do the low fidelity paper prototyping for this challenge, though it could have been done, but I figured the app Figma allowed me to make the desired changes effortlessly, I would definitely use the low fidelity prototyping method when I am conceptualising in a deeper process, but currently the minor changes could have been made directly with minimal time and effort, hence I felt it was not required.

Then I went ahead and did the Usability Testing, to see if my changes to screen made sense and worked better for the users.

The user I tested with tried to place an order from the existing Starbucks app and then through my prototype.

I could see that she found it difficult to understand the customise section of the current app, as once she clicked on Add item it did not add it to the cart but took her to another screen asking her to customise her order, but when she used the prototype she realised it was clear when it was mentioned that one could either customise their order or add it to the cart, though I did feel that just “Add Item” was still unclear and “AddI Item” with Default mentioned right there would be clearer hence I did that and here is the end result.