Oiselle
ecommerce website refresh
Refresh an ecommerce whose mission is to make a great product, build a sisterhood, and improve the sport of running.
project role
SVC student
Visual designer
process
Competitive analysis
Mood board
Style board
Wire frames
Final layout
TOOLS
Illustrator
Photoshop
background
Oiselle (pronounced wa-zelle) is a Seattle-based athletic apparel company for women by women. Oiselle has both an online store and a store in Seattle’s U. Village. A few of their competitors are big brands such as Nike, Athleta, and Adidas.
“Everything we do supports women
who want to move, run, and fly.”
opportunity
We had an opportunity to update the website’s visual language with images and typography that express Oiselle’s vision of “feminine fierce.”
Mood board
Keywords to represent the brand: Bold and strong.
Images: High contrast, black and white to show the brand is bold and strong.
Style board
Colors: red, black, and white. They are high contrast, bold, and strong.
Typeface: Avenir Next. Elegant and bold, while the contrasting use of thin and thick weights makes it effective to use for headlines and body copy.
Product photography: women in action as opposed to static models to represent the clothing line.
wire frames
design solution: desktop + mobile
HOME PAGE
The homepage is composed of a hero image and headline that connects to the dedicated runner who likes a challenge. Since this is an ecommerce site, it was important to show the categories the apparel collection sells. Also, social media is a big part of the feeling of connection, community, and sisterhood that the brand promotes, so I added a social media feed to the bottom of the homepage called “Share your #flystyle.” There the user can upload a photo or see the gallery of images by other shoppers and runners.
home page: desktop + mobile
LANDING PAGE
On the collection landing pages I opted to showcase the collection with models photographed in an action pose or doing an exercise pose to showcase the clothes in action. The poses were yoga, running, and stretching.
product page: desktop + mobile
