Hi! I'm Li Yi
Nothing brings me greater joy and a sense of fulfilment than creating intuitive designs. I aspire to value add to applications and services that aim to help people in various ways. Being adaptable and empathetic helps me identify best practices to employ based on user needs.
​
I am currently a product designer at The Straits Times, designing features for mobile application and web.
​​
In my free time, I enjoy drawing, painting, crafting resin art and gaming!
The Straits Times Live Blog
Feature Addition
Spotify is a Swedish audio streaming platform. With over 433 million monthly active users and 188 million paying subscribers, it is one of the largest audio streaming subscription services as of June 2022.
Spotify generally has a well designed UI/UX. Through interviewing users of the application, we learned that there are functionalities that users would like to have. There were also pain points for both free and premium users that could be improved on.
​
The redesign of this application was started in September 2022 and completed in October 2022.
CUE Microsite
Restructuring of Information Architecture
Spotify is a Swedish audio streaming platform. With over 433 million monthly active users and 188 million paying subscribers, it is one of the largest audio streaming subscription services as of June 2022.
Spotify generally has a well designed UI/UX. Through interviewing users of the application, we learned that there are functionalities that users would like to have. There were also pain points for both free and premium users that could be improved on.
​
The redesign of this application was started in September 2022 and completed in October 2022.
Spotify App
Feature Addition Project
Spotify is a Swedish audio streaming platform. With over 433 million monthly active users and 188 million paying subscribers, it is one of the largest audio streaming subscription services as of June 2022.
Spotify generally has a well designed UI/UX. Through interviewing users of the application, we learned that there are functionalities that users would like to have. There were also pain points for both free and premium users that could be improved on.
​
The redesign of this application was started in September 2022 and completed in October 2022.
1 | Defining a User Persona
​In this project, we made personas for free, freemium and premium users of the application. Listed are basic information of the target persona, their habits, pain points and goals for using Spotify.
2 | User Journey Mapping
Knowing the pain points and goals of the target persona, we then worked on understanding their user journey. A user journey map was created to show the specific goal the user has in mind, their mood and inner thoughts while trying to achieve their goal.
3 | User Task Flow
After understanding the areas that caused the user to be frustrated, we looked into the task flow of achieving the goal that the user persona set out to achieve. The task flows were to listen to a new daily mix playlist and looking for a new playlist.
​
Having looked at both task flows, we considered options that adds new functionality to optimise and improve on the steps required.
4 | Paper Prototype
After understanding the areas that caused the user to be frustrated, we looked into the task flow of achieving the goal that the user persona set out to achieve. The task flows were to listen to a new daily mix playlist and looking for a new playlist.
​
Having looked at both task flows, we considered options that adds new functionality to optimise and improve on the steps required.
5 | High-Fidelity Prototype
After testing using the paper prototype, we requested for our testers to complete a survey and short interview, to gather feedback as well as get their insights as for what needs to be changed or improved. With the information and data organised, we polished and finalised our Spotify app with the added functionality for users to organise and customise their home page.
6 | Post-Mortem
Considering the 6 week time frame we had, it was an ambitious project taken by my team to try and add a quality of life functionality to an already polished and well designed application. We met with many challenges along the way, for example, getting the prototype interactions to flow the way we wanted in figma.
​
There are definitely points we can improve on, such as researching more into the applications we choose to redesign as well as getting more feedback from both users and non users of the Spotify application, to get a wider range of data.
The Straits Times
User Flow Improvements
The Straits Times mobile application is one place for Singaporeans to get their local and global news. The application is free to download and has an optional subscription plan which allows users to access premium articles.
​
The redesign of this application was started in January 2021 and completed in March 2021.
Team members involved in this project:
- Teo Li Yi
- Agnes Ho Hong Ning
- Goh Jia Qi
1 | Analysing The Current App
The Straits Times mobile application was chosen as there are many complaints from existing users, citing their poor experience on the apps, frequent advertisements and difficult navigation
2 | User Research
My team looked to create a user persona who needs to be always up to date with news sites. Belle Tan was the persona we had come up with, someone who is tech savvy and time efficient.
​
User stories were then crafted based on her personality, day job, daily needs and requirements.
3 | User Pain Points
The issues of the application were further detailed after we drafted an empathy map, listing how Belle felt and the thoughts she might have while using the application.
​
The main issues we identified that needed to be solved were:
- Data not being grouped meaningfully
- Advertisements blocking article space
- Unnecessary time wasted when finding desired articles
4 | User Task Flow Improvements
Research was done to look at our target user's processes to see what improvements we could make.
The main task flows we focused on were the steps taken to perform a keyword search and accessibility of the bookmark functionality.
​
Having looked at the current task flow, we then crafted an improved task flow to reduce the number of unnecessary steps and condensed pages when possible.
5 | Low-Fidelity Prototype
With the information and blueprints required, a low-fidelity prototype was created to test the user experience and flow while using the applications. User testing was also conducted frequently in this stage of development to enhance users' experience within the application.
6 | A/B Testing
Two sessions of A/B testing and user surveys were conducted during production. We interviewed people who closely matched our target persona and had them try our prototype. Their task flows were recorded and used to determine if we were on track with our end goals. We had our testers fill out surveys with their experience in using the application, to catch any extra issues we could not notice.
7 | High-Fidelity Prototype
The high-fidelity prototype was created with all the data we have gathered throughout this project. A style guide was also made to keep all elements consistent, which helps to solidify the company branding. With the prototype finalised, one final user testing was conducted to make sure the application functioned smoothly.
8 | Post-Mortem
Working on this project was an eye opening experience, allowing me to learn and better empathise with a persona. Understanding your user is key to improving design. Whilst three short months was a tight timeline to polish the prototype to a high standard, it was definitely enough time for us to identify, innovate and improve the experience for users of the application.
Hatsune Miku Colorful Stage
User Journey Redesign
Hatsune Miku: Colorful Stage is a 2D rhythm game featuring a character gacha system, story mode and rhythm gameplay. The game was originally released in Japan under the name Project Sekai, but has since been translated and ported for global audiences.
Due to it's theme, range of music and co-operative content, the game has found many fans worldwide. We believed that a redesign of the currently clunky interface will increase the accessibility of content of all players, as well as improve player retention.
1 | Defining User Personas
An initial survey and group analysis was conducted within my team to identify core issues in the application. We concluded that a lot was left to be desired in the UI, especially in their menu design. The flaws identified affected both long time and new players of the game, from which we created our two target personas.
2 | User Journey Mapping
We interviewed both regular players of the game and people who had never heard of the game before, to test out navigating within the application to gather some user journey data.
Our major concern laid within the question: "If regular players of the game had a tough time finding things, how could the new players ever get past this hurdle?"
3 | User Task Flow
From the data gathered during our playtest sessions, the most difficult task to achieve was to locate their own player ID. While it only takes 7 steps to locate the player ID (which is already considered unnecessarily long), new and non-players took on average of 25 staggering steps to locate it! We noted that the issue stems from where the player ID is located, as our play testers tend to look for it in the wrong tabs.
4 | Low-Fidelity Iterations
With the research done, the next step was to iterate and come up with improved designs for the UI, especially for the menu overlay, tackling the issues we have identified. We explored many layout options and spent extra time and care when planning for the menu overlay. After testing multiple iterations, my team decided that the best approach was the most minimal and intuitive one. Hence, we settled on Menu Overlay Iteration 3 as the final design.
.png)
.png)
5 | High-Fidelity Prototype
As we iterated on the high-fidelity prototype, we conducted rounds of testing, surveys and interviews to make sure we were solving inconveniences for the players sufficiently, without causing more confusion. We also worked to keep the colours, font and sizing of UI elements consistent to maintain quality.
6 | Post-Mortem
My team is proud to say that we managed to fix issues that caused an unpleasant user experience. As this project focused more towards improving the UI/UX of a game, it was vastly different from the other projects we have ever worked on.
My main takeaway is that we have to be adaptive in the way we work as an agile workflow was key to success when working with games. It may take multiple iterations to come up with something that not only looks aesthetic, but also have a consistent visual language and have clear signifiers to be considered intuitive design.
Sometimes, choosing to go back to the drawing board when a functionality we redesigned does not go to plan during testing, is the best approach to solving a problem at its root.
