AWAY and Here Magazine are sister companies with two separate identities. To unite the brands, I developed a new design system, improved web navigation flow, and created an interactive color discovery feature called the "Color Passport".
view solutionAWAY is a direct-to-consumer luggage company with a strong following among young travelers. The brand has seen strong success from their social media strategy and influencer following.
Here Magazine is a travel and lifestyle magazine available in print and digital. The publication features curated travel guides, complete with stunning photography, exclusive interviews, and personal essays.
part one
Elevated brand principles and color naming based off of Here's magazines city guides
part two
Eliminating nested pages, creating four nav tabs: Shop, Personalize, Discover, and Get Inspired
part three
Interactive lookbook exploring new color-ways with links to matching Here city guides
As I began my process for my redesign, I created four brand principles that became the foundation for my design system and feature sets.
AWAY is a contemporary brand designed for the modern traveler. We seek to capture the hearts of those individuals who are dedicated to the discovery of beautiful things. Designs should be forward-facing and relevant but also respectful of the traditions from which they are derived.
Personalization should be at the forefront of our designs, whether it be product or digital. Just as we design thoughtful products for the traveler, we should create thoughtful, accessible, customizable experiences for the shopper. Design should feel intimate, like it was tailor-made for the individual.
Design should be minimal but exciting. The viewer or buyer should feel refreshed after buying our product or visiting our site. There should not be too much distraction. The experience should feel effortless.
We're in the business of exploration and discovery. Our designs should encourage our community to explore together and inspire others to do the same.
As it exists today, AWAY's color palette is very basic. The primary colors are Black, Navy, Green, Asphalt, Coast, White, Sand, Blush, and Brick. In renaming the core color palette, I decided to take city names from Here Magazine's city guides and apply them to the existing nine colors.
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.
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 by product category or collection
Shop accessories, shop luggage recommendations based on travel length, create a luggage set, and add finishing touches such as monograms
Find our store locations, read special edition guides from Here Magazine
Access the Color Passport lookbook, quick links to AWAY's social media handles and hashtags
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.
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.
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.
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.
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.
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.
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.
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.
