top of page
Product image.png

Olive Branch Inc.

Project overview: Design an e-commerce website for Olive Branch Inc.
MY ROLE

  1. Logo & Style Guide

  2. Research & Analysis 

  3. Design Process

  4. Usability Testing

  5. Iteration

  6. Final Presentation

Tools

Figma, FigJam, Google Form, Maze, Google Analytic

CLIENT/DATE/DURATION

Client: Olive Branch Inc.
Date: 2/7 - 4/28
Duration: 3 Months

The Challenge or Problem Statement

Olive Branch is a start-up company that focuses on education, sustainability, safety, and experiences. The main goal of Olive Branch is to educate people about plants and provide the opportunity to purchase plants along the way of the learning experience. 

 

As a start-up company, Olive Branch needs to create a website for its educational purposes. Furthermore, identifying potential users along with user interest is a key aspect of building a successful product, and a solid user research profile is a must.

Logo & Style Guide

As we defined the core value for the company, I came up with different sketches of logos and later built them in Figma. Furthermore, I also created a style guide including our font choices and color palette that fits the purpose of the company.
Logo Sketches
logo sketch.png
Style Guide
stlye guide.png
Research

Research & Analysis

I came up with Qualitative & Quantitative Research to identify our target audience and empathize with our users. I also came up with Persona & Empathy Map to figure out the user's pain point and interests.

 

Qualitative Research - 1 hour Interview with 5+ potential users

Quantitative Research - Survey Questions posted on social media and responded by 50+ participants

Research Result
research result.png
Persona
Persona (2).png
Empathy Map
Empathy Map (1).png

Wireframe & Prototype

After identifying our target audiences and user interests, I started with multiple sketches to decide on the layout of the websites, and later on created a prototype.
Design & Iteration
Wireframe & Sketches
sketches.png
First Prototype
Frame 6.png

Usability Testing

Once the prototype is created, I came up with two usability testing to collect feedback from potential users.

Test 1: A/B Testing - Which version of the Plants page is preferred by users
Test 2: Shopping Testing - An evaluation of the user’s ability to make it through the checkout process
A/B Testing
Version A
Learn page option 3.png
Version B
Learn page option 1.png
Shopping Usability Testing
orchid.png
checkout.png
check out confirmation.png
image 2_edited_edited.png
image 2_edited_edited.png

Usability Testing Findings & Iteration

After conducting usability testing with our potential users, we summarized all the feedback and suggestions and proposed a to-do list to create further implementation options.
​
  • Separate Learn and Shop feature
  • Difficult to navigate back to the previous page
  • Add a search function
  • Add a shipping address section on the checkout page
  • Some plant pictures are not aesthetically appealing
  • Icons are too small and unclear
  • Shopping checkout is straightforward
Before 
image 3 (1).png
After
image 2 (1).png
image 1.png
   What was changed:
  • Separated plant page into an e-commerce site and a learning blog
  • Implemented a filtering feature that allows users to sort alphabetically
  • Added search bar and search icon on each page
  • Created a recently viewed section as a drop-down menu when users click on the search box
  • Added login/signup function on each page
  • Included shopping cart icon
Before 
image 6.png
After
image 7 (3).png
   What was changed:
  • Added breadcrumb to allow user to navigate to previous pages
  • Removed unnecessary boxes around global navigation & plant info section
  • Removed the orange header to make the CTA button more prominent
  • Added a shopping cart icon & login/signup feature
  • Changed the icon for plant information from vertical to horizontal orientation

Demo

Click me: Prototype Demo
Deliverables
Frame 12.png

Challenges & Conclusion

   I have learned so much through the three months period working for Olive Branch. We started by defining         the company's core values & company style guide, doing user research, creating prototypes, conducting           usability testing, and iterating based on user feedback. 
   During this project, I learned: 
  • How to communicate with my colleagues
  • Time management and creating MVPs
  • The importance of components and variants
  • Assign different tasks to each teammate based on individual strengths and weaknesses
  • Implementation of UX techniques (personas, empathy maps) and UX research

Future Scope

   While completing the design of Olive Branch's website, we also came up with some possible future scopes     of work to be undertaken.
  • Create a mobile app version
  • To-do list functionality for the mobile app
  • Automatically send plant care emails when customers purchase plants 
  • Like features
  • Glossary section
Mobile Version Mock Up
Android Large - 8.png
Android Large - 4.png
Android Large - 10.png
Android Large - 3 (2).png
bottom of page