UX UI

Made In Hawaii Festival Website Redesign

The user journey of a kama'aina user interested in becoming a vendor at a large scale festival. The redesigned website features a megamenu to drive users into attending this iconic event.

Role

UX/UI Designer

Objective

Interactive Designs

Software

Figma

Role

UX/UI Designer

Objective

Interactive Designs

Software

Figma

Role

UX/UI Designer

Objective

Interactive Designs

Software

Figma

Role

UX/UI Designer

Objective

Interactive Designs

Software

Figma

Stage 1. User Research

Analyzed the strengths and weakness of the current Made in Hawaii Festival branded website. Applied a user-centric approach to inform the design strategy. Created user personas in the Project Brief to inform content strategy.

Stage 2. Design & Content Strategy

Reorganized the information hierarchy by categorizing content into a user-based navigation system. Identified sub-pages to be feature in the megamenu. Sourced social media for image stills and assets.

Stage 3. Prototype Development

Atomic Design: Applied Brad Frost's Atomic Design concepts to progressively increase the complexity of components including top-bar navigation and micro-interactions.
Wireframing: Created two responsive and interactive low-fidelity wireframes in Figma:
1. Section-based layout
2. Megamenu navigation
High-Fidelity Prototyping: Designed dynamic logo by creating a masked component in Figma. Created collage homepage hero asset with fade-in animation. Designed UI elements in megamenu.

Stage 1. User Research

Stage 2. Design & Content Strategy

Stage 3. Prototype Development

Atomic Design: Applied Brad Frost's Atomic Design concepts to progressively increase the complexity of components including top-bar navigation and micro-interactions.
Wireframing: Created two responsive and interactive low-fidelity wireframes in Figma:
1. Section-based layout
2. Megamenu navigation
High-Fidelity Prototyping: Designed dynamic logo by creating a masked component in Figma. Created collage homepage hero asset with fade-in animation. Designed UI elements in megamenu.

Stage 4. User Feedback & Refinement

Increased level of detail and variety for megamenu content. Applied culturally significant visual elements. Developed kama'aina sub-page to drive engagement.

View Figma Prototype

Next Steps

Build responsive mobile design by utilizing auto-layouts and components.
Design the information architecture in a mobile megamenu.
Expand sub-page designs.

Next Steps

Build responsive mobile design by utilizing auto-layouts and components.
Design the information architecture in a mobile megamenu.
Expand sub-page designs.

Other projects

Energy Vampires PSA

An animated public service announcement inspired by Japanese lore. The main message warns viewers of three types of energy vampires with storytelling and sound effects.

2024 Pele Award Winner

The American Advertising Federatio District 13 awarded Amorphian founder, Julz Calasicas, a Gold Pele Award in publication design for his compositional layouts.