UX/UI Case Study

Project Type
Concept Design  (IOS)

My Role
Product Designer

8 weeks

Sketch, Figma, Invision, Principle


STEP is a retail talent development app that aims to improve staff training experience by offering gamification-style training experiences, setting career goals, providing real-life scenario rehearsals and creating feedback loops.


Design Process


01 What is the problem and why it matters?


The Problem

What problem did I notice from working in retail?
During the last two years of working in a retail team forms of 25 people, I've already met more than 50 co-workers. Well, you might ask me, "What does this number mean?"!
It means that at least one member left the team every month, which equals over 40% annual turnover rate.
This problem not only occurs in one company but many other companies my co-workers and I have worked for. I noticed that retail employees get bored at work quickly and are often not committed to their roles.
What results did it cause? Those companies who struggle with keeping their staff also suffered from customer complaints and revenue loss.


Market Research

I was hoping to see if there are existing tools in the market that aims to solve this problem.

What products do they offer? How do their products help alleviate the pains? 

With this evaluation, I was able to find the market gap and opportunities to decide my research direction. The three main companies I identified for the scope of this project were: Connecteam, Criteria and SAP Litmos. For each of them, I created the following analysis.


Project Constraints

Clear on constraints helped me shape and focus problems, and provide clear challenges to overcome.  I estabilished my constraints on three main areas: business, social-cultural and technical.


User Interviews

I believe the problem of a high turnover rate is closely related to retail staff satisfaction. Moving forward, I decided to interview six retail staff from sales to management positions aged 20-30 who work in a fashion/lifestyle brand. The interviews took place in September 2020.

The research objective was to understand the reason why employees feel unengaged. What is the key area of improvement I can focus on to alleviate the problem?


02 What insights matters to the problem?


Interview Insights

After gathering information from the findings of the interviews, categorize them into pain, behaviour and motivation and organizing them into different themes: issue with Management, Lack of training and development, lack of opportunities, and schedule flexibilities. I noticed the most significant obstacle for companies to keep their retail staff was the lack of regular training and career guidance.




A Story From Alma


03 Solutions to the problems.




Once I was clear on the main task flow, I started to sketch out the possible solution. Using inspirations from other existing UI components and looking at functionalities from dribble, Pinterest, and existing apps, I started sketching out different ideas


04 From ideas to functional wireframes


Low-FI Prototype

From sketching on paper to digital wireframes, I went through different versions of each screen to arrive at the prototype.. 


User Testing

After going through the ideation process above, I used my mid-fidelity wireframe to test out the usability. This prototype underwent usability testing for two rounds with 5 participants in each round. 

My Testing Goal: Understand users and discover the best experience through iterations

Key Tasks Tested: Sign up/ Select career goal/ Complete a training/ Unlock the next training/ Check your skills and community.

Major Problems and Iterations

1. Users could complete most of the tasks. The major issue appears when they were asked to complete the challenge and unlock the next session. Most of them were confused about the task flows and could not complete the task.


Changed the task flow - the app would direct the users to the main session page after watching the content. The instruction page would pop up afterward. Users can use the "view all" button to see all challenges and tap cards to finish them. A notification would send to the manager after they complete all challenges. After the users receive feedback, they would be able to unlock the next session.


2. The main session page hierarchy is not clear enough. Users find it difficult to continue the next step. 


1. Reorganized the information into sections.
2. Added a larger CTA button to draw users' attention to the next step.
3. Added cards to separate each section.


3. Currently, the app feels very game-like and adventurous. I should simplify and add more app features to make it app-like


Implementing more e-learning pages. I added the unit page, redesigned the video content page, note-taking page and text content page. 


05 When UI design meet low fidelity prototype.



06 A beautiful demonstration of the final product.



How did I continue challenging myself?


Marketing Website

To continue challenging myself, I built a responsive website that aims to talk about the benefits of STEP to the stakeholders. I needed a site that quickly explained my concept and conveyed essential features and information to my customers.


Multi-platform Challenge


When revisiting my research and interviews, I noticed some of my interviewees mentioned their stores provide iPads for the purpose of assisting customers and share training files.  I realized it would also be beneficial to have a tablet version for STEP so that the management can use the store tablets for training as needed. 

What are the next steps and key learnings?


Next Steps

THE SUPERFAN| Tarot Cards of Tech
How would a community of my most passionate users behave?

Considering the purpose of this app is for retail employees' continuous training and development. I asked myself few questions based on THE SUPERFAN/Taro card.

1. What would happen if one user reaches the end of the course?
2. What would happen if a user finished all courses to achieve the selected career goal? Would there be any open opportunity for them to step up their positions at that moment?
3. How would a company use this if they prefer to add or customizes something more branded content?



By finding the answers to these questions. My next step would be:

1. Opportunity features- develop a section where companies can post their internal opportunity to motivate users. Let the users see how their training results can help them step up to their position goal.
2. Develop the management version for STEP, which offers the company to modify the training options and plugin their personalized training materials into different units.

Key Learnings

Every decision you make should talk to your user.

I went back and forth many times to check my research results when I need to make a design decision. Whenever I'm not sure about some options, I would think about which option is more meaningful for the users? How would a user respond to these designs? Is this option meaningful and necessary? At the end of the project, the product should be a significant and relevant experience for users.

Your end-users might not be the people who purchase your products.

Like how STEP is designed for the retail employees. I still need to consider how this product benefits the business and how I can sell it to the company stakeholders to purchase it at the first stage.

TESTING, TESTING, TESTING- What I think makes sense does not mean it makes sense to my users.

I had to revise my original wireframe multiple times during the testing phase. Gaining valuable feedback from the direct users and peers was very helpful regarding on how they perform the tasks. It helped me understand who my users are and what they are trying to achieve through the product.