Case Study: ReFRESHING THE BRAND AND REVAMPING THE WEBSITE

Oiselle Website

 
 
 

MY ROLE:

UI & Visual Design

THE FRAMEWORK:

10 Week Case Study Project
Seattle School of Visual Concepts: UI & Visual Design for Websites
Instructor: Bryan Mamaril

IN A NUTSHELL:

Case study for the redesign of a Seattle-based women's running apparel shop website.

 
 
 
 
Oiselle Home Page Scroll.gif
 
 
 
 

About the Project

Oiselle is a Seattle-based by women, for women athletic apparel company. 

I did a deep dive into their brand, values, business goals and target audiences to come up with a strategy for the redesign of their ecommerce site. My goal was to building a site that reflects the power behind their brand while also expanding to a more inclusive audience and providing a content rich, meaningful resource to support women.

 
 
 

Goals

1. Bring the Oiselle brand and personality to the website.

2. Implement a visual style and create content that appeals to the current Oiselle customer.

3. Expand the brand voice to reach a more inclusive audience.

4. Build a clean and intuitive user experience for customers as they move through the site. 

5. Elevate the content on the site and make it a place where women will want to come back over and over.

 
 
 
Oiselle-Screen-and-Mobile.jpg
 
 
 

The Visual System

 

Oiselle's current audience is mostly hardcore runners and athletes that embody the phrase "feminine fierce". As Oiselle is growing they want to expand their appeal to women who are new to running or want athletic apparel for other activities. I explored these two audiences and aesthetic directions and created mood boards for both.

Ultimately, the client wanted to pursue elements from both directions in order to appeal to both customer bases, so I found ways to combine them so they could live together on the website while still contributing to a clean and unified overall style.

 
 
 

Mood Boards:

Oiselle-Moodboard-1.jpg
 
 
 

COLOR:

Pops of a slightly softer take on the Oiselle brand orange, alongside a mostly subtle and subdued palette elevated the feel of the page. More color variety was used on the Run 101 page and other places throughout the site that intended to appeal to a new audience.

LAYOUT:

A clean grid, lots of white space, simple lines, and subtle icons and interaction points create a sophisticated and elevated visual experience.

 

Photography:

The product photography got a fresh look with minimal backgrounds/styling, casual poses and a more fun and stylish overall vibe. Lifestyle/on location photography adds some color/textural interest while also feeling fresh and minimal.

Typography:

Bold and bright headers help make the Run 101 section feel inviting and approachable, while subdued clean body and subheads throughout the site let the focus remain on the product.

 
 
 
 
Oiselle-Style-Board-2.jpg
 
 
 

Content Strategy
& Layout

USER EXPERIENCE:

The usability priorities for redesigning the site were a streamlined shopping experience for both web and mobile, and to make it fun and easy to discover all of Oiselle's running essentials while browsing the site.

I wireframed the site and created user flows to work with the client to achieve these goals.

FUNCTION:

The Oiselle website needs to function as both a convenient and easy shopping experience, and a hub of information, inspiration, community building and encouragement. I created content and built platforms to support these goals, including this Run 101 page, a content rich microsite focused on providing an inspiring place for new runners to fall in love with running and Oiselle.

The page is filled with helpful tips, resources and plenty of room for new posts and content to keep runners coming back to the Oiselle site over and over again.

 
 
 

Banner:

First-Step.jpg
 
 
 

Product Page, About Us Page & Run 101 Landing Page:

Oiselle-Pages.jpg
 
 
 

Run 101 Landing Page:

 
 
Oiselle Run 101 Page Scroll.gif
 
 

Product Page:

 
 
 
 

Mobile Product Page:

Oiselle-Mobile-Shopping-Experience.jpg
 
 
 
Rest-Up.jpg
Oiselle-Pop-Up.jpg