GigAlert Mobile App — Designing a UI library
The biggest music community in the world
Summary
Ranul and I have to work in teams and design a UI library for GigAlert, an app that finds for you music events depending on your mood, playlist, and location. Sharing the same brief, we have to follow differently creative paths for designing the app.
Starting from the bottom
Our brief target was a bit generic and focus on young people from 19 to 30 and it doesn’t matter if they were workers or students, male or female. As a sample of the main features, GigAlert notifies about concerts based on your location, genre preferences, playlist, and favorite artist and mood, invite and create concert and event groups or keep all the tickets in one place.
On my way to design
Having the brief, we started with brainstorming and we were talking about how we feel with concerts and music events, what we want to transmit and the kind of elements should have GigAlert.
Then, we took different ways and think separately. I started for the mood board but I was crazy collecting images and try to find a concrete style for GigAlert. First, I collected 180 images but at the end, I reduced the quantity and being more specific.
While I was collecting the images for my mood board, I wanted to be very accurate with regards to the app style because I want to catch the essence of music events focus on millennials target. Then, I realized that I collected too many photos: almost 180! So, I decided to delete some generic images. Finally, my mood board was inspired on concerts and festivals vibes, collecting not only pictures from the stage and locations but also from music and festivals posters which had vibrant colors, sans serif typeface and modern and geometric shapes.
When I finished my mood board, I went for the inception sheet which was crystal clear.
With regards to visual language, its space is clean and balanced which is very important when you are playing with bright colors. The color is shiny, strong, vibrant and colorful as well as my mood board. The movement is inspired by music, fluid, following the rhythm of the music, natural, waving and regular. The shape is geometric, linear, minimal and regular like the posters of my mood board.
When I was thinking about the mood, I was thinking of the target. The mood is friendly, easy-going, enjoyable, millennial, festival, happy or confident. Finally, the reason why was to contribute with the music to create a close-knit community of millennials that want to enjoy musical events depending on the mood, location, and playlist.
Having all these items clear, I designed my style tile and style guide.
For the style tile, I defined the logo which was based on the vibrations of the music that flows as well as the mood which varies. The color palette was influenced by the posters from my mood board. For the content style, I wanted to highlight the most important text using the colors from the color palette. Other content style items are bands and images of artist and groups using geometry. I designed three kinds of buttons, one for proper buttons such as sign-in of the kind of music, other for drop lists and the last one for mood based on the vibrations of the music or the mood in that case. Patterns were very important to get the essence of festivals and concerts and I bet for regular shapes, playing with rectangles, rotation, and repetition of the same shapes.
I designed a very simple style guide. First of all, how to implement the logo on the designs is very important to keep the essence of the brand. For this reason, there are some don’ts such as don’t rotate the logo or separate the name into two parts. The typeface is Nexa, a very modern and simple sans-serif, and its fonts are bold and light. The pictures of the bands and artist are official images that were taken for their tours. For the profile image, it has the logo shape with some straight stripes colored depending on the mood you have. The profile photo of the band or artist has this modern and geometric style proper of festival posters.
The Design
For the logo, the most representative thing in music is vibrations because define the music flow and rhythm. So, this was my concept logo. Also, I tried to play dimensions and with the name of the app and integrate the logo with it but it doesn’t convince me.
Finally, my final logo was simple but modern and in 2D to give depth and making it more appealing.
For the first screen, my pattern was crystal clear with regular and geometric shapes, color with the main colors of the design guide and playing with perspective.
For the second screen, I tried a different pattern with circles and triangles but the content was hard to read. However, the real challenge was how to design the banner of the concerts and events following the style of my mood board.
The third screen was really hard for me because of the background pattern. I designed the pattern 5 times but because of the information, everything was hard to read too. Finally, I implement some band to make it easily readable. I used black lines to separate each section.
After this effort, the fourth screen was really simple with the same style of patterns that I designed previously.
In the end, my final design was the following one:
Tools
Sketch | Invision | Photoshop | Illustrator | Medium
