playse
Overview
Project Type: Responsive Web Design / Progressive Web App | UX/UI Design
Roles: UX/UI Designer, Web Designer/Developer
Tools: Figma, ChatGPT, Audacity, Github Pages, Cloudflare, Visual Studio Code
Summary: Website and PWA designed to provide effortless listening and new
music discovery.
The Problem Space
Are you bored of your music library? Do you struggle to think of something that you want to listen to? Do you feel like your streaming service always plays the same few songs and gives repetitive or unappealing “new” music suggestions? You’re not alone. These are frustrations I’ve felt on a personal level, and have heard over and over from friends and family.
How Might I?
I love music. It makes up a big part of who I am. Throughout the day I’m listening to music whenever I can, and really enjoy discovering new music through both mainstream, and more obscure outlets. I like to think that I have a pretty good taste in music across a broad horizon of genres and moods. When I’m spending time with friends or family, people often turn to me to put on music.
That said, I felt like I had the ability to answer the question of; How might I help listeners access new content in order to foster music discovery and enjoyment?
The Process
User Stories
Thinking about my HMI statement and the problem space in general, I came up with a number of user stories. Out of the user stories that I generated, 3 key themes emerged;
1. Not having to think about what to play
2. Variation in genre and style of songs
3. The ability to add new music into listener's library
These themes helped to guide the creation of my task flow and design solution.
Task Flow
At this point I knew what I wanted my design solution to be; an ultra-simple, radio-style music player containing a wide array of curated music.
Inspiration
With my task flow established I had a pretty solid idea of how my app would function and look. For my design solution, I took a lot of inspiration from various internet radio stations and music streaming services
Key Elements
- Basic UI and functionality - focus is on listening to music, not interacting with the platform.
- Make the music played on the app accessible and easy for users to add it to their own library.
- Clean, neutral, minimalistic colours and typography to reflect the functionality and intention of the product.
Visual Identity
Colour
I chose a neutral blueish-grey gradient for the background of the app to fit with the minimal, clean aesthetic I was aiming for while also providing something slightly more stylized than a solid black and white interface.
Using white and complementary shades of grey for the UI elements kept the design clean and accessible.
Typography
Keeping on theme with minimalism, I chose the Diatype Mono typeface for my design. I found that this particular mono typeface provides a very subtle bit of style to the characters that makes the design feel less basic and analog looking.
App Name and Icon
To once again reflect the simple functionality of my app, I named it playse - a combination of the words play and pause.
Using a simple play icon as the app icon and favicon for the web page further communicates playse’s functionality visually.
Feedback and Revisions
After building out the initial screens in Figma and sharing them friends, I got a couple pieces of design feedback.
Change Logo Typeface
- Initially I used the Chillax typeface for my logo/wordmark. A common suggestion was to change it to the same mono typeface as the rest of the UI for consistency as the more playful style of Chillax didn’t match or really make sense for the apps theme.