UI Case Study
Stream 80s
1980s Music Player App.
CareerFoundry Student Project 1.
September - October, 2023 | Jess Cope
Objective
The objective for the project was to design the UI for an 80s music player mobile app. For primarily 35 to 55 year olds.
The app had to have at least 3 functionalities, including:
Create a profile
Search for new artists
Make a playlist
I also implemented additional features that allowed the user to browse different music genres, mark their favourite tracks for later and view recommend content from their bespoke home page.
Competitor Research
Before doing anything else, I needed to analyse what other music player apps were already on the market.
I annotated the design and functionality of some competitor apps, to get an idea of the direction the my app should take by finding UI patterns that the user may already associate with music players they have used before. This helps the user feel familiar with the apps functionally from the moment they first open it.
Low-Fidelity Wireframes
Roughly sketching out my ideas on paper, before moving to a digital space, allowed me to explore multiple ideas, find functionality solutions, define a screen’s structure and quickly evolve my designs, without worrying about being pixel perfect.
Mid-Fidelity Wireframes
Creating these wireframes helped me to establish the grid system for my app, as well as achieve consistency and perfect alignment across every screen.
User Flow
UI Elements & Hierarchy
Every element of each screen should have a clear reason / function for being there. Therefore I took time to analyse and annotate each page with my reasoning, before presenting my reasons to my course tutor.
Mood board
Once I had my content layout sorted, I needed to find inspiration for the look and feel of the app.
As the target audience is primarily for 35 to 55 year olds, I took into account that 1980s music would have been a distinct part of their younger years, and, therefore, this app should evoke the feelings of nostalgia.
The assets opposite were curated with the intention to evoke these emotions :
Nostalgic
Playful
Cool
Icon set
In order for the icons to give off the emotions established in the mood board, I gave them rounded corners and line ends, with gaps in the strokes, so that they appeared playful, fun and reminiscent of neon light signs (depicted with the gaps in the icons strokes) that were popular in the 80s.
The icons have clear intent and function. With some of them being very visually similar to icons that would have appeared on physical music players and boomboxes, such as the play and pause icons, which the primary user would be familiar with.
Following IOS design conventions, the icons default states are outlined and have a solid colour fill when active.
Colour
I found this stage of the project the most challenging. It was hard to balance achieving a cool and retro aesthetic with accessibility and legibility.
I created two colour palettes, with colour palette 2 ultimately being selected, as 4 out of the 6 people I asked for feedback preferred number 2. It also performed better in the colour blindness test, as the monochromic shades of colour palette 1 lost their contrast. I was also told that colour palette one gave off more of a 1990s look than 1980s.
Typography
I chose the san-serif typeface “Play” as it has a retro, tech look, that I hoped would promote a feeling of nostalgia for the user.
However I didn’t think this typeface was suitable for the apps body text, as it became a little harder to read at a smaller size. So I paired it with Roboto, which is also a san-serif with a similar look and feel but higher legibility.
I created hierarchy using weight and size.
Design System
In order to keep consistency across screens, and ensure the file is ready for handoff to developers, I created an atomic design system.
Elements were broken down into a hierarchy, stemming from a chemistry concept, of atoms > organisms > molecules. Then Figma components were made so that atoms, such as icons, could be swapped out and replaced within molecules.
Having an inventory of all the components needed for Stream80s was like having building block I could click into place.
Final UI
I had to be mindful of how all these elements would look when place together.
As having a clear and effective visual hierarchy was integral for the user to complete their goals on the app.
Reflecting on the Project
-
Here are the things that I learnt and stuck with me most at each stage of the project:
Researching - Look for common UI patterns across a range of competitor apps, so that
users already feel familiar with using the app.
Wireframing - I learnt that mid-fidelity wireframes should already have consistent spacing of elements and be aligned on a grid system and that this doesn't get left until the final designs.
Mood board - Evoking emotion is a big part of the interface and that I can achieve this
through multiple elements of the app like colour, type, texture etc.
Icon creation - There are certain design conventions for IOS or Android that should be met, to avoid confusing the user.
Colour palette creation - My mentor helped me understand that colour schemes don’t have to strongly sit within the colour theory wheel schemes like monochromatic, analogous, complementary etc. And that ultimately it’s the way the palette looks on the final screens, accessibility and user feedback that matters.
Typography - My tutor helped me understand that the naming of the text styles should be detailed enough for the developer to easily understand and implement.
-
The colour stage was the most challenging for me. I struggled to balance a cool and retro aesthetic with readability, and my original goal of using a light mode palette, to avoid too much similarity with competitors, was soon amended in favour of a dark mode palette to reflect the feedback of people who fit in the primary target audience. It was challenging to get the balance of contrast right so that the colours were accessible to users with colour blindness. But the palette I chose allowed the CTA colour to stand out across all screens, no matter the type of colour blindness, so the users could still easily complete their goals.
-
I would design a screen that allows the user to view the album art, pause, play, skip track and shuffle, as this is a big part of music player apps and it feels like it’s a key part of functionality that is missing from my final screens.
Thank You for Reading. Let's Connect!
Drop me a message with some details about who you are and what I can do for you, and I'll get back to you soon.