Mobile App UI Library
I have been assigned to develop a Mobile App UI Library for a music app named Rewind.
Working in a team of three we needed to deliver three different art directions and then find out the best solution to finalise for this type of product with a deadline of one week.
Tools:
Photoshop, Illustrator, Sketch, InVision
Deliverables
A number of deliverables where included in this project, here’s a quick breakdown:
- Design Inception;
- Moodboard;
- Style Tile and Style Guide;
- UI Library;
- High-fidelity Wireframes.
The core of the project was to give the user the opportunity to share playlist, build their own mixtape and transform them into old school cassette audio formats. After that, the user can even send them to their friends in a beautifully packaged box together with a walkman as part of the gift.
Concept
Focusing on our target audience and their needs we had to create a mobile app that incorporates that vintage and retro feeling but readapted in modern culture.
The main content of the app should focus on the social side of Rewind and integrate with creative musical elements.
As a team, we started from the same why, given by the goal of the app, and then developed similar Moodboard to influence our final design.
Analysing the singular mood boards we found common keywords such as vintage, social, passionate, feminine and trendy.
Discussing together we came up with the three different artboards we wanted to develop to convey the same feeling but in different ways.
The first artboard was focusing more on retro elements combined with geometrical shapes and neon, while the other one combined the neon with bold images and gradients.
I opted for a more subtle version with circular elements and rounded shapes together with a colour palette of pastel colours giving relevancy to pink as a predominant colour: that well contrast with a light blue and contribute to the overall sense of vintage.
The movement is fluid and circular while the space is clean and modern.
The result is exemplified in my final Moodboard, a combination of vintage and minimal elements offering that carefree styles of 90’s which play with rebellion.
Style tile and Style Guide
As I moved forward on the project I needed to translate this general mood in graphic elements that would help me visualising the final app.
For font pairing I choose Fenway park for headlines, for his corsive and feminine shape, that well contrast with the simple lines of Quasimoda, a sans serif font easy to read and perfect for descriptive text.
For this project, although we’ve been provided with basic wireframes, we create additional ones to emphasise the social side of the app.
They also helped us deciding the final art direction to apply for the hi-fi prototypes
During this phase we reviewed all our material together and rethink how to realise the prototype at his best, we couldn’t postpone a final decision at this point.
Final proposal
We opted for the art direction with modern elements and gradients combined with vintage elements and improvements from the other art directions: this solution would appeal the youngest of our target audience without neglecting the older one.
We couldn’t forget our final device either: being our project for iPhone 8 only we needed to follow iOS guidelines formatting the nav bar and player elements to be consistent in all the structure of our app.
Design Iterations
I would like to analyse one specific wireframe that went through different design iterations before reaching the final prototype.
I’m talking about the now play wireframe, core experience for the user to enjoy the app at his fullest.
We wanted to include that vintage feeling inside our app without removing the cleanliness and modern elements. Starting from a simple structure we tested different colours, such in the play buttons, and hierarchy structure testing different elements and text size.
We then decided to mix vynil and rounded images of cover of songs. This combination worked but was subject to the image of the cover and didn’t match the squareness of the rest of the app. That’s why we opted for combining this two elements to reach a perfect balance of modern and vintage with squared and rounded elements.
As we are reaching the conclusion of our project we have an app that evolved from is first shape in a more complete version: the colours are light yet bold and the social side is present in the explore section and mail a mixtape.
Old and new elements work together to create that travel in the past that is Rewind.
You can see the final prototype of Rewind at this link.
Conclusions
This project presented a series of challenges from time management to problem solving. This experience improved my organisation abilities and I really enjoyed collaborating with different partners to exchange visions regarding design of old and new trends.
