top of page

EcoTheory
 

EcoTheory is an e-commerce application that helps keep our planet clean for future generations.

Role

UI/UX Designer

UX Researcher

Tools

Figma

Miro

Timeline

December 2021 - February 2022

EcoTheory.png

PROJECT

The e-commerce EcoTheory company wants to improve its conversion rate from browsing to completion of checkout to increase sales and revenue. Based on the data information given by the Product Manager at EcoTheory:
 

  • 50% of users open on average 7 item pages and abandon the site without moving any items into the cart

  • 70% of users who place an item in the cart do not purchase

  • Additionally, they would like to capture email at checkout

GOAL

The goal is to reduce the user’s bounce rate, improve the usability navigation throughout the application, and offer easy payment process to complete their checkout.

SOLUTION

Quick & Simple Onboarding
 

  • Sign up using their name, email, and password or social media account
     

  • Quick overview of the company's shopping experience
     

Hassle-Free Shopping Experience 
 

  • Add to cart without leaving the page allows customers to continue shopping
     

  • Reduces the cart abandonment rate

Payment Options

  • Pay using a credit card
     

  • Checkout using online payment methods such as Apple Pay, Google Pay, or Paypal

Reordering Made Easy
 

  • Let's customers reorder items they’ve already ordered with just one click
     

  • Saves time and effort

RESEARCH

To understand the target audience, data was provided by EcoTheory -

 

  • Users are between the ages of 25 and 40

  • 71% of women are high-income earners 

  • Environmentally conscious consumers will spare no expense on these eco-friendly products because they want to reduce their carbon footprint, and pollution, and protect the ecosystem 

I began with secondary research on how customers interact with shopping brands on a practical and functional level. User abandons a site before adding an item to the cart, it takes only 15 seconds to grab a reader’s attention, and on average users stay on a website for about 2-3 minutes. A major indication of a high bounce rate is due to a poorly designed website or application.

A competitive research was conducted to understand why the top online retailers such as Amazon, Walmart, and Target are dominating the e-commerce retail space in the US markets. Amazon is the most recognizable ecommerce store worldwide because of its dependable delivery services and convenience. By providing competitive pricing, great deals, easy shipping and returns, Amazon has disrupted the online retail space.

DEFINE

Through secondary and competitive research, I created personas using some of the pain points of consumers’ reasonings as to why user's abandon their shopping carts. To visualize who the users are, an empathy map was used to see from the consumer’s perspective and what they look for in a product to reduce the bounce rate of the application.

IDEATE

By mapping out the user flow, I can simplify the user’s journey and determine how many screens to design. Using the data that I’ve gathered from the user’s research and personas, will help me create all of the important navigational paths.

User_Flow1.png

PROTOTYPE

To help me explore and communicate my ideas on paper, I began sketching my idea before I settled on this design. I translated my sketches to build out my low-fidelity wireframes. Seeing the early stages of my framework, allowed me to visualize the rough design functionality and test the concept.

Sketches_1.png

Home

Product Info

Sketches_2.png

My Cart

Payment

Low_Fidelity_Wireframes.png

Home

Product Info

My Cart

Payment

TEST

After using the feedback from the low-fidelity wireframes in guerilla testing, I moved forward with my high-fidelity wireframe designs by creating a realistic prototype that closely resembles the final design of the project. 

 

Conducted (2) rounds of usability testing with 5 participants in each round to see if my design solutions met the deliverables.

 

Here are some of the Key Findings & Redesign Iterations:

Add To Cart

Findings

  • Users can't continue shopping/browse
     

  • Add to cart icon led to the My Cart page


 

Iterations

  • Quick add to cart modal was added
     

  • Shopping bag icon has an indication to let users know the item was added

Recently Viewed Section

Findings

  • Users can't view recent items on the home screen


 

Iterations

  • Implemented a recently viewed section on the home screen

FINAL DESIGN + TAKEAWAYS

EcoTheory_Design.png

What I've learned?

  • Follow Project Timeline - I set a timeline for myself to accomplish design goals to have clear direction and priorities for my project. The timeline provided a simple visual overview of a project from start to finish which lead to increased work efficiency within the schedule constraints.
     

  • Review Design Deliverables - Remember to review your user flows to ensure that you’re not forgetting any navigational paths as this may take you longer to reiterate your final designs.
     

  • Detach Yourself From the Project - At the beginning of my design process, I lost sight of the target audience because I was too passionate about this project. I made design decisions that did not cater to the overall user experience and I quickly realized that during guerilla testing before creating wireframes.

StyleGuide.png
EcoTheory_Design2.png
EcoTheory_Design3.png
bottom of page