Creating an e-commerce capable website for a local garden store
Published on Medium
Creating an e-commerce capable website for a local beauty store
Project Overview
Challenge


Gingko Gardens is a garden store in Washington, DC, successfully operating since 2000. However, the store doesn't do online sales, losing a big part of its revenue. Gingko Gardens wants to develop an online shopping experience, update visual look of the site, rework information architecture, and create user-friendly experience for loyal customers, as well as for prospective customers. Client wants to create a seamless shopping experience for people who are driven by recommendations. According to research done by Gingko Gardens, the new site should be focused on people, who are looking for gifts.

The Outcome

A high-fidelity prototype that highlights new features such a Best Sellers and Quiz, as well as seamless online shopping experience.



Project Scope
E-commerce, Web experience redesign

Tools
Figma

Role
UX Designer (Research, Visual Design, Interaction Design, Usability Testing)

Team
Self Directed, with feedback from mentors

Duration
2 Weeks
Design Process
1
Research
Market Research
Competitive Analysis
Comparative Analysis
Persona
Journey Map
2
Strategy
Problem Statement
How-Might-We Questions
Card Sorting
Site Map
3
Design
User Flows
Sketches
Wireframes

4
Prototype&Test
Mid-Fidelity Prototype
Usability Testing
Iterations
High-Fidelity Prototype
Next Steps
Research
Research Goals:
1. Compare and research competitors in gardening industry.
2. Compare and research indirect competitors known to be best in e-commerce experience.
3. Client provided information about target audience based on data of the store sales.
Competitive Analysis
It is crucial to research enterprises that pioneer in the market of gardening, as their experiences help me gather insights about their strengths and weaknesses. I analyzed 3 direct competitors, who are working at bigger scale, and 3 indirect competitors, who are best in their approach for online sales.
Strengths and Weaknesses
Feature Analysis
Comparative Analysis
Comparative analysis gives fuller picture of market situation, provides opportunity to learn from best practices among direct and indirect competitors. In my comparative analysis I want to focus on recommendations aspect. How these market leaders personalize shopping experience for their customers?
User Persona
Our persona, Michelle, is a gift giver. She's driven to make purchases by recommendations.
Journey Map
Scenario: Michelle needs to buy a gift to her friend,
who is into gardening. Event is tomorrow,
and Michelle doesn't have much time to shop.
She wants to buy a present online from local store.
Michelle's most frustrating point will be
when she's overwhelmed with different
options and doesn't know which present
to choose.
Strategy
Michelle needs a simple and fast way to buy a gardening gift online for her friends based on recommendations because she doesn't have a lot of time to choose.
Problem Statement
Create a seamless, fast and simple shopping experience online?
Provide personalization and recommendation online?
Create seamless experience for gift shopping?
How Might We help Michelle?
Card Sorting
My goal was to make strategic information architecture decisions that would improve overall website navigation. That's why I used card sorting method to understand how people organize shopping items in groups. Over 13 people completed my card sorting exercise. The majority of people selected these eight groups:
Shop
Plants
Tools
Watering
Pest Control
Lights
Trowels
Power Tools
Design
Once the structure was built, I sketched out paper wireframes for each screen starting from mobile app and then moving to desktop version of the site

After low-fidelity sketches I created mobile mid-fidelity wireframes.
Prototype & Test
Usability Testing
1) Buy an orchid
2) Take a Quiz
Before usability testing, it is important to set up test objectives, subject, methodology, tasks, and rubrics for measuring the result of the testing before conducting a test. I gathered Quantitative and Qualitative data. For my Quantitative data I was measuring: number of misclicks, success rate of completion of tasks and time to complete tasks. For Qualitative data, I asked my users about overall satisfaction of experience.
My performed two tasks:
Conduct Usability Testing
I then conducted both in-person and remote usability testing with 5 participants. I observed their mistakes, slips, and confusions they expressed in the process. I highlighted most common mistakes and impressions and condensed main patterns:
1) In the end of the quiz it was not clear what they are buying and how much it costs
2) More engagement with picture (enlarge, scroll)
3) Mobile app had too large image on the homescreen, therefore button with a call to action was in the wrong place where users needed to scroll down to press it.

Design Iterations & Final Prototype