UI/UX Case Study: Pocket LoFi Redesign
Pocket LoFi stands out as a hidden gem in the world of lo-fi music apps that are made for the indie souls. Despite its under-the-radar status, Pocket LoFi offers users a selection of curated looping playlists, offline access, and a minimalist interface that caters to the discerning tastes of lo-fi enthusiasts. Users can dive into the world of chill beats and ambience to unwind, study, or simply relax with their favorite tracks, all available at their fingertips, no matter where they are.
Our goal is to revamp Pocket LoFi in order to cater specifically to students who listen to music while studying and develop solutions that will enhances their academic journey.
Project Brief
During the 18-week UI/UX Design course, I’ll need to identify challenges based on my persona and opportunities with the existing app in order to build a solution to solve user’s pain points. I’ll walk you through the entire process, from recognizing the problem to developing a design solution and, finally, constructing the mobile application prototype.
The entire design process was divided into four sprints:
- Research Sprint
- Concept Sprint
- Usability Sprint
- Handover Sprint
Research Sprint
In order to understand the problem of Pocket LoFi, the project has initiated the Research Sprint by making hypothesis of the problem and a user persona. Then, user interviews will be conducted to collect data and validate the hypothesis that have been made.
Hypothesised Problem Statement
By using Moore’s template, I was able to hypothesise my initial problem statement:
For Athea Zahira
Who wants to listen to music while studying
Pocket LoFi is a music app
That creates a personalized music playlist
Unlike Spotify
Our product a study session feature for students to study with friends while listening to music together
Hypothesised User Persona
Research Methodology
The objective and procedure of the research.
Research Objectives
1. Understand the behavior of interviewees on music app.
2. Understand their personal needs and experience on using music app.
3. Learn about the difficulties and problems that they encounter while using music app.
Research Procedure
1. Research basic information about the app.
2. Research about pain points of students who wants to listen to music while studying.
3. Prepare a list of questions for the interview sessions to collect information.
4. Conduct the interview with the interviewees.
5. List out all the collected data and generate insights.
Interview Schedules
User Interviews
I have conducted 2 User Interviews in total to collect more data from users.
User Profiles
There are total of 4 total of interviewees that I have interviewed. 2 of the interviewees are the same people who participated the User Interview 1 and User Interview 2. All of the interviewees are undergraduated students who enjoy listening to music while studying.
Interview Questions
User Interview 1 : https://forms.gle/zdfVALdNYHjBznny8
User Interview 2 : https://forms.gle/oKzSVztqbWQUpZNt8
Insights
Here are some of the notable insights from the data that I’ve collected from the user interviews.
Insights 1:
• 100% of the interviewees listens to music everyday. The average of interviewees spent on listening to music is around 6 to 7 hours. They always listen to music while studying.
• 100% of the interviewees are more focused on studying by listening to music. 33.3% of the interviewees mentioned that if memorization is involved in the study, she needs to play music that is not too upbeat to avoid distracting herself.
• 66.7% of the interviewees find it’s hard to find music that matches with their mood during studying. One of them spent almost 30 minutes in playlists to find one song that fits her mood.
• 66.7% of the interviewees had never tried listening to music with friends while studying. They express their worries of having incompatibilities in terms of music taste. However, they are interested to try listening to music with friends while studying.
• 100% of the interviewees feels rewarded if they could see their study progress and stats. They would also love to see the list of the music that accompanied them during their studies.
• 66.7% of the interviewees enjoys making music playlists. They claimed that making playlists will boosts their productivity. They don’t feel burden or difficulties while making playlists.
• 100% of the interviews finds that having a short quiz that helps them to find music that matches their music while studying useful. They feel like this feature will lessen their burden to find matching music for their mood.
• 66.7% of the interviewees are interested in feature where they can have a study session together with their friends or random people in the world. 33.3% of the interviewees feels neutral about the feature, as she thinks that it is not compulsory for her.
• 100% of the interviewees are interested in a feature where there’s a timer that could help them with their study session. 66.7% of the interviewees are familiar with the Pomodoro method and finds this feature useful. 33.3% of the interviewees sometimes fell asleep during her study session, and wishes to use this feature to avoid such thing to happen.
• 100% of the interviewees are interested in a feature where they can see their study progress and stats, alongside with a list of songs they listened to while they were studying.
• 66.7% of the interviewees finds that having the ability to customize the app will feel more productive and interested to use the app more. They said customizing the app will not distract them from studying.
Insight 2:
• 100% of the interviewees often study at night. They will listen to music while studying at that time in order to keep themselves focus.
• 66.7% of the interviewees noticed that upbeat music will make them excited and distract them from focusing in their study session.
• 100% of the interviewees experimented with different approaches, such as instrumental music, ambient sounds, or white noise, to enhance their focus while studying. 33.3% of them feels like it doesn’t really help her to focus, but she would often combine ambient sound together with a song.
• 100% of the interviewees express that social media is their primary distraction. Receiving notifications from social media would make them to have their hands on their phone during study session.
• 66.7% of the interviewees had used Pomodoro method before, but they express that Pomodoro method is quite boring and unmotivated without having music.
• 66.7% of the interviewees suggests to having a warning or reminder notification when users try to raise up their phone or try to switch to other apps.
• 100% of the interviewees agree that having an audio cue or signal will help to alert them that their session is ending. They don’t want to constantly check their phone to see how many time left they have for their study session.
• 33.3% of the interviewees suggests that having a loud and distinguish audio cue, this is because she has used other apps and most of them used soft alarm sound or happy alarm sound.
Validated Problem Statement
After collecting data from the user interviews, I have a clearer idea of users’ needs and difficulties. Hence, I have made amendments on my inital problem statement based on the insights I have gathered.
For Athea Zahira
Who students who struggles to study while listening to music because of social media distractions
Pocket LoFi is a music app
That offers users to listen to music with a timer feature
Unlike Lofi Music Radio
Our product different genres for each study subjects to boost their productivity. Users also to choose whether to play ambience sound to let them immerse in their study. Pocket LoFi also detects if users if they tried to use their phone during the study session, to minimize any distraction.
Validated User Persona
Full Research Sprint
Link: https://www.canva.com/design/DAFkKB3wjNM/YxB0boTpyIj0nljzP0iMAw/edit
Concept Sprint
Detailed Brands Analysis
After finishing doing the Research Sprint, I did a detailed brand analysis on some of lo-fi music apps which is Lola: Stream Lofi Music and Lo-fi 24/7 Hip Hop Radio.
Competitor Comparison Board
Then, I made a competitor comparison board to compare multiple aspects in order to understand each brand’s user selling point.
Feature Proposal
Multiple new features are added to enhance users’ experience when they are listening to music while studying. Having a study timer for users would be beneficial for them who has due dates to catch on. Also, making use of lo-fi music genres to boost their productivity would be fitting, as each genres has its own purpose.
New features:
1. Distraction Detection
2. Study Ambience Enhancer
3. Study Optimization Assistance
Sitemap
The sitemap that I’ve created for this revamp consists of 3 main important pages (Onboarding, Home and Start Session), and other 2 main pages will not be focused in this revamp.
User Story Map
User Story Map are created to give a better understanding of the app flow. It consists of activities or tasks that user needed to do in the app, and how many steps does it take to complete the activities or tasks.
Lo-fi Prototype (Wireframe)
I developed the wireframes by using Figma. I did a simple and straight forward layout design.
Concept User Testing
Following the completion of the wireframes, I began to conduct the concept user test for users to try out some of the new features that I proposed to see if they were intriguing enough to remain in the app.
Concept User Test Questions
https://forms.gle/ZJouQNJKRYMtoAN26
Wireframe Prototype Link
https://www.figma.com/proto/LcmILMUA7RnbMQe7kzNGgd/Wireframe?type=design&node-id=116-98&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A2
Action Plan
Based on the feedbacks from the user testing, I have listen out my analysis proposed actions regarding to it.
User UI Flow
Then, I created User UI Flow to help me comprehend how users interact with the app and the features.
Full Concept Sprint
Link: https://www.canva.com/design/DAFle1z00DQ/AQ00YNbm0d27Vv2zy1blFw/edit
Usability Sprint
Moodboard
After I completed my research on the UI designs, I made a compilation of moodboards that consists of core experience, color palette, layout, animations, button designs, icon designs, illustrations & graphics. I will only show the some of the moodboards below.
Hi-fidelity Screens Development
Hi-fidelity screens are created based on the moodboard and art style above. There are four times of design iterations during the design development, and I will only be showing two of them to make the comparison.
Development 2 designs has a lot of try and errors — but it was too simple and has a lot of empty space in the background, especially for the onboarding pages. It lacks of aesthetics, so I decided to further develop the art style of the design.
Designs from development 4 are much more better compared to the previous version that I have showed. For the onboarding pages, I applied retro design elements to differentiate it with other pages. For the rest of the pages, I made sure to reduce any empty spaces.
Usability Test
After I finished the hi-fidelity screens, I proceed by conducting a usability test for users to have a feel of the overall look of the app and if they have any problems or encounters while completing any tasks that I’ve given to them. The usability test will be divided into two categories which is moderated and unmoderated testing.
The purpose of this test is to understand more about the flow of the app, and to evaluate the user-friendliness of the app.
Usability Test Questions
Link: https://forms.gle/VJbNjqyQS9rZWrMm9
Usability Test Prototype
Task 1: Link
Task 2: Link
Task 3: Link
Participants Profiles
Below are the participants that participated my usability test.
Summary of Feedbacks
Below are the summary of feedbacks according to each tasks:
Action Plan
Based on the feedbacks above, here are the action plans that I could improve my designs:
However, after trying to make the changes, it is clear that all these changes are not suitable with the concept and layout of the app. Hence, I decided to not make any changes.
Full Usability Sprint:
Link: https://www.canva.com/design/DAFoIz7u0h8/PIaT-JBP664rSL17nJMP2g/edit
Handover Sprint
Handover Sprint compiles work for handover, including a collection of reusable components with clear design standards for future use.
Final Screens
Below is the final screens of Pocket Lofi app:
Style Guide
The style guide ensures consistent creation of colors, buttons, icons, and components for easier coding for the developer’s side. It also provides clear instructions for designers to improve the existing designs using the guidelines.
Project Roadmap
Product Mockups
Mockups are used to make the app’s design to look more realistic and appealing compared to an actual device.
Video Walkthrough
Below is the video walkthrough of Pocket LoFi in Figma:
Full Handover Sprint
Link: https://www.canva.com/design/DAFu1RkJQBM/ua2hCatOgjFm6ODkyjIAjQ/edit
Toolstack
I have used Figma to make most of the design, layout and assets for this app’s revamp. I also used Aseprite, which is animated sprite editor & pixel art tool — where I use it to make animated onboarding illustrations.
Key Takeaways
Key Learnings
- Learned the process of making a validated problem statement and user persona.
- Learned how to solve users’ pain points and needs in UI/UX aspects.
- Learned how to establish a good concept and art style of an app.
- Learned how to make a visually appealing and user friendly app.
- Learned how to apply variables inside Figma and make use of it on the components.
- Learned on how to prepare decks and style guides for other developers and designers.
Final thoughts
Generally, I have learned a lot of things through out this assignment. It was quite tricky to conduct interviews and tests, because I had to always change my feature proposals according to the users’ feedbacks. However, I learned that UI/UX designers are made to be solving people’s problems and needs. So, any features that I feel could be a good feature might not actually solve users’ problems. In terms of designing the app, I had a lot of fun making them! Especially when Figma just dropped a big update during the first few weeks when I was working on this assignments, there were so much features to explore — so I had to play around and figure things out by myself. I am glad that I managed to pick up a lot of new things along the way. It was quite challenging when I first started using variables, but at the end, it allows me to achieve a lot of things that I want in the final prototype. (It was so confusing, haha.) I realized that I actually really enjoy doing this assignment, and it might have piqued my interest in UI/UX design. I wished I had enough time to actually improve and explore more in terms of designing the assets — I feel that retro (like those 80–90’s buttons) are very hard to actually apply in UI/UX design, especially in 2D. Nevertheless, I am very proud with the final outcome, and I would never be achieve this if it’s not for this assignment. I would like to thank my lecturer, Jeremy Phun for helping me (a lot) in giving feedbacks, tutorials and ideas to enhance my overall UI/UX design!