Jul 4, 2019
UI Case Study | TRIP Music Festival
Overview
Timeframe: 3 Weeks
My Role: Product Designer
Solo Project: Adam
Tools: Sketch, InVision, Principle, Illustrator, Photoshop
Deliverables: Responsive Web design (web and mobile high-fidelity prototypes)
UI Methods: Domain Research, Persona, Design Inception, Mood Boards, Apparel design, Logo design, Display ads, Social media ads, Visual Brand Identity, Typography, Illustrations, Visual Language, Colour theory, Style Tiles, Style Guide, High-Fidelity Prototyping
Introduction
What if your dreams met reality and it was formed into a website?
TRIP music festival is where everybody's dreams come true. In the day time, relax with your favourite exotic drink on the beautiful beach in Bora Bora. If that‘s not enough, the TRIP package includes accommodations in oceanside penthouses, excursions, and gourmet food. All of this in your dream paradise of Bora Bora.
Still not enough?
The vacation mentioned above is just the start of the TRIP package, as soon as nighttime hits at 8:00pm, get ready to rave and party. Your favourite EDM artists will take the stage and DJ all night until the sunrises.
Key Project Goals
1. Build an engaging and impactful brand campaign that promotes your music festival on the genre of music, location and target audience you selected.
2. Create a strong visual brand identity and a responsive website creating engaging, impactful and well designed experience for the users and optimized to meet business goals.
3. Establish a consistent visual identity that carries through different marketing and promotional materials.
4. Create a logo for the campaign that captures the direction, mood, tone and audience you will be capturing.
Research
Persona
I started off the research phase by making a persona. This gave me a better idea of which demographic to target and curate my design decisions towards. I wanted to make sure TRIP addressed all of the pain points that my persona had.
Following creating the persona, I went into more depth with my competitors.
Competitors
I began by looking at the layout of other websites in the all-inclusive music festival industry and what they included. Being the fact that little to no music festival did what TRIP envisioned doing I looked at Envision. This was a music festival in Costa Rica, I looked at their accommodation, ticket packages, and travel which was important to the design of TRIP. Branding was also important to take note of.
After getting an idea of some of the UX of these websites like Envision and Coachella. I looked into getting UI design inspiration from some of these websites.
Inspiration
For inspiration, I really liked how open Coachella was and I also thought the use of the design elements on Atmospheres was appealing. With that, I mixed in a bit of both the open and leaf design elements.
The split screen hero design perfectly fit the overall exciting mood of my website with vacationing the day and raving the night. Adidas did a great job of executing this design so picking parts that I liked, this was inspiration towards my design.
Design Process
The Why
The why was the base to get started on my two design directions and it entails everything I wanted out of my music festival.
First Style Direction | Neon
With the first direction, I wanted to generate excitement with a neon glow theme. I wanted it to be smooth with open space and neon glow designs
I also made a second design direction to give the more clean and open mood.
Second Style Direction | Tropical
Mood: I wanted this style direction and mood to be exciting, playful, and exotic.
Space: Clean and open.
Shape: I wanted the buttons to be rounded which was playful and fun
Movement: I wanted the movement to be slow and smooth as the user navigates through the website.
Colour: To show case the tropical style I went with a gradient light blue to lime green. Turquoise representing the Bora Bora ocean and finally an exotic leaf green.
Style Direction Decision: I decided the Tropical mood was the best fit for the persona I was targeting.
Style Tile
Typeface: I went with Poppins because it was rounded and playful yet clean and modern. The body was Avenir because it is clean, legible, and a modern sans serif that contrasts well with Poppins.
Buttons: I did a lime green to turquoise gradient and rounded it because I found it was fun, clean, and it caught the users attention.
Imagery: I wanted show both sides of the vacation and music festival with the excursions and music festival images.
Logo Process
This mountain is an important and noticeable landmark in Bora Bora and I felt like including it in the logo would be great to catch the users eye and to associate it with Bora Bora upon looking at it.
I started digitizing the logo on Illustrator. I found that the original logo on the left was too plain and the second one on the right was too wide. I also found that the sun looked odd and didn’t align with the brand.
I decided on the name TRIP since it is simple, straight to the point, and easy to remember.
I incorporated the exclamation point instead of the ‘I’ because it’s a sign of excitement. I went with the Skranji typeface for ‘Bora Bora’ to give off a more exotic mood.
Following the logo, I started by creating Low fidelity screens of the prototype.
Prototype Process
LO-FI
I had to educate the user on what TRIP was as well as getting them excited for the event because they are a younger target persona who is ready to party.
I noticed that my competitors had ticket pages as well as lineup pages so I was sure to include that on the UX side.
This led me into my Mid-Fi screens.
MID-FI
After about 3 days of paper prototyping I began digitizing the screens into a Mid-fidelity prototype and I got a rough outline of what I wanted.
Following creating the Mid-Fi screens, I made ad campaign mockups for TRIP.
Ad Campaign
Based on the big idea, I started out by basing my whole campaign around the unique selling point of “Vacation the day. Rave the night”.
Display AD
Visual Brand Identity
I also made wristbands for the music festival for both packages. This was important to the final design.
Prototypes
Desktop
Mobile
Conclusion
Highlights: The highlights of this project was making my dreams become a reality. This was an extremely enjoyable project and I hope to do a project like this again.
Future Considerations TRIP 2.0:
- Add Animations
- Add more copy on the prototype based on logistics
- Extensively explore the colours
