Disney

Through an integrated campaign titled the Tree of Dreams Program, Disney will re-inspire young adults in the EMEA by reminding them of how powerful dreams can be.

view solution
CONTEXT
D&AD New Blood Awards 2021
DATE
Jan - Mar 2021
TOOLS
Figma, Adobe Photoshop, Adobe Illustrator, Adobe After Effects, Adobe Dimension
Team
Angel Song
Chrissy Boals
role
Strategist, Art Director, UX/UI Designer, Motion Designer
skills
Strategy, Experiential Design, Motion Design, Web Design, 3D Modeling
background

Disney celebrates its 100th anniversary in 2023.

No child can deny the impact Disney has had on their lives. Disney played a major role in shaping the way we view the world. As we watched our heroes and heroines achieve their dreams on the big screen, we believed the same fate was possible for us. Within each Disney fan is a dreamer waiting to be awakened. Disney instilled a universal language in us — the confidence and courage to believe and dream.

challenge

As we grow into adults, "dreaming big" becomes a privilege, and the magic of Disney is lost to us.

opportunity

Remind young adults of the power of dreams.

core campaign line

Where dreams grow.

Disney's Tree of Dreams

Our dreams give us power — power to overcome our fears and take a leap of faith. Dreams must be planted and grown if we want to see them bloom. After our dreams have bloomed, we can share the seeds of success with our friends and family, encouraging and inspiring them to chase their own dreams. Dreams create seeds of new dreams to be shared for years to come.

part one

Official Microsite

Elevated brand principles and color naming based off of Here's magazines city guides

jump to section

part two

Dream Locket

Eliminating nested pages, creating four nav tabs: Shop, Personalize, Discover, and Get Inspired

jump to section

part three

Park Experience

Interactive lookbook exploring new color-ways with links to matching Here city guides

jump to section

Welcome to the Tree of Dreams Program

The Tree of Dreams program will be introduced and promoted through an official microsite. The microsite is broken out into sections, including a program overview, details on global give-back, live park experiences, and an opportunity to purchase limited-edition Tree of Dreams merchandise available only during the 100th year anniversary.

Make a set...should be simple, right?

AWAY's current navigation flow operates via two main channels, Shop and Explore. In my first user test, I asked individuals to try to "Make a Set", an existing feature of the site called "Travel Uniform". It took users over three minutes to find the right page.

view user flow

Redesigning the Menu Nav

I redesigned the menu bar to feature four channels - Shop, Personalize, Discover, and Get Inspired. With this architecture, I sought to eliminate the number of clicks needed to get to crucial product and service pages, specifically the "Travel Uniform" service that allows shoppers to create combo luggage sets.

Dreamscapes

The Color Passport is an interactive lookbook designed to highlight AWAY's color palette and the cities that inspired it. Each color page contains an image of the location, short summary, link to the Here Magazine guide, as well as an option to shop the color in one of AWAY's four main sizes.

visualize

Color Match

Each page showcases the main color swatch, the product image, and a matching city image. This visual is designed to convey the character and personality of the city, visually explain how the color was inspired by the city landmarks.

learn

City Description

Each Color Passport page features a short summary blurb that is derived from the larger Here Magazine guide and highlights two to three main city attractions. Each summary ends with a link to read the full article on Here Magazine’s main webpage.

buy

Click to Shop

If a user is interested in a particular color, they can hover over one of the suitcase icons below the city description to shop in their desired size -- Carry-On, Bigger Carry-On, Medium, or Large. Once at the product page, they can return back to the Color Passport if they wish to do so.

On the road again

I animated my suitcase icons so the handles popped up and wheels appeared when a user hovered over them. I wanted to convey the feeling a traveler has when about to embark on a journey and the excitement that comes when you click your luggage handle up! I added a tooltip beneath each icon to make the feature more accessible.

target
Young adults, ages 18-35
regions
Europe, Middle East, Africa
Interests
Disney, Marvel, Fox

Image source: AWAY
key points

Luxury made affordable

While luxury travel consumers tend to be older and with higher incomes, younger generations are increasingly becoming the trendsetters in wanderlust and seek affordable options that still look sleek. AWAY's average luggage prices for roughly $200 per unit. That's a steal compared to $1K+ for a competitor item from Tumi or Rimowa. Yet, compared to other mid-priced competitors like Samsonite or Delsey, AWAY presents an alluring image of exuberance, refinement, and luxury.

Designing for exploration

Here Magazine creates custom city guides for famous locations such as Jaipur, Ubud, Madrid, and more. Every city has its own flavor and flair that presents itself through architecture, color, and pattern. AWAY represents the functional aspects of travel while Here Magazine provides the entry way into exploring the lifestyle aspects of travel such as adventure and aspiration.

Competitive market research and brand audits
I mapped out AWAY's position against some of its closest competitors in terms of price and brand positioning. Because I was very interested in fixing the flow of the shopping navigation, I also conducted individual audits of Tumi and Rimowa's websites to see if there were similarities or things to be improved in their flows.
Moodboards
To gather inspiration for my design system and my new features, I built moodboards featuring photography, typefaces, and illustrations. Two of my biggest inspirations were Unsplash travel photography and vintage travel magazines.
User Journey
I created a simple user journey for our target user that incorporated touchpoints for both AWAY and Here Magazine. There were other touchpoints and journeys that I considered but ultimately left out due to time limits on the project, but I left them for consideration in the future (e.g. adding better presence for Here Magazine guide links on the product page itself). The original project prompt asked us to choose a specific medium and design our feature for that, so I chose to design for desktop.
Wireframes
I sketched basic outlines for how I wanted my features to work. I used wireframes to layout the initial infrastructure of my prototypes in Figma and added more advanced animations in Principle.
Iterative prototypes
When AWAY introduced their redesign in Winter 2020, I was excited because their new aesthetic matched what I had designed in Fall 2019. However, this meant that I had a new challenge to tackle — how to ensure my prototypes stood up to this new redesign. While AWAY's redesign showed an aesthetic change, there was little change in general user experience and no solution to the pain points I had discovered earlier. So, for my second redesign, I kept the new aesthetic and adjusted my features to reside within the new infrastructure.

Sometimes the smallest things make the biggest impact.

This was my first UX/UI project at Brandcenter, and it was quite terrifying at first. I made a lot of mistakes early on, but I kept improving. Doing the project again a second time felt exhilarating, knowing now that I had the confidence in knowing I had done it before. If I had more time to dedicate to this project, I would love to consider building the feature out for mobile and also invite more user feedback to keep improving the navigation flows.

Google Creative Campus
view project
Cisco Webex
view project
3.1 Phillip Lim
view project
OverviewSolutionStrategyProcessReflection