Improving User Activation in Sign Up Flow for Starbucks Indonesia Reward App
In this project my role is as UI/UX Designer. The type of project is a mobile application with a duration of about 4 weeks (June - July 2022).
Overview
The Starbucks Reward App is a application to order ahead and pay in stores. Rewards are built-in, so you’ll get stars for free drinks and food for your purchases.
This project was done about one months and mentored by Arya Ronggo. For disclaimer, I don’t work for Starbucks. This is a final project I do as an aspiring UI/UX Designer. I worked on this project as a team with Didha, Riana as The Design Team and The PM Team.
The Problem Triggers
At the end of June 2022, we got the final project to redesign the app. So we chose one of our favorite F&B products, the Starbucks Indonesia Reward App because my team and I have used this application several times. But we are not satisfied because we found some features that can be improved. So, here is a list of problem hypotheses based on our observations:
- Top Up. Users have difficulty finding entry points and CTA button for
top up account balances and product orders. - Sign Up (Focus on this Feature). There are too many things to fill in one screen for the sign up process so user will be overwhelmed and unfocused. We also get several errors system (based on our experience and this is another thing). Of course this will certainly have an impact on user activation.
Research Process
As designers, there are a couple things we can do to dig deeper into our hypotheses. Disclaimer, this case study only focus on sign up feature.
Store Review
We found from reviews on PlayStore that a lot of users find it difficult to register for the app.
Competitive Analysis
If we look at some competitors, the sign-up flow is very simple and on one screen there are only one to two tasks. So, the user does not feel overwhelmed.
Kopi Kenangan
Fore Coffee
Organizing Insights
We recap all the research insight above to get problem definition. We can get the conclusion that, the problem we want to validate is in line with the problem the user is facing. As a user want to be able to sign up easily.
Our Main Objectives
Then from the research, we identify opportunities that can be done in our design using the HMW framework:
How Might We
- The registration flow in the application more concise and clear
- Provide a minimal signup and homepage view to accommodate the signup and top up flow?
Think The Solution
Based on the HMW we create in the previous process, we carry out the ideation process using brain writing simultaneously for get new ideas. Any new ideas we categorize it through discussion using affinity diagrams. Then, we categorize insights existing with important and non-important, easy and difficult quadrant for curating which ideas can be executed.
Sign Up Flowchart
We created a flowchart for the registration process, It helps us to simplify the explanation of the process that we want to create. That way, the flow of the program will be easier to understand.
Generating Ideas
We sketch ideas with Crazy 8 method, to train and get an optimized wireframe design.
Wireframing
We continue sketch at Lo-fi Wireframe.
Hight Fidelity Phase
So, after the wireframe stage has been finished, we proceed to the high fidelity phase and come up with this design
Design Validation
To validate the product it is important to perform Usability Testing. Before doing it, we make a UT Planning which contains scenarios and tasks.
For usability testing tools we also use maze. We approached 3 people to virtually testing the design solution. We asked them to do 6 different tasks, followed by a few questions to get a deeper insight into their experience.
Overall, the steps have been smooth. For details of the task and the results can be seen here.
Quote From tester, The application is easy to use.
Testing Insights
We also got valuable findings insight and feedback from our mentor in this process to iterate,
Insight from Maze Report, shows that 50% users who navigated outside the expected path in sign up page.
Feedback, Email and phone number fields should be made into one field, give negative case in registration flowchart and in PIN set page, maybe you can add back button and it is recommended to add copywriting to explain to user what to do on that page.
Iteration
Finally, here is the iterated version and this is for final design.
This is for sign up flow with negative case,
The reflection
- On this project I learned a lot about collaborating with the PM Team and other designers.
- The testing process taught me a lot about user behavior when using designs. Where I thought this design was easy to use turned out to be a lot of room for improvement.
