French Girl

Organics

Responsive Web Redesign Concept

Scroll down for an abbreviated case study or...

Case-Study-project-details

The Process

Process

The Challenge

The French Girl Organics website was deceptively pretty. What it had in nice imagery it lacked in consistency and logic.

The challenge, for me, was to create a site that worked well on mobile and desktop and enabled people to find the items they wanted and add them to their cart in the fewest clicks while creating a design system that unified the site and maintained the French Girl Organics fresh, high-end aesthetic.

 

Desktop-Homepage-1p2-Stills

The Homepage was a disorienting mix of images and links that didn't work. Font styling was inconsistent and it was difficult to figure out the navigation.

Desktop-AllProducts

The All Product page had inconsistent images and title blocks. Users also were unable to truly see all products. 

Desktop-ShopAll1-1p2-Stills

The Collections page was difficult to find and wasn't making proper use of a grid. Clicking "collection" links didn't always take the users where they expected to go.

Desktop-Collections-1p2-Stills

To add to the confusion, a second Collections page existed and was especially difficult for people who couldn't read the faint text over the images. 

Research

ZERO% of users successfully completed tasks in time alotted during usability testing.

07

User

Interviews

07

Usability

Tests

56

Card Sort

Participants

For testing, I had users attempt to find a lip balm to add to their cart and find a bath product to add to their cart. 

Users tested FrenchGirlOrganics.com as well as Lush.com. Uniformly, users failed to complete their tasks in under 2 minutes for FrenchGirlOrganics.com but were able to complete the same tasks in under 30 seconds on Lush.com. 

This told me there was a serious information architecture problem in addition to observing UI issues with the main menu on the French Girl Organics site.

Synthesis

Case-Study-i-Statements

Personas

THE SKINCARE OBSESSED IT GIRL

Alexis McComb

"Skincare is self care!"

Alexis has incredibly sensitive skin and she's very particular about what ingredients are in the products she uses and opts for minimal, organic ingredients over synthetic additives. 

tamara-bellis-JoKS3XweV50-unsplash-1

Alexis needs a better way to find skincare products with specific ingredients on FrenchGirlOrganics.com because she has very sensitive skin.

isaiah-mcclean-DrVJk1EaPSc-unsplash-2

THE MOST THOUGHTFUL PERSON YOU KNOW

Val Palmer

"I love to brighten someone's day with a unique gift!"

Val loves to support women-owned businesses when shopping for gifts. Bonus points when they benefit the environment, too!

Val needs a better way to pair products that go well together on FrenchGirlOrganics.com because she wants to give the perfect gift.

Ideation

Design Studio

Goal: get as many ideas out as possible on paper before even thinking about touching a computer.

For this design, I looked to common design standards for other popular beauty sites and I noticed they all had a top level navigation in common.

With beauty products posing such a difficult information architecture challenge, I chose to stick closer to the known design patterns rather than creating something completely new.

Mid-Fidelity Wireframes

No color, no pictures. Intended to prove interface usability before spending the time, money, and effort on high-fidelity versions.

Based on feedback, it was important to avoid endless scrolling and to enable users to shop multiple categories straight from the homepage. 

The addition of an "Add to Cart" button enabled people to quickly add the items they wanted to their cart and check out or keep shopping.

Artboard-1P2-Wireframes
Artboard-4P2-Wireframes
Artboard-7P2-Wireframes
MoodBoard

Mood Board

French Girl Organics has a clean, minimal aesthetic and styles their images with an effortless French flair. 

I wanted to stay true to their aesthetic while adding some polish to their site. 

Deliver

High-Fidelity Prototype

FrenchGirlOrganics-HiFiMockup2

Do you geek out over solving problems as much as I do?

Check out the full case study, explore how the project is organized in Notion, and try out the clickable prototype!

But wait...what about the devs?

Click the button below to explore project handoff with Zeplin!

Selected Works

Imagine That!View Case Study →

French Girl OrganicsView Case Study →

LeafpointView Case Study →

svg-image

Interested in working together? Get in touch!