Our team intends to solve the business proposal of creating a social media application that allows user login and logout, create a variation of a post, and to allow for cross-user interactivity between profiles.
During our research, we found that various groups of young people expressed their concerns about applications' ability to instantly share playlists with each other. Approximately 75% of people aged 18-35 use a music application daily.
It has been discovered that it is very difficult to gain a social following on the main music platforms, due to the lack of sharing ability between profiles and playlists.
1. Handle UX UI design
2. Defined color, typography, and interaction for the brand.
3. Design the end-to-end user experience.
4. Produced the floe/interation prototyping, design mockups, design assets and guidelines.
Simon Le- UX UI designer
Sophia Hsu-UX UI designer
Ian Bailey-Full stack Developer
3 months from September 2020 to December 2020.
Before approaching a redesign we needed to define our style guide to exist as a unified design language. After creating our new design language we were about to build out cross functional UI components.
I provided user experience design solutions alongside another designer, engineer. As a team, we share insights and prioritize features based on customer feedback and goals, while also balancing business goals.
I contributed to the realization of ideas, to gaining alignment, and to influencing decisions. Throughout the project lifecycle, I created and presented work to gain buy-in from stakeholder and executive teams. Taking the initiative, I found ways to go beyond my defined role, and executed beyond the plans.
In terms of technical process, I manage the development of large-scale interaction patterns for users to add content to documentation and customize the site's appearance. I created frameworks and prototypes to share the vision, design principles, and content strategy.
As a designer and developer, I helped improve the process of collaboration, ensured there is a common language and vocabulary among the two parties, and ensured that the designs and features are implemented correctly.
The issue that has been identified is that close friends have no way of directly sharing each other's playlists that they have created though competitors applications.
To do this on other apps, it's a lengthy process that requires navigating lengthy menus to find a specific share option. Then, the user is only limited to sharing a playlist through an external app, by copying a link.
This is not optimized, because ideally, app developers do not want to drive their users from clicking away from their application to use a feature in another. Replay tackles this challenge by directly linking user playlists with their profiles, making them accessible to all their friends.
The market has been occupied by giant competitors, known as Apple Music and Spotify. Both these applications have audio and gesture support while transitioning into video capabilities.
They are also developed in native languages, so competing directly against these two will be challenging. There are however some areas where the application can be improved.
For instance, the feature to share playlists with friends is not apparent.
.png)
Overall, millennials use music apps more frequently than any other demographic. According to Singh (2019), we have researched and found that up to 29% of young people use music apps like Spotify, Apple Music which shows the main customers using music streaming services focused on millennials and young professionals.
This group of customers who into modernity and like to share music to others. It shows a great demand for music sharing in this range of audiences.
Using an empathy map, I visualized user attitudes before I empathized. In creating this map, I wanted to identify gaps in my understanding of the user's needs and behaviors.
.png)
→ A mobile-friendly and easily accessible solution is desirable.
→ Assuring users that their playlists will be customizable and allow them to share freely.
UX research helps us identify and prove assumptions, find similarities across target audiences, and define their needs. Through a variety of methods, this research will help us increase the understanding of our customers who will use our products. Create persona is a research tool that helps designers better understand the client's problem and goals.
Our solution to this proposal is to create a social playlist sharing application. Users are able to create a personalized account, complete with a username, password, email address, and profile picture. This can be done in the backend in various forms, but Firebase API will be utilized. It makes for an easy integration process with React and MySQL.
Users can then explore other trending songs, trending artists, and trending playlists in a unique explore page that draws users attention. Combined with a creative colour palette and UI design, the app is intended for users to connect with other people making playlists and share their creativity.
A database will be set up using a music API to gather thousands of songs, which users can then filter through to find their favourite tracks, then they are able to create imaginative playlists and share them instantly with the world.
The app encourages users to connect with other people by setting trending playlists. The more popular a user gets, the higher the chance they get to show up on the main page.
.jpg)
To assist in visualizing the user's journey from brand discovery, to use, and to the sharing phase, I created a journey map based on the ideal persona. It was also a little vague and lacked industry-specificity when the 'opportunities' section was previously offered. The following opportunities were edited after peer reviews to highlight the pain points and challenges faced by each user.
Understanding the flow of end users was my first task in redesigning the interface. I keep in mind the pain points from user testing and proposed solutions above, then created a user story and used it to frame a user flow diagram.
Following the problem identification above, I created potential solutions to address these problems:
Using fewer steps to minimize completion time.
Establishing clearer visual form hierarchy by grouping related fields. Using some basic wireframes, I showed the users how the application's form would look and collect their feedback.
In order to do so, a visual hierarchy and layout of components had to be established.
.png)
We started the ideation process for the style guide.
The style of this application will be modern, solid and impressive. Keywords are also generated from persona data that we have collected previously.
We decided to use a dark theme similar to Spotify because it is a fairly new theme on the market while ensuring a modern, futuristic vibe.
The main color is bright orange, representing abundant and strong energy.
.png)
In these high fidelity prototypes, I tackled each of the issues I focused on previously detailed pain points to create a cleaner and more focused user interface while staying connected to a cohesive brand.
Orange color, black background create dynamism, modernity, and creativity.
Elements that adhere to design rules are rounded with predefined values to create modernity throughout the user experience.
.png)
After completing high fidelity, we immediately conduct testing on users to determine and verify the first designs will satisfy the users or not?
We prepare a set of face-to-face interview questions and a set of post-interview questions to filter out the pain points that users encounter and then correct them appropriately. The main goal of this user is to gather user information and feedback on the first draft of our application. It is expected that major changes are to occur after these testings.
100% of participants were able to complete all task scenarios with some confusion. All participants found it difficult to navigate the app and that it contained either very small or confusing components.
We understand that this version has several confusing features like:
The button color is darkened.
It is hard to read fonts and icons.
Users often find navigation confusing.
Several buttons make no sense and are unnecessary.
We decided to adjust the following features based on valuable feedback from our users:
The navigation bar at the bottom of the screen is the better place to use than the navigation at the top of the screen.
Eliminate buttons that don't explicitly target and mislead users
Edit button font size and color for clarity.
The high fidelity version 2 has major modifications taken from user testing. We reworked the revised version in 2 weeks through discussion and giving ideas to improve the old version.
We decided to use the bottom menu bar because they act as a convenient navigation, letting the user know where they are and how to return to their original position.
This is perfectly reasonable and effective in navigating for the user.
.png)
-min.png)
The testers feedbacks show:
The search bar should be clearer and more engaging.
Having a scrollable bar is a feature we should pay more attention to since our app consists of a large song library, and focusing a user's attention on adding songs to their playlist should be quick.
Then we continued to change a few more details in the search bar and released the final prototype.