BANANA REPUBLIC DIGITAL REBRAND
ART DIRECTION, BRANDING, UI/UX, VISUAL DESIGN
Banana Republic wanted to shift the brand towards a fashion forward and more digitally savvy customer, but the site experience didn't reflect that. As Global Art Director, I was challenged to re-imagine the brand's visual identity and lead the development of a new responsive and editorially-driven web experience from concept to launch.
Left: Homepage, 2014. MIDDLE: UX Wireframe, 2015. RIGHT: HOMEPAGE, 2016.
STRATEGY
I approached the digital rebrand the same way I would a new digital product: by holding brainstorm sessions with key business partners to re-assess the brand positioning and define the goals for the brand's digital experience.
I built strong relationships with UX to gather customer insights through user and market research. With these learnings top of mind, I partnered with Engineering to explore and launch UI/UX refinements and features that addressed the needs of both the brand and it's users.
USER PROBLEMS
NO VISUAL HIERARCHY
The website lacked a consistent visual design system and hierarchy, causing the interface to feel cluttered and exhausting to explore.
TOO TRANSACTIONAL
Users sought inspiration, but were greeted with overbearing marketing messages and promotional offers, causing the site to feel too transactional.
LACKS INTERACTIVITY
Users felt the website felt very static, especially on the desktop. There was literally no user interaction or feedback throughout the site experience, making their experience feel distant and unengaging.
LACKS STORYTELLING
There was a lack of brand point of view, with no destination for brand messaging and values. And although users did not come to the website to be inspired, research showed inspiration could lead to more purchases.
PLATFORM LIMITATIONS
The brand was transitioning into responsive design, but the site lacked a responsive framework and design system. This put strain on both Design and Engineering, often causing bottlenecks throughout the build phase of projects.
PAIN POINTS
I don't know what the brand stands for.
I'm not sure where to look.
How can I see the newest items?
I never make it far enough down the page.
The brand doesn't feel like luxury.
USER PERSONAS
EDITORIAL
"I want to purchase into a lifestyle."
Motivation: Constantly curating their style, Buying into a particular lifestyle
Needs: To be inspired
Traits: Spends time shopping on the weekend, Spends the most when shopping
whimsical, free, creative, open, imaginative
NEW ARRIVALS
"I like to see and find what's new for me."
Motivation: Only interested in what's new
Needs: The experience needs to be easy to use to quickly accomplish her task
Traits: Very task oriented
discerning, driven, anticipation, focused, proud, confident
CATEGORICAL
"I know exactly what I want."
Motivation: Searches for a specific item to augment their wardrobe
Needs: Time is valuable, so wants to find specific product quickly
Traits: "Spearfisher" type shopper, Short on time
determined, investigative, discerning, time-aware, focused
SALE
"I want to score a great deal when I shop."
Motivation: Aiming to purchase more for less
Needs: Satisfaction of getting a good deal
Traits: Willing to work hard to get discount
patient, investigative, determined, calculating, open, accomplishment
RESPONSIVE MOBILE EXPERIENCE
style guide
design solutions
FLYOUT NAVIGATION
— To satisfy our largest customer segment, the New Arrivals Shopper
— To create an editorial destination for storytelling for our growing Editorial Shopper
— To expand on the fixed navigation with a flyout menu to show more categories for the Spearfisher and Categorical Shopper
FIXED CONTENT WIDGET
We wanted to explore putting tertiary editorial content on the homepage without making the page "feel" longer and allowed for us to surface more ways for the user to shop and explore.
BANANA REPUBLIC DIGITAL REBRAND
ART DIRECTION, BRANDING, UI/UX,
VISUAL DESIGN
Banana Republic wanted to shift the brand towards a fashion forward and more digitally savvy customer, but the site experience didn't reflect that. As Global Art Director, I was challenged to re-imagine the brand's visual identity and lead the development of a new responsive and editorially-driven web experience from concept to launch.
Left: Homepage, 2014. MIDDLE: UX Wireframe, 2015. RIGHT: HOMEPAGE, 2016.
STRATEGY
I approached the digital rebrand the same way I would a new digital product: by holding brainstorm sessions with key business partners to re-assess the brand positioning and define the goals for the brand's digital experience.
I built strong relationships with UX to gather customer insights through user and market research. With these learnings top of mind, I partnered with Engineering to explore and launch UI/UX refinements and features that addressed the needs of both the brand and it's users.
USER PROBLEMS
NO VISUAL HIERARCHY
The website lacked a consistent visual design system and hierarchy, causing the interface to feel cluttered and exhausting to explore.
TOO TRANSACTIONAL
Users sought inspiration, but were greeted with overbearing marketing messages and promotional offers, causing the site to feel too transactional.
LACKS INTERACTIVITY
Users felt the website felt very static, especially on the desktop. There was literally no user interaction or feedback throughout the site experience, making their experience feel distant and unengaging.
LACKS STORYTELLING
There was a lack of brand point of view, with no destination for brand messaging and values. And although users did not come to the website to be inspired, research showed inspiration could lead to more purchases.
PLATFORM LIMITATIONS
The brand was transitioning into responsive design, but the site lacked a responsive framework and design system. This put strain on both Design and Engineering, often causing bottlenecks throughout the build phase of projects.
PAIN POINTS
I don't know what the brand stands for.
I'm not sure where to look.
How can I see the newest items?
I never make it far enough down the page.
The brand doesn't feel like luxury.
USER PERSONAS
EDITORIAL
"I want to purchase into a lifestyle."
Motivation: Constantly curating their style, Buying into a particular lifestyle
Needs: To be inspired
Traits: Spends time shopping on the weekend, Spends the most when shopping
whimsical, free, creative, open, imaginative
NEW ARRIVALS
"I like to see and find what's new for me."
Motivation: Only interested in what's new
Needs: The experience needs to be easy to use to quickly accomplish her task
Traits: Very task oriented
discerning, driven, anticipation, focused, proud, confident
CATEGORICAL
"I know exactly what I want."
Motivation: Searches for a specific item to augment their wardrobe
Needs: Time is valuable, so wants to find specific product quickly
Traits: "Spearfisher" type shopper, Short on time
determined, investigative, discerning, time-aware, focused
SALE
"I want to score a great deal when I shop."
Motivation: Aiming to purchase more for less
Needs: Satisfaction of getting a good deal
Traits: Willing to work hard to get discount
patient, investigative, determined, calculating, open, accomplishment
RESPONSIVE MOBILE EXPERIENCE
style guide
design solutions
FLYOUT NAVIGATION
— To satisfy our largest customer segment, the New Arrivals Shopper
— To create an editorial destination for storytelling for our growing Editorial Shopper
— To expand on the fixed navigation with a flyout menu to show more categories for the Spearfisher and Categorical Shopper
FIXED CONTENT WIDGET
We wanted to explore putting tertiary editorial content on the homepage without making the page "feel" longer and allowed for us to surface more ways for the user to shop and explore.