Making Sustainable Shopping Easy
Lily MacFaydian
UI/UX designer
Made with

Making Sustainable Shopping Easy

Klerify Case Study

Making Sustainable Shopping Easy

Klerify

Klerify makes sustainable shopping easy. Within seconds, Klerify tells you which brands are sustainable and which brands are not by simply searching or making a shopping list. It prioritizes what products you should focus on to maximize your contribution to helping our planet.

Role: I designed the UI/UX for their app.

Download the app in the app store 

The Challenge

Making Sustainable Shopping Easy

Discovery & Research

Klerify had an outdated MVP version of their app that needed a user experience audit and redesign. Their target audience is millennials interested in fitness, gen-x parents, and environmental enthusiasts. To understand the needs of these customers, I created user personas. This helped to paint a clear picture of their demographics, psychographics, needs and wants.

Through usability testing, I discovered the following 3 issues.

1. Many users struggled with navigation within the app to find relevant features.

Making Sustainable Shopping Easy

The Solution

I redesigned the Information Architecture to increase the visibility of the app's key features. The MVP used a hamburger menu for navigation. Since hamburger menus make features undiscoverable, I replaced it with a tab bar.

Visual Design

2. Users showed little signs of wanting to use the app more than once due to being unsatisfied with harsh color codes and hard to understand icons.

Making Sustainable Shopping Easy

The Solution

To increase engagement, I streamlined the color codes from being a block of harsh color to a simple circle next to the name. I also changed the icons to be more intuitive with their features.

Onboarding

3. Klerify had a Frequently Asked Questions page but it didn't cover the most common questions users seemed to have.

Making Sustainable Shopping Easy

The Solution

To help users easily understand how to use the app and answer their most common questions, I created an onboarding section.

Wireframes of different iterations of the home screen
Wireframes of different iterations of the home screen

Wireframes

At the beginning of my design process, I created wireframes with Basalmiq. It was useful to try out different layout versions for testing purposes.

I tried a few layouts for the home screen before settling on one that let users add items to their shopping list with a floating icon button and uses photos to showcases the large juicy database.

Making Sustainable Shopping Easy

Visual Design

I updated Klerify's identity system to reflect their environmentally friendly messaging. This included a new color palette, typeface, and other UI elements.

Once I went through the feedback loop with Klerify and tested out all the usability mistakes, I started designing the mockups with Sketch to hand-off to the developer.

Making Sustainable Shopping Easy

The Results

After I redesigned the UI/UX for the iOS app, Klerify received a key partnership with the National Wildlife Federation.

This project was a great opportunity for me to learn about the start to finish process of publishing an app to the app store and work with an amazing product development team. 

Dear Lily MacFaydian,

Best,