homenoback.png

green city living

Concept E-Commerce Responsive Web Design

My Role

UX Designer

Tools

Pen & Paper, Sketch, InVision, Zeplin

Methods

Business & Competitive Analysis
Information Architecture & Site Mapping
User Research & Interviews
Data Synthesis
Affinity Mapping
Persona Ideation & Creation
User Flows
Wireframing & Mockups
Prototyping
Usability Testing & Iterations
Logo Rebrand
Styleguide Creation

 

During a 3-week sprint, I worked as a UX Designer to modernize Green City Living’s online presence, creating an enjoyable and intuitive shopping experience for the customer and establishing new UI to reflect the brand’s focus on simplicity & sustainability.

Background: Green City Living is a sustainable home goods company started 7 years ago by a mom/nurse who wanted to decrease her family’s environmental impact. Once just a booth at craft fairs, Green City Living is now trusted in households nationwide and recognized as an innovate, affordable, and eco-friendly brand. Green City Living products are available in some local stores, but the majority of their sales come through their online store. Their website is outdated, frustrating to navigate, and poorly represents their mission as a company.

Initial observations & findings

Makeoverleaf2x.png

To kick off this project, I started with an exploration of the current Green City Living website.

Research Overview:

  • Usability audit

  • Heuristic Evaluation

  • Business Analysis

  • Competitive Analysis

What I found:

  • Complex and in depth information architecture

  • Outdated UI

What this means:

  • Confusing navigation discourages users from browsing and shopping

  • Complex information architecture prevents users from easily finding what they are looking for

  • Outdated UI might not appeal to users

Going forward, I hoped to validate my initial findings through user research and uncover the other key pain points.

NExt step: User Research

I wrote an interview script that covered:

  • Sustainable living

  • Eco-conscious shopping

  • Online shopping habits

I spoke with current customers as well as potential customers - those that considered themselves sustainable consumers. Speaking with users challenged some of the assumptions I had about Green City Living customers. I thought I would primarily discover the organic-only shopper who drove a Subaru and was probably a vegan. Instead, I realized most of the customers were like me; just trying to do their part to live sustainably, but sometimes prone to choosing the easier option and interested in maintaining a comfortable life.

Two primary personas emerged from all of the interviews:

 
amy.png
 
 
carrie.png
 

Designing for the Loyal customer

3 Key Pain Points

  1. Confusing information architecture

  2. Click-heavy navigation

  3. Lengthy checkout process

3 Key Solves

  1. Designing intuitive information architecture

  2. Creating seamless navigation structure

  3. Redesigning the checkout process

Designing intuitive information architecture

User interviews validated my assumptions that the information architecture of Green City Living was poorly organized. Current customers complained that finding a specific item might take several guesses and extra clicks. I wanted to understand where each product should live within the site in order to create a robust site map with intuitive information architecture.

In order to reorganize the dozens of products into understandable categories, I performed a card sort with 10 sustainable shoppers. Relying on shoppers was key to figuring out the best place to put tricky items like “dryer fluff balls” and “bacon sponges.” I was able to sort all the products into 5 different categories:

product categories2x.png

Creating seamless navigation structure

After cleaning up the site map and information architecture, I focused on addressing the navigation issues. The current Green City Living Site had 20 clickable menu tabs on their home page, each leading to a different product. Current users found this layout overwhelming, and it discouraged new users from browsing and/or shopping.

I redesigned the homepage to have a simple navigation system with three menu options: Shop, Blog, and About. I also added in a search bar for loyal customers looking for a specific item, so they could shop quickly without perusing through categories.

 
amy home screen.png
 

Redesigning the checkout process

A big pain point for Amy, a.k.a. the current customer, was the lengthy checkout system, especially if she was purchasing an item monthly from the site. Creating a frequent shopper log-in at the beginning of the checkout process was an easy way to make checkout less headache-inducing for the loyal customer.

Logging in with a password brings up all of the customer’s shipping, billing, and payment information without them having to type everything in each time they make a purchase.

 
frequent study visual.png
 

Designing for the NEW Customer

Carrie, a.k.a. the new customer, is an aspiring environmentalist who is ready to make a few changes to live a greener life. Since she hasn’t shopped on Green City Living before, she doesn’t have frustrations with the site, but she does have goals for the shopping experience:

2 Main Goals

  1. Browsing specifically for featured Items

  2. Reading customer reviews before purchasing

2 Main Opportunties

  1. Highlighting featured items

  2. Including Reviews on PDP

Highlighting featured items

Although still a small business, Green City Living has been featured in many blogs, newspapers, and magazines. Through interviews I found that many people hear about sustainable products on blogs and social media, and then check out the products online later.

I wanted to highlight Green City Living’s featured items on the homepage, so that new customers would know which items have been considered buzz-worthy. Placing featured items in such a visible spot would also give new customers, like Carrie, a good starting point for browsing and shopping on the site.

 
featured items.png
 

Including Reviews on PDP

I also discovered that for new customers, reading reviews was a key part of their online shopping experience. I wanted to ensure users would be able to easily locate and scroll through reviews on the product description page before adding an item to their cart.

 
amy home screen copy.png
 

What’s Important to All Sustainable consumers?

Both loyal customers and newly minted eco-conscious consumers agreed that reading about what a sustainable goods company is doing for the environment is a big deciding factor when purchasing their products

One of the biggest insights I gained during user research was the importance of highlighting the company’s mission statement. This information, as well as helpful tips and stories about green living, was already available on the current Green City Living blog, but was hidden amongst the 20 menu options. Although the information on the current blog was relevant, the layout of the blog wasn’t visually appealing. I made three changes to please both current and potential customers:

  • Created two ways to get to the blog from the homepage

  • Emphasized the company’s mission statement on a meaningful homepage

  • Updated the blog with stunning photography and clean UI

 
newdesign.png
 
 
blog changes.png

Modernizing the UI

In addition to making Green City Living more functional, I also wanted to update the UI and logo to reflect the company’s dedication to simplicity and sustainability. I learned that while shopping for sustainable goods, users want to feel calm and at peace. I utilized white space, kept heavy text to a minimum, and made the following changes to facilitate these aesthetics:

  • Redesigned their logo

  • Created a new color palette

  • Selected new typography

To ensure an easy handoff to the development team, I used Zeplin to create a Styleguide and I designed a mood board detailing all of these design choices.

 
styleguidebig.png
 
 

Interactive Mobile Prototype

 
 

Check out the Interactive Desktop Prototype Here!

Phase 2: More usability testing

During the one round of usability testing I had time for, I heard two comments repeatedly:

  1. The original checkout screen was overwhelming because all of the fields were presented at once, rather than being split into different sections.

  2. The layout of the Order Confirmation Page wouldn’t be viable if the user ordered a long list of items.

Since I heard both of these comments from several users, I knew they were issues to address, and I redesigned accordingly.

All of the other pieces of feedback I got were isolated.

One person didn’t like the typography, another had issues with the PDP page, and so on. If I had had more time, I would have done at least one more round of usability testing to sort out the real usability issues from the comments stemming from personal preference.

fixitleaf2x.png