top of page

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


 

desktop savered.png

Click on the links below for more details

phone savered.png

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.

savered ig post.png

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.

savered ig post2.png
FJSR_Backpack2.png

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:

savered table_savred_point of difference
savred_gale.png
savred_judy.png

How they are the same:

savered table_savered_point of parity.jp
savred_gale.png
savred_judy.png

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."

Web 1920 – 2.png

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. 

savered style guide.jpg

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.

Up Next:

bottom of page