CASE STUDY
SaveRed: 1 store.
2 different markets.
10 minutes read
Role: UX/UI Designer with Flo & David
Tools used:
Adobe XD, Photoshop, Illustrator, Webflow, Google Forms, Shutterstock, Youtube
Click on the links below for more details
SaveRed is a charitable shopping site that helps save the endangered Red pandas. It raises funds by selling limited-edition merchandise designed with other brands. Today, it’s collaboration with Fjällräven is highly visible in social media advertising.
We don’t want to waste those advertising dollars so the social media traffic that lands on SaveRed, from first-time users to veteran donors, needs to result in conversion.
We made it for Gale and Judy
Both personas were made from affinity diagrams, 3 user interviews, 2 competitive usability tests, and 27 survey respondents. See their known habits here.
Gale and Judy are two different people. Gale is a tree-hugger who loves supporting causes and vets them out thoroughly. Judy, frankly, doesn’t care much about causes but is a huge sucker for trends (which she is quite picky with). Both love animals.
Gale: Interesting. I’m glad someone is helping the red pandas
Judy: Ooh, cute bag *imagines how many outfits to pair it with”
The Problem
“How do we balance the site to appeal to both?”
First, we figured out:
-
What features in a site keep their attention and push them to buy
-
If they shop differently in a regular e-commerce site vs a charitable shopping one
How they are different:
How they are the same:
Together with our story board, journey map, competitor analysis and feature-prioritization mix, we created wireframes, prototypes and revised them based on user testing.
Version 1 feedback/questions:
"How do I access my account/cart?"
"Vector images feel cartoony and cute, I’m not inclined to save this red panda."
"You have 2 products? Why do you need a shop page?"
"Social media feels like a filler."
"I need more information about the cause on the main page."
Check out the live site
The Anatomy of SaveRed
Each information featured in SaveRed is thoughtful and research-based:
Zoom in to see annotations
The Homepage
The About Page
The Shop Page
Making SaveRed
We named it this way since SaveRed = Save Red Pandas
Using the verb “Save” conveys the needed action and its urgency, and “Red” highlights our brand color and provides distinction from the giant panda. We overlaid single, colorful images over neutrals to emphasize focal points.
Red and black are strong colors, and can be overpowering when not used carefully together. So we used a lot of white space to keep it light and modern.
Elements of the SaveRed Style Guide
The Results:
After presenting the concept to a class focus group of 30 (containing a few Judys and Gales), 100% said they will forever remember the red panda. They also agree the site is styled well and has enough information to make a purchase decision. Majority of those who are keen on using an $80 red backpack say they will add SaveRed’s to cart.
Since we created a live website, most of the areas for improvement were on the front-end development such as alignment and spacing. The site also shows correctly on 4 screen breakpoints (15” desktop, tablet & 2 mobile orientations) but the proportions suffer in viewports outside these sizes.
Overall, the group said the site and the information it contains did not alienate any of them as potential shoppers.
To make a real donation to the red panda habitat conservation, go here.