OISELLE

Website Re-design 

MARKET RESEARCH, ui, branding, prototyping | created as a student project at SVC.

 
Oiselle-Desktop-Mock--1.jpg
 
 

WHO IS OISELLE

Oiselle started nine years ago with a single product: running shorts. Since then, it has grown to include additional bottoms, tops, and outerwear. The company has actively developed its running community through social media and three programs: an ambassador group, in-kind sponsorship of emerging athletes, and paid sponsorship of elite professional and Olympic athletes. Oiselle surprised the industry by luring away Kara Goucher from Nike. Oiselle started out by looking to improve women’s running apparel. Now they’re looking to change the entire sport of running by becoming an outspoken advocate for athlete’s rights.

 
 
 

THE CHALLENGE

On the visual level, the owner is looking to add more of a sense of grit to the clean, modern, and geometric aesthetic. When/where do you inject more personality?

Additionally, many of Oiselle’s customers are experienced runners. Many more are not. The brand is looking to provide more “Running 101” content to grow the pool of dedicated runners and to embody their vision of adding a more intellectual aspect to sport and expand their customer base.

 
 
 

KEY PAIN POINT

One critique of the company is it comes off as exclusive. How do you become more welcoming without alienating your core base?

 
 
 

KEY GOALS

• Better express Oiselle’s vision of “feminine fierce” by adding a sense of grit to the ‘clean’ and modern aesthetic of their current site

• Surface blog content to the homepage

 
 
 

TIMELINE – 9 WEEKS

  • Market research

  • Brand research

  • User research

  • Branding

  • UI design

MY ROLES

  • Market & brand research

  • Branding

  • UI design

 
 

 
 
Screen Shot 2018-10-09 at 10.11.10 PM.png
Being a strong woman is very important to me. But doing it all on my own is not.
— Reba McIntire
 
 

 

Market Insights

 
oscar-soderlund-591454-unsplash.jpg
 
 

SWAT ANALYSIS

 

 
 

To identify Oiselle’s strengths, weaknesses, opportunities, and threats in their market— I performed a SWAT analysis of top competitors.

 
 
 

OISELLE’S STRENGTHS AND OPPORTUNITIES


 
 

STRENGTHS

• Woman owned

• Community minded

• Quality products

• Authentic

OPPORTUNITIES

• Functional + cute products

• All inclusive community

• More diversity in models

• Start blog posts sponsored by runner

 
 

KEYWORDS

 

 
 

“Feminine Fierce,” the thinking woman’s athletic brand, sport activism, community, heart of running is bigger than the clothes, transcend product, athletes as heros, outspoken.

 
 
 

APPLYING THE RESEARCH TO DESIGN

 
 

 
 

In beginning to consider the aesthetics of the new designs, I chose to focus on the following opportunities which surfaced in my SWAT analysis.

ALL INCLUSIVE COMMUNITY | Oiselle is very community minded. Let’s bring some local runners, of all expertise levels, to write segments on their blog.

INCLUDE MORE DIVERSITY | Currently, the photography on the website could include a little more diversity in their models. Doing so supports their aim to be more inclusive. It’s important for customers to see themselves represented in their brands.

SHOWCASE THEIR AWESOME PRODUCTS | Oiselle has some exceptional products. They choose to focus on quality materials that are well made and not only functional, but cute.

Screen Shot 2018-10-09 at 10.15.52 PM.png
 
 

 

The Oiselle Audience

 
priscilla-du-preez-zeqWK0n5PNM-unsplash.jpg
 
 

PRIMARY, SECONDARY, & ASPIRATIONAL AUDIENCE


Oiselle has a good understanding of who their audience is, and would like to expand their community to reach beginners and functional runners with more 101 running content.

 

THE OISELLE AUDIENCE

 
 

PRIMARY | progressive, dedicated female runners 18–40s, middle-upper income, college-educated.

SECONDARY | adult, female athletes and running enthusiasts.

ASPIRATIONAL | functional and beginners that are more pragmatic about running.

 
 

 

Applying Insight to Design

 
bruno-nascimento-PHIgYUGQPvU-unsplash.jpg
 
 

WIREFRAME SKETCHES & SYSTEM ARCHITECTURE

 
 

 
 

I began by sketching out some elements of the navigation and layout that could be cleaned up, and re- organized. Then made some wireframes to begin the homepage re-design.

 
 

GENERAL ARCHITECTURE

SITEMAP - PRIMARY NAV

SITEMAP - FOOTER

WIREFRAMES

 
 
 

FIERCE-A-FYING THE OISELLE BRAND

 
 

 
 

MOODBOARD

To better express Oiselle’s vision of “feminine fierce” , I injected more color into the homepage with geometric elements that cut the formality and predictability of the previous layout. Heroic imagery focused on their customer base, now showcases a community focused visual treatment.

 
 
 
 

 

Final Designs

 
Oiselle-Desktop-Mock--1.jpg
Desktop Homepage

Desktop Homepage

 
Product Hover

Product Hover

 
 
 
Desktop Menu Drop Down

Desktop Menu Drop Down

 
 
 
 
 
Mobile Screens

Mobile Screens

 

 
 

IN CONCLUSION

Using the swat analysis insights – I chose a visual treatment that focuses on the quality materials and products Oiselle produces to emphasize what sets Oiselle apart from its competitors. Bringing color and shape to the design, better reflects the vibrancy and strength of the Oiselle family. The geometric designs add a depth of grit, a direct request from our client.

By bringing the blog showcase to the homepage, with user generated content highlighted, we’ve brought the focus to the Oiselle runner and created a gateway for visitors to engage with their community. Highlighting user generated content and more accessible 101 content, Oiselle has an opportunity to grow their customer base and shed their reputation for exclusivity (a brand pain point).

 
 
 

“Have no fear of perfection—you’ll never reach it.”

Salvador Dali