Case Study : Rewind App
Task
- Create an engaging, impactful and well-designed UI & UX Library
- Research and information of the specific application and target audience
Tools
- Sketch, Photoshop CC, Illustration CC, Invision
Design process
After given our app and its wireframes, my teammate Ben and I started to research one by one.
1. Interviews & Affinity board
First off, we interviewed our potential users, female students who are at the age of 15–25, and asked them a series of questions about their past, current and ideal experiences as well as feelings towards music, mix tapes and gifts in general. We found out that people felt more connected through the exchange of a mixtape and music, and receiving a mixtape as a gift was really appreciated as it showed a lot of thoughts and time went into it.
We thought this App, Rewind, was enticing enough for people to use since it allows them to not only choose songs, but also decorate an album cover for their mix, and ship the mixtape to wherever they want.
So, we specifically wanted to know the customization aspect of our app, and we noticed that the interviewees were very positive about the idea of creating and decorating the album cover by themselves. We also asked what types of customization features they would enjoy.
After interviews, we organized and categorized our interview questions and answers so that we can grasp the information from our research efficiently.
2. Design inception sheet & Mood board
Based on our interviews, we started to create a design inception sheet and a mood board individually. Interestingly enough(and fortunately!), our art directions were distinctively different.
So what I wanted to focus on the most about this app was that because users have customization options unlike other music apps, I tried to show its fun, festive and creative mood with a cute, lovely design which I think girls would enjoy. Also our potential users wanted an easy-to-use interface, I tried to keep it simple and neat by using minimal shapes.
3. Colors & Logo
Those are the colors that I used. I tried to think of the colors that match well with all my previous research results. I was not hesitant to choose those colors because they are actually my favorite colors too!
And the logo! This is honestly what I am satisfied with this project the most. I was inspired by the concept that it is a mix tape for a gift. The whole logo looks like a gift box with a ribbon, but the face-like shape is actually a mix tape. It also looks like a toy with a wind-up on its head. I wanted to show not only the fun and cute mood of the app, but also the direct image for a gift and a mixtape through this logo. I think it conveys my intention well.
4. Style tile & guide
After all, the style tile and style guide were created!
I chose the ‘Autour One’ font, for its rounded and lovely shape especially for R and W. It matched very well when I applied the font on the logo due to the distinctive look, which shows both vintage and modern feelings. And when applied to the whole app, it looked great as well matching with the whole mood, so I decided to use the font as a header. However, I still wanted to put a legible and neat-looking sans-serif font for relatively long words such as song titles, I chose ‘Avenir’ as a sub.
Icons and buttons have rounded shapes to match with other elements, and are so simple enough to use that no one would have difficulty in using the app, as I wanted to make it easy and simple in general.
5. Hi-fi prototype
So, this hi-fidelity prototype was finally created. And things I want to add additional comments are :
- The wavy line over the logo on the first page is to create a festive mood, and I did not use lots of icons in general because the colors are playing their roles really well just by themselves already.
- While users are listening to a song after downloading it from the app, they can add the song to their mixtape and can create their own cover and title. I chose a label-shaped icon for the cover title because it would remind users of a good memories and would give more of a hand-made feeling.
- Since I found out that users would enjoy the decorating section so much, I put a lot of options for decorations— photo upload, selection/move tool, paint, pencil, eraser, stickers, emojis, type, filters, color wheel— to let users decorate their own cover as they want. When they’re done, they can just add it to the cart so that they can buy it with their mix tape.
6. Self-assessment
The whole process, including research, design and presentation, was quite successful. I felt I could’ve done better if I had had more time, but for now I’m happy that I have learned and improved so much. From this project I learned how to cooperate with my teammate, how to use Sketch, how to convey my design rationale and how to build my presentation skills. Also I enjoyed working with my teammate, Ben, and thank him for being so supportive and helpful.