Music Wave- A Beginner’s Case Study
This is my first case study on a project I have fully created through DesignLab’s Design 101 course. This showcases the problem, ideas brought about, design process, final product, and conclusion.
The Problem
To create a mobile music player (at least 3 screens) for either iOS or Android.
Generating Ideas
In order to create a product, you first have to identify and learn about the users that might use it. So, I used some techniques that UX designers use:
POV Statement
- Jim, a daily exerciser, needs to listen to music on his morning run because he desires some entertainment and the BPM of a song helps him focus.
- Andrea, a college student, needs to listen to music because it helps her focus on studying and blocks out unnecessary noise from the cafe.
In order to solve these users’ problems, “How Might We…”
- How might we help Jim access music easily while running and find songs that have certain BPM?
- How might we help Andrea discover songs that aids her studies?
Next, I brainstormed ideas with keywords to generate concepts of the product. With this process, I created a mind map:
Design Process
Demonstrates the steps in creating the final product.
Sketches
Built upon generated ideas, I made sketches of what the product could possibly look like.
Sketching and Vectorizing Logo
I saw a common denominator with popular products’ logos, and they were all simple, clean and uncomplicated. So, my process in designing logos were to be similar in adjectives to those famous logos. Since I was creating a music app, I thought it would be cool to make a simple sound wave, and that already looked like letters “M” and “W” to me.
Style Tile (Rough Draft)
I created 2 provisional style tiles that narrows down what the product would visually look like. These demonstrates my choices of the color palette and typography. I made style tiles that contrast from each other to expand my options and to see the direction my mentor approved.
Photographic Library
I selected at least 10 images that aligned with my project’s brand. These photos demonstrate that the product is inclusive to everyone, useful in any circumstance (studying, working out, events, etc.), and brings people together.
Style Tile (Final Draft)
This style tile brings all the UI elements together, and displays the official color palette, typography, logo, photography library, and icon set.
Finding App Patterns
Before I create the wireframes, I researched app patterns that I wanted to integrate to my design. The orange boxes below briefly explains why I chose these specific app patterns.
Low- Fi Wireframe
My goals for this section was to set up layouts and sections based on a content- first approach. I also explored different ways to display information and layout that benefited the user. My inspirations were Apple Music and Spotify because their apps were simple and easy to use in different aspects.
The Final Product
After many updates with the help of my mentor, this is my final Hi- Fi Wireframe. The goal was to have consistently and a visual hierarchy that made sense. I spent most of my time fixing font sizes and achieving a cleaner look.
Conclusion
By creating this project, I learned a lot about UI Design and how to use programs like Figma and Sketch. I created this from scratch, but I am glad to know that there are pre- made materials. If I were to do anything different, I would like to dive deeper and thoroughly integrate POV statements and “How might we…” into my project. In addition, I want to improve on my visual hierarchy (font size, alignment, etc.) and empathetic skills to efficiently identify and solve user problems. Overall, I am pretty satisfied with the final look of my project.
