oiselle-project-hero-image.jpg

Oiselle

 

E-Commerce Website refresh project

Oiselle is a Seattle-based women's athletic apparel brand by and for women athletes. Their main focus is on the sport of running, whether it be professional sport or for leisure. 

 
 
Oiselle_5_Screen_Mockup.jpg
 
 

 
 

Duration

10 weeks

 

 

Role

SVC Student

Art Direction

User Interface Design

Brand Refresh

 

 

Tools

Photoshop

Illustrator

 

 

 

 

Problem

Their current website didn't have much branding or really a specific style. The client didn't feel that it captured the brand or mission of the company.

 

 

Goal

To weave more of the brand and personality into the website—elevating and implementing a recognizable visual style that will appeal to current Oiselle customers. And to create an intuitive user experience that will promote their product and create brand loyalty.

 

 

Solution

Refresh the brand and incorporate more visual elements that tell Oiselle's story. Create a design that is feminine fierce and empowers women.

+ Use anaglyph artwork to capture the motion of running

+ Bold san serif typography

+ Using a lightened tint of their original brand orange color to keep the femininity and airy elements of the sport and their brand.

+ Overlapping elements to show the dynamic movement associate with running.

+ A clean layout that utilizes small details and filters to give the user control of their shopping experience.

 
 
 
 
Oiselle-Quote-Banner.jpg
 
 
 
 
Screen Shot 2019-04-22 at 11.47.40 PM.png
 
 

Competitive Analysis

To begin, I conducted a competitive analysis to do research on Oiselle’s direct and indirect competitors and broke down their sites by popular e-commerce features.

 
 

Moodboard

10_Clement_Danielle_Styleboard_02-02.jpg
 
 

Styleboard

10_Clement_Danielle_Styleboard-03.png
 
 

Head up, wings out.

 

Landing Page

Oiselle_Isometric_Web-MockUp_01.jpg
 
 

New Arrivals Page

Oiselle_Isometric_Web-MockUp_02.jpg
 
 

Product Page + Checkout Flow

Oiselle_Isometric_Web-MockUp_03.jpg
 
 

About us + Contact Pages

Oiselle_Isometric_Web-MockUp_04.jpg