Oiselle Web Design
SCHOOL OF VISUAL CONCEPTS
DESIGN FOR  MOBILE

BACKGROUND:  
Oiselle started nine years ago with a single product: running shorts. Since then, it has grown to include additional bottoms, tops, and outerwear.
 
Oiselle has been getting great PR from recent wins over Nike, but is still relatively unknown outside of running circles. How could Oiselle help adult, female athletes and running enthusiasts? What is the role of a women-led company that seeks to promote the idea of “Feminine Fierce”.

CONTRIBUTIONS:
User Interface, UI & Visual Design
Visual Design Language System
Visual & UX Research
Branding Update

TOOLS:
Sketch, InVision, Illustrator, Photoshop


PROJECT GOALS
BETTER EXPRESSION OF "FEMININE FIERCE" 
The main goal is to better express Oiselle’s vision of “feminine fierce.”  Visually, the owner wants more of a sense of grit added to the clean, geometric aesthetic.

REORGANIZE BLOG
The blog needs to be reorganized for better clarity and structure. This includes having a better way to fin blog content on the homepage.

PROVIDE MORE "RUNNING 101" CONTENT
Many of Oiselle’s customers are experienced runners. However, there are many more who are not. The brand is looking to provide more “Running 101” content to grow the pool of dedicated runners.

IMPROVE USABILITY
Usability enhancements include improving the filter and search functions.


PERSONA
AUDIENCE
Primary: Progressive, dedicated female runners 18–40, middle-upper income, college-educated.
Secondary: Adult, female athletes and running enthusiasts.

 VISUAL DESIGN LANGUAGE SYSTEM
 VISUAL IMAGES
Redesigned the blog icon and images for better clarity and structure. Created a color palette that is bright and bold, yet still complimentary to the clothing. Utilized vibrant and natural "feminine fierce" photography. Font shows movement and texture.
FILTER AND SEARCH
Improved navigation to be more functional and efficient. Refined the sorting function to be more intuitive, following a clean grid. Added more balanced spacing and streamlined typography.

< BACK   |   NEXT PROJECT >
Share by: