MobileMusic.jpg

AERO SONA

A multi-platform experience of music and entertainment.

Touchpoint Ad II.png
 
 

About The Project

Aero Sona is an interactive multi-platform music channel that provides the ultimate listening and entertainment experience.

The scope of the project is to design the brand and visual interface for Aero Sona, which encompasses four touchpoints for the UI: mobile app, car dashboard, in-flight entertainment system and website.

 

Details

DATE Fall 2017, 8 Weeks
TEAM Individual
TOOLS Sketch, InVision, Origami
FIELD Visual Design, UI / UX Design

 
 
AeroSona.png
 
 

Moodboard

Before approaching any project, I always begin with the inspiration phase that kickstarts my brainstorming process. With Aero Sona, creating moodboards was the first step of my style exploration that ultimately lead to defining the branding of my project. 

 

Style Moodboard

When I went over the project brief, I immediately knew that I wanted to explore a minimal style with a dark yet vibrant palette that would encompass the idea of space and the universe. Most of the images I pulled from various sources consisted of planets, atoms, radars and geometric shapes. I gave myself little room to play around with the color palette in the beginning because I felt like I already knew what I wanted, which I think contributed to one of the challenges that I had dealing with it later down the road. 

 
 
 

Competitor Moodboard

I tried to explore and take inspiration from styles of different channels such as music, movie and in-flight entertainment system. These three moodboards gave me insight on how to approach the design and branding for Aero Sona. I chose Pandora for its style and color theme, Netflix for its interactive touchpoints, and Cathay Pacific for its features and user interface. 

 

Logo Exploration

The first thing that came to mind when I heard of Aero Sona is a rocket spaceship. This initial concept became my driving inspiration when I started to sketch the first 100 logos by hand. I wanted the logo to symbolize my theme of space and have the letter A become a central focus on the logo mark.

After narrowing down from the 100 sketches, I turned the top 10 to a digital sketch and played around with the logo further. However, the more I worked on it, the more complicated it seemed to get in the sense that I added more and more elements that took away from the minimal aesthetic that I was going for. In the end, I opted for an organic, geometric and round sans-serif type and completely ditched my sketches. Using Comfortaa by  Johan Aakerlund, I was able to pursue the minimal yet futuristic logo what I wanted to encapsulate in my brand. 

Logo Sketches.png
 
 
 

Style Tiles

For this project, I aimed to create a futuristic, versatile, playful and adventurous brand feel that will visually represent the application as dynamic and interactive according to the users preferences and personality.

The design takes inspiration from the idea of the universe and space: from the palette chosen to the organic, capsule shapes. These design decisions supports the overall mood, idea and brand feel that has been created around the concept of the project.

 

Early Style Tiles

 

Revised Style Tiles

Final Style Tile

Final Mood Board.png
 
 

Concept Sketches

 
 

Touchpoints

 
 

Mobile App

My original design for the mobile app had a busier interface. A lot of feedback and two iterations later, I arrived at a more simplistic style and removed unnecessary elements that cluttered the screen, such as the borders on the titles.

 

Here are the final UI screens for the Mobile App:

 
 
 
 

Car Dashboard

After I created my UI for the Mobile App, I tried to translate it to the Car Dashboard. I wanted the elements and design to be cohesive so I maintained the capsule look and played around with the icons and the placement of the navigation throughout the iteration phase.

Here are the final UI screens for the Car Dashboard:

 

In-Flight Entertainment System

I based my UI for the In-Flight Entertainment System on the Car Dashboard. The only changes I made were making the Landing Page entirely different and expanding the options on the entertainment section for the user, like adding TV Shows and Games. 

 

Website

Here is a side-by-side comparison of the wireframe and UI screens I created for Aero Sona's website. I wanted the design to mimic the versatility of the previous touchpoints, so I incorporated a kind of wave style here.

 
 
 

Insights

With my background as a visual artist, I thoroughly enjoyed the process of designing the user interface for this project. My learning scope for Aero Sona was experiencing how to design for different touchpoints. I learned that every touchpoint had its own unique aspects and elements that were considered depending on the user’s need. One feature may not necessarily be needed in one, while it may be a valuable in another. In this case, the features of a car dashboard was entirely different from that of the in-flight entertainment.

In a nutshell, I learned to design for purpose and for function based on the user’s needs and interactions. This enlightened me to a new way of seeing things.