About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
KKBOX - desktop
KKBOX is a well known music streaming platform based in Taiwan for more than 18 years. The service covers 5 different countries and more than 800,000 active users. This project is a step of bringing the Beta version of the desktop app (web/mac/windows) to official version.
# UX Design # UI Design
Background
Back in the days when KKBOX just released, the internet environment wasn't as well constructed as today. So, KKBOX provides the offline experience that allows users to listen to pre-downloaded songs under poor connection circumstances. However, when the newly built desktop version KKBOX (Beta) was first built, the offline mode wasn't included. In order to bring the Beta version to official version, we have to created the offline experience for KKBOX desktop version app.
Project Goal
Create an offline mode that merges perfectly into current KKBOX desktop experience. Include all of the features that mobile have, but design particularly for the desktop users.
The Problem
In order to achieve the goal that was stated above, there are two main problems that we have to solve.
1) HMW switch between online and offline mode
2) HMW download songs
Potential Issues
Unknown technical limitations
Involved RD in the early stage of design process
Created private channel for timely communication
Unvalidated users' needs and pain points lead by limited resources (time / people)
Asked for history customer service issues that is about offline mode (including mobile)
Enough thinking,
let's get to work!
CS Issues
Although there is already a offline mode on mobile app, the desktop scenario must have different needs. Since the limitation of time, instead of conduct a user research, I suggest that we ask for history CS issues to get alternative insights.
User Needs
UX Research
Problem 1 Switch
Basic listening feature while there is no connection
Know what mode they're currently in
Problem 2 Download
Download feature in every playlist for them to download their favorite song
Know which songs have been downloaded, which haven't, and which are waiting in line
Competitor Research
As always, I checked out Spotify's desktop app for referencing the switching mechanism. For download, I went to see Google Drive and Slack.
User Workflow
In this phase, I mapped out the whole flow for offline mode, including switching and downloading. So that I can list out the pages that I need to modify based on it.
Wireframe
I would like to point out that why do the "wireframes" aren't a bunch of plain lines and gray rectangles. I built up a components file specifically for desktop version. So, all of the existed elements that I need to design were built into a reusable component. Instead of start from wireframe, I can put the components together like bricks and see what the final UI looks like.
Hand-off
For our hand-off process, there are some special steps to make sure the quality and consistency of our outcome. Firstly, we built a hand-off template for designers. Also, there is a spec indicating kit that we built in Figma. Lastly, I created a hand-off checklist for the team to make sure they've cover every aspect that developers need to know.
Launched
Offline mode
While the system detected the device has no connection, the app will switch to offline mode automatically. The limited features will disabled accordingly.
Playlist Page
Users are still allow to access their playlist. But only the songs that were downloaded can be listened.
Download Queue
Download queue appears when users click on download icon. It moves in from right as the form of a pill. Users can also click to expand and collapse the list.
Obstacles & Adjustments
Decision making
Not sure how sensitive the online / offline detector was
Before developers actually start building, we're not sure what's the definition of "no connection". What if the connection was only lost for 1 ms? Should we switch users' app to offline mode? Or should we ignore it?
In order to prevent users from switching back and forward between online and offline mode, I decided to design a "no connection" page between modes for users to decide whether they're going to enter the offline mode. After released, we found out that the detecting mechanism is fine. So we took out the no connection page and made everything automatic and smooth.
The first flow was not the best experience. But in order to prevent the worst, I decided to let it go online and test it with real users. And then iterate in the following update.
What would I do differently
Retrospective
User Research
Due to the time limitation of the project, it was impossible for me to conduct any research methods. So I sorted out the users needs based on history CS issues. However, if I have enough time, I would run a qualitative research by conducting a user interview. So that I can have a better and a more authentic understanding of users' needs and pain points to support my design decisions.
PoC
In the first version, we launched an alternative solution because of the technical uncertainty. If there was enough resource, I would suggest that we can have the develop team build a basic version just to test the detector.