AWAY

How do we inject new energy into an already thriving brand?

Event:

Date:

Timeline:

Role:

Skills:

Tools:

Student project (Solo)

September 2019, December 2019

8 weeks

UX/UI Designer, Motion Designer

Design Systems, User Research, UX/UI, Prototyping, Animation

Adobe Photoshop, Adobe Illustrator, Sketch, Figma, Principle

I reimagined AWAY's design system, updated their navigation menu, and created a new discover-and-shop feature called "The Color Passport".

 

The Challenge

Build a fresh, new design system for the brand, improve one existing flow, and create a new feature.

The Opportunity

At its core, AWAY is a travel brand that offers premium products for the seasoned traveler. They've capitalized on this identity with the expansion of their sister company, Here Magazine, but currently, the two brands have separate personalities. What if there was a way to combine the power of the two to create a more cohesive and enjoyable experience for the consumer?

The Solution

Create a design system that can be used for both AWAY and Here Magazine and emphasizes the aspect of travel and exploration. Implement a more intuitive dropdown menu in the navigation bar to make it easier to find information for main products and cross-links to Here Magazine. Introduce a new creative content piece that showcases the inspiration behind AWAY's color palette based off of Here Magazine's curated travel guides.

Additional context: This project was completed in Fall 2019. AWAY redid their design system and web interface in late winter/early Spring 2020. Elements of this project have been revised to fit within AWAY's current design system.

DESIGN SYSTEM

 

Brand Principles

As I began my process for my redesign, I created four brand principles that became the foundation for my design system and feature sets.

Evoking life through type, color, and shape

For typography, I applied light changes to AWAY’s existing typefaces, specifically choosing ModernoFB as my primary serif font to add a little bit more personality to my design system. I also chose Roboto Mono as my mono font for additional headings and Avenir as my primary sans serif font for heading, subhead and body.

As it exists today, AWAY's color palette is very basic. The primary colorways are
Black, Navy, Green, Asphalt, Coast, White, Sand, Blush, and Brick. After establishing my brand principles, I decided to revise AWAY's color palette to have more flair and be more aspirational. Because one of my main priorities was to create tighter integration between AWAY and Here Magazine, I decided to take the city names from Here Magazine's city guides and apply them to my colorways. My main nine colors are Jaipur, Lisbon, Shanghai, Monaco, Cape Town, Madrid, Mexico City, Ubud, and Dublin. This initial decision heavily influenced my idea to build a feature around my color palette.

IMPROVED NAVIGATION FLOW

 

A new and improved navigation menu

Improving information hierarchy to make shopping simple


AWAY's current navigation flow operates via two main channels, Shop and Explore. After conducting a series of user tests and research, 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.

Shop

Shop by product category or collection


As of today, AWAY's navigation for shopping consists of a dropdown menu that takes you to another page featuring their full product list. All in all, to get to the individual luggage-style you'd want would take 4 clicks. In my redesign, I eliminated the second layer (group product page) and brought it into the navigation menu, bringing it down to 2 clicks. I also brought over the Collections from the Explore menu of the original menu, so it's easier for shoppers to shop collections directly from the Shop menu. Shoppers can hover over a product name before clicking to see a preview of the luggage in the right-hand section.

Personalize

Shop accessories, make it a set, and add finishing touches

Personalization was one of the first flows I tested for usability on AWAY's existing site. As it exists today, the term for personalization is listed as "Travel Uniform", which is AWAY's version of making a set (e.g. a carry-on luggage + duffle bag). During user testing, my users had a hard time understanding what "Travel Uniform" meant. As a result, I changed the vernacular to be more straight forward — "Make it a Set". In the Personalization menu, I also brought over several features including monogramming and accessories. I removed accessories from the original Shop menu since it was a secondary purchase compared to AWAY's other products. Like the Shop menu, shoppers can hover over a product name before clicking to see a preview of the item. I also included a new shopping criteria based on travel length so shoppers can shop based on how long their trip will be (e.g. weekend trip to 2 weeks).

Discover

Find our store locations, read our guides

The Discover Menu features AWAY's physical store locations, Here Magazine's suggested travel guides, AWAY's about story, and a link to read Here Magazine. I moved the "Our Stores" tab from the right-hand side of AWAY's existing navigation bar into this Menu, and included any other additional products and services AWAY offered, like Here Magazine. Because one of my main focus areas was to find a better way to promote Here Magazine within AWAY's existing infrastructure, the Discover tab seemed like a terrific way to promote their travel guides alongside AWAY's physical stores. Similar to the Shop and Personalize tabs, shoppers can hover over a location to see a preview image of that location.

Get Inspired

Connect with the community, connect with the world

The Get Inspired menu is home to the "Color Passport" as well as AWAY's social media integrations and hashtag promotions. This menu is designed to be a place for community inspiration and guidance if users get stuck during their shopping process. The Color Passport is an interactive shopping experience that showcases the inspiration behind AWAY’s product color palette. This menu also features AWAY’s main hashtag, #travelaway, and links to Instagram users so users can see the products in real life.

The Mystery of the Travel Uniform

A challenge in building clear user journeys

On average, it took my users over three minutes to be able to find the tab that allowed them to create a set. Most would gloss over the tabs for "Travel Uniform" completely, unsure of what it meant. After seeing this happen with multiple user tests, I decided to rename the feature within my hierarchy to just be "Make it a set". When I went back to test my updated prototype to my users, the response was positive and time to find the tab was under a minute.

 

NEW FEATURE

Introducing the Color Passport

Color Your World with AWAY

The Color Passport is an interactive lookbook designed to highlight AWAY's color palette and the cities that inspired it. As mentioned above, I redesigned AWAY's color taxonomy to be based on Here Magazine's city guides. The Color Passport features all nine colors and cities — Jaipur, Lisbon, Shanghai, Monaco, Cape Town, Madrid, Mexico City, Ubud, and Dublin. 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.

Images are shown below with hover state color, no animated state.

Color Match

Visualize your trip

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.

City Description

Get a taste of the experience

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.

Click to Shop

Take the next step

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.

Motion design and animation

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.

Personas

Leslie is buying a graduation present for her sister Alicia.

Leslie is an accountant at KPMG in New York City and has been working for five years. Her younger sister Alicia is wrapping up her senior year at New York University, where she is studying marketing. The two sisters are six years apart in age, but that hasn't stopped them from being incredibly close. Growing up, their family traveled around the world, frequently exploring Europe after stopping by their grandparents' home in Nice, France. Unfortunately, as they both grew older, airfares became more expensive, and schedules became harder to lockdown. The sisters haven't been back to France together in over six years, but that's all about to change.

Alicia's secured a job with IBM, so she is set to go for
employment after graduation! Her family is treating her to a two-week vacation in Nice and Monaco as a graduation present, and as a chance for her to visit her grandparents before she gets too busy with work. Alicia loves watching Queer Eye on Netflix, and she saw that Tan France was sporting AWAY's Aluminum Collection in his latest Instagram post. Since then, she's been obsessed with the brand and follows their Instagram posts closely, sending them to her sister as a subtle (not so subtle) hint.

Leslie is paying for the
side trip to Monaco as part of Alicia's graduation present, but she also wants to get her sister a new suitcase, since she's been hinting at it for a while. She heads over to the AWAY website to start shopping. She sees a tab for "Get Inspired", hovers over it, and sees a promotion for something called the "Color Passport". Intrigued, she clicks the "Discover Here" button and launches the experience. She scrolls through the colors and pauses a bit longer at the color "Monaco". Monaco in Monaco, that would be a cute gift...she thinks to herself as she reads the color and city description. She decides to click to shop the Bigger Carry-On for her sister -- it’s a good size to take on day trips when they’re in France and Monaco and something her sister can use during school. She adds it to her cart and decides to go back and explore the Color Passport a little more. They’ve got some interesting recommendations for sightseeing...she thinks to herself, and she clicks the link to read the full guide.

User Journeys

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

 

Homepage promotion

Becoming a main anchor item

Besides living in the Get Inspired tab, I also created a block for the Color Passport to live on the AWAY home page.

 

THE STRATEGY

Making luxury affordable

Competing against Samsonite, Delsey, Rimowa, Tumi
 

Luxury travel has become a bragging right for a lot of young travelers, who take trips as a form of self-care and relaxation but also as a way to show off their adventures (Mintel). Part of the luxury experience is the product — in our case, luggage. Currently dominating the market are Samsonite, their luxury branch Tumi (acquired in 2018), Delsey, and Rimowa. While Tumi and Rimowa boast prices that extend into the thousands ($), Samsonite and Delsey's prices are more modest, hovering around the low to mid-hundreds. AWAY isn't a cheap brand, but it's also nowhere near the price range of Tumi or Rimowa. For my project, I positioned AWAY as an affordable luxury alternative — a brand that could compete price-wise with more practical options like Samsonite and Delsey while also exuding the same sophistication and flair of Tumi or Rimowa.

Source: Mintel, Luxury Travel US - September 2019

Designing for exploration

Designing for the adventurous soul

 

In the age of Instagram, it's not hard to see at least one envy-inducing travel picture show up on your feed at least once a day — the immaculately lit landscapes, the solo shots on top of a mountain, the perfectly staged shot of a lover guiding their significant other down a cobblestone road (you know the ones). I wanted to create an immersive experience for the AWAY customer that helped them focus on what they wanted, individually, out of their travel experience. The important thing is that the customer comes away feeling excited about what the world has in store for them. The ability to induce envy socially is just icing on the cake.

The universal takeaway is that luxury travelers demand a high level of personal attention. However, the biggest difference lies in that while the average traveler wants to experience this personal attention to show others how they’re being fawned over, the high-net-worth traveler sees the personalization as a necessary means to the end of maximizing their time in exploring and immersing themselves in a destination.

-  Mintel, Luxury Travel US September 2019 Report

Become a better traveler. Become a better you.

Luxury travel consumers tend to be older and with higher incomes, even though younger generations are becoming more active in voicing interest and promoting the trends. Rather than catering purely to the envy factor of luxury travel, I wanted to highlight the aspect of self-care and transcendence that is present with high-net-worth travelers. By incorporating the aspect of exploration, discovery, and worldliness, I wanted to extend AWAY's brand beyond the realm of commoditization and into the world of lifestyle.

 

THE PROCESS

Brand audit 

Keeping tabs with the brand

I first conducted this project in Fall 2019. AWAY redid their design system in late Fall, early Winter 2020. Before I began both iterations of my redesigns, I conducted a quick audit of AWAY's current user experience to see how they laid out their information as well as their general aesthetic theme.

Moodboards

Getting inspiration

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.

Sketches and wireframes

Selected wireframes from second round of design

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

Constantly improving

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.

User Feedback

"You're pulling together pieces that they already have, but doing something they haven't done yet."

 

"The feature for shopping by travel length...that's such a great way of thinking for the business."

"It feels aspirational." 

 

"I love the fact that you named your colors after cities. Just the small details."

 

Reflection

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.

Let's connect! 

 

marisliu16@gmail.com

  • LinkedIn
  • Instagram