Rewind is a music app where you can not only follow your favourite artists and listen to music, but also create playlists and receive a cassete with the songs you choose. The idea is to bring mixtapes back to life, the iconic symbol of music lovers from the 80’s.
For this app it was given to us the UX wireframes of five screens, login, search, now playing, my mixtapes, and mail mixtapes. It was our job as UI designers to come up with a strong reason why users would download this app, what mood the app should convey, the colours, shape, space and movement aspects that should be present in the app, a Style Tile, a Style Guide, and two different high fidelity prototype versions for the app.
This case study will be analyzing the process leading to the final design of the version named as B.
To find a strong appealing why, that is, the main reason people would have to download and use the app, a small research was made. The questions asked were, "would you use this app?", and "why?". Gathering the answers it was easy to identify what should be the main objective of the app — to have fun! To give the tape as a gift to someone, maybe play with their friends curiosity. So our why became "Go back to the past and have fun like the 80's".
The definition of colour, shape, space, and movement followed a retro, fun, and playful mood, inspired in the 80’s. So for the colours, a very easy decision, the three primary colours of the 80’s, pink, yellow, and light blue. The shapes should contrast between rounded and sharped, all that contributing for a busy and vibrant space. Movement whenever necessary should always be fast and precise. To illustrate those decisions a mood board was created.
Going deeper on the design decisions, but having what was built so far as a base for it, the Style Tile was created. The Style Tile was very helpful as it gives a clear idea of how all the chosen elements would look together before even starting to build the app. It is a very important piece when presenting any work to a client.
It was also at this phase of the creative process that some design decisions were made, such as logo, typefaces, image treatment, and some basic iconography. Parkway Hotel was the typeface chosen for the main headlines, and it was also the one chosen for building the app logo. As the shapes were defined the phase before, Parkway Hotel is sharped but at the same time it has rounded edges. It also gives the impression of speed by being slightly inclined, conveying the fast movement determined on the design inception. To pair with Parkway Hotel, in the subtitles and text Avenir was chosen. Avenir Book for the Headlines 2 and Avenir Light for the texts. That decision was made based on the principle of contrast, by determining typefaces from two different styles, Decorative (or Display), and San-serif. Avenir has rounded shapes, and simple, thin strokes. It is perfect for this composition once it has a light feel, and does not fight with the vibrant colours of the pages.
While the Style Tile had a presentation intent, the Style Guide was built to be an internal document, it contains all the important information about the design decisions of this particular app such as typefaces, colours, buttons, UI elements, and any other important specification. To have a Style Guide to use as a base designing the app screens was extremely helpful. To fit every piece in the screens with all the colours, typefaces, buttons, forms, and symbols ready, made the work faster and easier. Also it was much easier to keep track of the pages consistency.
Taking everything that was built so far in consideration, and aiming to put together an app that reflects all that, five high fidelity prototypes were created. As it can be seen below, the screens follow meticulously all the aspects previously researched and decided.
The real prototype can be accessed on my Behance account through this link.