Summary
My first individual project involved creating a prototype interface for the music streaming app Electronica Express.
Time frame
Oktober - November 2023
Key points
UX/UI, Research, Visual hierarchy, Prototyping, User tests
Project overview
The music streaming industry is experiencing a period of rapid growth and innovation. The client aims to launch a new streaming service that offers not only high-quality music but also an unprecedented user experience.
Goals:
- Develop an interface that is both functional and aesthetically pleasing.
- Create features for song search, browsing categories, and playback control.
- Include a visual timeline showing how much of the song has been played and how much time is left.
My role
In this project I acted as a UX/UI designer. I had complete freedom of action and the opportunity to go through each stage of development on my own. It all started with planning and time management, where I outlined the most convenient workflow and set deadlines for each step.
All in all, my work stages on the case included:
- Research (brainstorming, market & competitive overview, target group analysis, user surveys & interviews, user personas, user flow diagram, moodboard)
- Design (sketches, digital prototyping (low- / mid- / high-fidelity, interactive prototype)
- User testing (usability test, 'think aloud', interviews)
Research
At this stage, I conducted research on the market, competitors (Apple Music, Spotify, YouTube Music, Tidel), the main trends in UX / UI design and best practices in the development of music applications.
I also conducted several interviews and surveys to understand how often, under what circumstances people listen to music, and what features of music applications are most important to them.
After analyzing the results I decided on the target group, created a user persona and a map with a user journey. As the target group I chose middle-aged people (30-45 years old) with an average and high income who can buy a premium version of the product because they listen to music often, several times a day, usually on the road (travelling, driving, commuting), sometimes while time of work and study, playing sports or doing housework. They are quite conservative when it comes to music, have established musical preferences and therefore value personalization. They rarely search for and listen to new music. For them, one of the most important functions is quick access to their favorite music through search and recommendations.
Design
At this stage I was focused on developing the design itself, taking into account the needs and preferences of the target group. I developed a graphic profile, made several lo-fi and hi-fi wireframes that I needed to demonstrate the user flow and that covered the requirements of the case. Among them:
- Application load page
- Registration / login pages
- Select-a-plan page
- Onboarding page
- Homepage
- Homepage with mini player
- Page with player
- Search page
When designing the layout, I used a grid, which greatly simplifies the design process, improves the overall structure of interface elements, helps align elements horizontally and vertically, which ensures more accurate positioning of objects. The result is a cleaner, symmetrical design that looks more professional.
UI/UX Trends 2023 that I used in my project:
• Bright and bold colors
Bright and bold colors are often used to highlight tooltips, navigation elements, or other important information. They can be used to create contrast and improve the readability of text and other elements, which is especially useful for users with visual impairments. Bright colors help create a strong visual identity, evoke certain emotions and create a certain mood.
• Dark mode and high contrast
Besides aesthetics, dark mode has a number of advantages. The contrast between foreground and background elements makes text and other interface elements more legible, especially for users with low vision. Dark mode interfaces can reduce glare and improve visibility in low light. They can reduce the amount of power consumed by devices with OLED or AMOLED displays, since these displays use less power to display darker colors.
• Сard layout
Cards help you organize interface information efficiently and significantly improve usability.
The project uses neutral colors: shades of black and gray, white, as well as two colors to create contrast and accents - orange and green. Classic neutral colors perfectly emphasize the conservatism of the target group, while orange attracts attention, uplifts the mood, radiates warmth, energy and optimism and inspires. These are exactly the feelings I would like to evoke in the users of my application. This color also resonates with millennials, Generation Y (people born roughly between 1981 and 1996), who are my target audience.
For the project I used the Space Grotesk font. It looks beautiful and works equally well for a variety of text elements such as headings, navigation menus, information blocks, buttons and captions due to its readability.
All information from page to page is organized taking into account the visual hierarchy and such Gestalt principles as proximity, similarity and common fate. This makes it easier to navigate through the app and find the information you need.
Prototyping
This stage included stitching of all wireframes. To do this, I needed to place all the finished wireframes in the order in which the user flow would occur and make changes where necessary so that the prototype was designed in the same style. Next, I made the prototype clickable. A clickable prototype is an interactive diagram of an application that simulates user interaction with the interface.
User testing
The final stage was user testing, which were attended by 5 people aged 35 to 43 years old, ideal for my target audience. All in all test results showed that users liked the design. Experimental features, such as the “Surprise Me” button or connection of devices via Bluetooth on the player side, did not go unnoticed and were well met.
Challenges and solutions
The biggest challenge for me in this project was working with restrictions and subsequently choosing the target audience. Realizing that almost everyone listens to music, but guided by the principle “you can’t design for everyone,” I decided to narrow the target audience to middle-aged people and develop a design taking into account the preferences that are typical for this group. Based on research results and a survey of representatives of this age group, it turned out that the main priorities for them are a high degree of personalization and quick access to music.
In my design, I tried to achieve personalization through the welcome / address to the user on the home page; taking into account his preferences when creating blocks with recommendations. thematic blocks with recommendations based on user preferences (favorite artists, new releases, search by genre, search by mood, search by activity).
Quick access to user's favorite music is provided through the navigation menu at the bottom of the page, from where he / she can go to the library, through the home page with various thematic blocks, or through the search page.
Reflections
Previously I had to worked in a group, where tasks were divided among all group members. In this case, I went through all the stages of design development on my own, and despite the large amount of work, I was able to study each of the stages in more depth and detail, as well as improve my planning skills in order to complete everything on time.
Working individually, I had to make all decisions myself and take full responsibility for them myself. This has helped me become more courageous in choosing tools, methods and ideas.
It was this project that showed me that any doubts or lack of information can be eliminated with the help of qualitative research.
Create Your Own Website With Webador