SHOPEE
Redesign; online shopping platform
Product analysis, user research, prototyping, and user testing; team project.
GOAL
The objective of this project was to analyse an existing software, identify areas of improvement in its user experience and propose changes to these areas via a prototype. User tests would then be performed with this prototype to find out if our changes were indeed effective in improving the user's experience.
A page from our analysis document on Shopee's user experience.
An overview of Shopee's menu flows.
RESEARCH AND ANALYSIS
First, we had to familiarise ourselves with the Shopee app. We created a list of user tasks in various usage categories (e.g. browsing, buying, social/community interactions) and executed them ourselves to identify any pain points. We then categorised our experiences with these tasks into positives, neutrals and negatives - positives could be learning points, neutrals could be things to consider improving, and negatives were areas we definitely needed to address.
​
This exercise was particularly useful as some of the team members were first time/infrequent users of Shopee. Their insight was thus invaluable as they could provide a perspective untainted by prior knowledge on how to "properly" navigate the app.
​
Based on this, we also created a menu flow for the typical tasks a user would undertake on the app. It provided us with a reference of how the screens would transition into one another later when prototyping. This menu flow was made with Miro.
ORGANISING INFORMATION
With all these problems identified, we had to then sort out the priorities for each one according to its severity and how much it would affect the user's experience. They were further categorised into layout and functionality problems as those could require different approaches.
​
This helped the team get a better idea of how to start tackling the prototype and made the overall process of making it more efficient.
Some of the issues we found during our analysis.
The user journey for one of our personas.
USER PERSONAS AND JOURNEYS
We created a few user personas - namely, the primary, secondary, tertiary and negative personas - so we could better identify the needs and wants of each type of users. This would later help us create user journeys based on the usage habits of each persona, allowing us to better empathise with their experiences at each stage of executing their tasks.
The user journeys contained the task flows of these personas who represented their respective groups of users, giving us a better idea of how they would each navigate the app.
PROTOTYPING
Next, we made our prototypes. We created a low, medium and high fidelity prototype to test for different things at each stage. The low and medium fidelity prototypes were made in Figma, and the high fidelity one was made in Adobe XD.
Each version of the prototype also had customised task lists for each persona since they would be using the app differently.
​
The low fidelity prototype was to test for the basic usability of our version of the Shopee app.
The medium fidelity prototype was a reiterated version of the low fidelity one with additional icons. This was to test if the changes we made from the low fidelity version and the usage of icons were effective.
Finally, the high fidelity prototype was a more polished version of the prototype with more icons and animation. This was to test if the feedback and visuals provided by these elements enhanced the user's experience.
Behind the scenes of one of our prototypes.
Compiled test findings according to each user task.
The charts created to summarise our findings.
USER TESTING
After each version of the prototype was made we brought it to end users for testing. To get the most relevant results from the tests, we chose users who fit the profiles of the personas we were designing for. They were asked to complete the list of tasks we had prepared for their persona type so we could find out how effective our changes were for their experiences.
​
The findings from each round of testing were compiled and used as a reference for what to improve in the subsequent versions. Thus, any problems identified from the tests were again sorted by severity so we could prioritise what to tackle first in the next prototype. The results were also adapted into tables and charts to better visualise the data.
POST-MORTEM
Breaking down the Shopee app at the start of the project into its different features helped give us a clearer picture of the app's functioning. It made it easier to identify areas we felt could be improved, helping us focus our work on what mattered. Similarly, sorting priorities helped us ensure our final product addressed the most pressing issues we identified first.
​
However, due to the wide range of features of the Shopee app, the scope of the project was huge. We didn't manage to cover some of what we had in our low and medium fidelity prototypes in the high fidelity one given the tight timeline. The priorities of the high fidelity prototype could also be better managed by focusing on completing its features and reflecting content from the lower fidelity prototypes, leaving polish such as page transition animations for last. This is since features and user flows being complete is more crucial for the user's experience during user testing than effects added as polish.
