Wave Case Study

Objective

The objective was to design the UI for an 80s music player mobile app. The app is aimed at 80s music lovers, primarily 35 to 55-year-olds, and it should serve as a tool for the targeted users to listen to their favorite 80s artists, create their own playlists, and connect with others by sharing music.

Role

This project was completed as a part of my UI course. My role was to perform a competitive analysis, create wireframes, mood board, style guide and to design the final app screens.

Tools

Adobe XD
Adobe Photoshop
Adobe Illustrator

Timeline

2 Weeks

About

Wave is an 80s music player app, providing the users with a huge array of artist and songs from the 80s. The app is minimal, simple and user-friendly. With the dark themed design and the few neon accents, it evokes a feeling of 80s nostalgia.

Problem

There are only a few music player apps out there which are focused solely on 80s music. In most cases these apps are lacking in important features, are outdated, and poorly designed.

Solution

Wave is going to provide users with the ability to listen to their favorite 80s artists, create a profile, get personalized music recommendations, make playlists, like, share and hide songs. The simple design, as well as the common design patterns make the app easy to use, catering to the needs of the target audience.

Competitive Analysis

I began by researching both direct and indirect competitors of the app I wanted to create. The goal was to find their strengths and weaknesses, which features would be beneficial for my app, and what could be improved upon.

Wide variety of well organized listening options on the home screen.

Personalized recommendations.

The screens are very crowded with information, which can be overwhelming.

80s music player with variety of 80s hits.

Missing features (Adding songs to playlists, liking songs).

The overall design is outdated.

Wireframes

The analysis of similar apps helped me to better understand my competitors and gave me insight into features I wanted to include in my app. I started sketching some screens to test out the user flow and features, and to get a rough overview on how the application could look like.

Using the low-fidelity wireframes
as a reference, I designed the
mid-fidelity wireframes.

Mood board

I created a mood board to help me visualize the overall vibe I wanted to achieve with this app. Since this is an 80s music app, I wanted it to have a gray vintage look with neon elements, which is reminiscent of an intimate 80s rock bar ambience.

Style Guide

Based on the mood board, I then defined the color palette, with the primary and secondary colors, decided on the typography styles, created icons and UI elements I wanted to include.

final Design

The last step of my design process was to apply all of my visual design choices to the mid-fidelity wireframes, creating the final mobile screens.

Looking back at the design process, I realized that the biggest challenge was achieving the retro look and feel of the app while still keeping it as user-friendly as possible.

One of the roadblocks I encountered was choosing the ideal typeface combination. The goal was to incorporate typefaces that represent the 80s nostalgia, but most of them were not as user-friendly. So instead of pairing retro typefaces together, I settled for a neutral, easy to read typeface (Neue Haas Grotesk) for the majority of the text and a bolder typeface (Beon) for the title text. I wanted the title text to have a neon sign effect, and Beon was the perfect choice for achieving that look.

Adhering to the user-centric approach, I had to rethink my initial design choices and adjust them in order to create an app that would provide the users with a great user experience.

Loading

You made it!

Let's go back in time...