Brand & Mobile Design

Melody Ocean Fest

Project Details

Project Title

Melody Ocean Fest

Design Tools

Adobe XD & Photoshop

Catagory

Brand, Mobile, & Interactive Design

Challenge: 
Design & Prototype an iOS iPhone X Mobile companion app for a summer event. 

Solution:
iOS 11 iPhone X/XS Mobile companion app for a summer event. I designed the Brand Identity, Mood Board, Style Guide, Site Map, UI elements, Graphics, Low Fidelity Wireframes, High Fidelity Screen Designs, Interactive Prototype, & Mockup Video in Adobe XD & Photoshop.

 

Style Guide and UI Elements

Brand Identity & Visual Design

The Style Guide showcases the details of the Brand Design. The Color Palette, Typography, and UI elements all fit the theme of the event.

  • I added the brand colors in the color scheme of the map by adding custom code in the map generator plugin.
  • The reusable master components consist of: bars, icons, buttons, and cards. The logo was inspired by the theme (a Music Festival on a Beach).
  • I added a music note icon in the word “Melody”, created a blue gradient in the word “Ocean” which reflects the colors of the sea, designed confetti by creating shapes and placed them under the word “FEST”.
  • The palm tree, confetti pattern, and logo graphics were all designed in Adobe XD and all animate in the final prototype below!
High Fidelity Screen Designs

Wireframe and High Fidelity Screen Designs

UI/UX & Digital Design

The low fidelity wireframe screen designs of a summer weekend music festival event for charity! I named the event “Melody Ocean Fest”! The wireframe screen designs consist of; Welcome, Home, Menu, Directions, Event Details, Activities List, Favorites, Contact, and three individual Activity Details Screens. I created repeat grids and reusable components which increased efficiency during the design process.

The high fidelity screen designs reflect the brand and theme of the project. My objective during the design and prototyping process was to create an app that is eye catching, visually pleasing, and full of animations to interest the user. My intent was to create an excellent User Experience with an easy to use navigation flow!

Interactive Prototype Video

Interactive Design

Overlays, auto animate, tap and time triggers were the interactions used through out the mobile design. This beautifully animated app is filled with fun surprises such as the confetti pouring from top of screen, music note moving in the logo, and ocean wave movement!

A mobile app prototype is a working and interactive model of the end product. It communicates the design and navigation of the app in order to maximize the efficiency of the development process. Prototypes bring ideas to life and transform a creative vision into a reality!

Palm Tree

Graphic Illustration

Gallery

Palm Tree

Graphic Illustration