Rewind Mobile App — UI case study

Project Scope | Create an app that allowed you to experience both old school and new school music with “REWIND

6 min readOct 25, 2018

--

Timeline | 10 days

Project goals| Create an engaging, impactful and well-designed app from low to high fidelity. The main features of this app are: searches and play any song, artist or album for free. Create and share playlists with the world on your mobile device.

Best of all| Build your own mix tape and transform them into old school cassette audio formats.

Target Market | 15– 25-year-old female. Student. Fun and energetic who loves music likes to laugh and is creative.

Audience goals| Build their own playlist and transform them into old school cassette audio formats. Also able to listen to music on the app and share playlist with others.

Target Devices | iOS device

The Research

After reading the complete Brief for this project, I first decided to focus on the list of keywords that were given to us. This was a good point to start the research process and allowed me to find which direction I wanted to go with my project.

Key Words | music, vintage, 80s - 90s, mix tapes, walkman, fun, hipster, power ballads

After researching about those keywords, I had a better idea of the direction and the style I wanted the app to reflect. Since our target market was based on a ten year age difference, the app had to appeal to 15 years old girls and 25 year old woman. I used vintage and modern vibes to design something fun, energetic and colourful. This was a good solution to interest the target market.

The Process

After learning and collecting information, the next step was to create an inception sheet. This process helped to find a direction with my project.

This app will be a good way for people to capture a moment of their life into music and create memories with it. Back in the days, people used to spend hours and days to create the perfect playlist for someone or for a special event like a road trip or vacations. It was such a nostalgic and great feeling to listen to it after a couple months or years. The main goal for this app will be to give the new generation or old generation the opportunity to create their own mixtape and start a cassette library of their memories with music.

In one sentence this app will be for: People who want to capture a moment of their life with music.

Visual languages

The mood

I wanted the app to give a fun, young, dynamic and energetic feeling to the users while they are using the app. The feeling can be inspired by a vintage aspect with the colours and shapes that I will be using. I also want this app to keep a modern aspect and this will be more relevant with the illustration direction that I went for. I got inspired by the 60s psychedelic colours, patterns and hippie art that was related to music at that time. For example: Some of Jimi Hendrix vinyl album cover or one of the Beatles album cover(yellow submarine).

60s Inspiration (vintage)

Today Inspiration (modern)

After looking for inspiration and images that could reflect what I had in mind, I created this final mood board.

Colour palette — Electric Feel

It is now time to start designing some elements of the design and create a style tile and style guide. This will help me to have a better overall visual context of how the app is going to look like.

Logo Design

My idea behind that logo was that I wanted to illustrated the rewind function (meaning) into it. I started thinking and looking at the existent symbol for rewind. The first impression I got from it was pretty rigid, bold & masculine. The complete opposite of what this app purpose is all about. Femininity, fluidity and simplicity. This is how I came with this idea of the outline of a heart shape (femininity & fluidity) who is moving backward. (represent by a white arrow going in the opposite direction of the clock time)

Wireframes

Those were the wire frames given to us.

Sketches

With keeping those previous wire frames in mind, I started my first sketches. I always begin by sketching on paper before jumping on the computer. This come more naturally for me.

PAPER SKETCHES — I usually start by writing any words that come into mind. My next step will be to transform those words into images .
PAPER SKETCHES — The cat in my illustration was inspired by my own cat Winter. He is always beside me when Im working and sleeping on my paper works!

After paper sketches I usually transfer my ideas into my drawing tablet. ( I use the Ipad Pro and the Illustrator CC app version from Apple.)

Once the drawing is complete on the tablet it is easy to play with the colours and try different variations.

Colour Testing 01
Colour Testing 02

After testing out different colours combination , I choose this colour palette. Electric and vibrant colours with a touch of femininity .

Final prototype

For the overall look of the app, I wanted to keep as minimal as possible to create balance and contrast between the vibrant and energetic vibe present in the illustration. Simplicity, energetic and colourful are all components that will make this app attractive and enjoyable for the users.

Click on the link bellow to see and navigate through the app prototype. INVISION LINK

Conclusion

--

--

Hello, I’m Joanie! Visual Designer & Artist With a focus on user interface design, user experience and illustration. https://joaniedesign.art/