OVERVIEW
Revenue and user time per session increased with new website layout
The garden center's website did not have a way to purchase products or book services virtually. The new design allows for the discovery of products and communication with the local store, a high priority for this local business.
At the conclusion of this end-to-end sprint, I presented a design that includes a number of UI design patterns and common elements from industry leaders. I tested the high fidelity product and users were able to navigate the tasks quickly.
CHALLENGE
The local garden center's website did not allow for users to purchase the products online or search what was available in-store.
THE CURRENT WEBSITE
UI AUDIT / EXPERT REVIEW
First I looked at the information the current website delivers to users when they load the home page. It is clear that this business prioritizes its Curbside Pickup, Delivery and Landscaping services over individual products.
This is not a surprise because the company gained many accolades for their services from local publications and agencies. I also noticed the company did not have a design system. The website also lacked information on the products that could help a user make a purchase. All of these observations gave me initial findings for this website project.
.jpg)
ACTION
I completed a competitive analysis, and created a user flow and journey maps using the insights from the given persona -- a customer that loves a deal.
ELEMENTS ON DIRECT COMPETITOR WEBSITES
Ginkgo's direct competitors are the landscaping company that was in second place in the ratings above and other garden centers within 30 mins of its location. I highlighted the key elements these competitors included in their website that can answer the main challenge -- customers finding products and purchasing them.
Strawberry Fields, the third place winner of the Washington City Paper's 2021 Best Landscape / Garden Designer Award, is 30 minutes away from Ginkgo Garden Center. The home page includes the following elements:
Layout Elements:
-
About Us text next to header image
-
Button Grouping for Services
Primary Navigation:
-
Home
-
About Us
-
Landscape Design
-
Installation Services
-
Consultation
-
Millie Farms
-
Strawberry Sprout Grant
-
Contact Us
Footer Elements:
-
MHIC License #
-
Address
-
Email
-
Best of DC 3rd Place
Urban Garden Center, is another local garden center providing the same products and services as Ginkgo Gardens. The home page includes the following elements:
Layout Elements:
-
Strip Image
-
Grid Blog Layout
Primary Navigation:
-
Home
-
About Us
-
Shop Online
-
Garden Services
-
Press
-
Contact Us
-
Accessibility
-
Terms of Use
Footer Elements:
-
WordPress Theme Credit
The Garden Center at Home Depot, is an option customers can choose to go because it is 16 minutes away from Ginkgo. The home page includes the following elements:
Layout Elements:
-
Grouping of Store Details, Curbside Pickup & Features
-
“Today’s Special” Strip (timer, types of items, savings, add to cart button)
-
Nearby Stores Map Feature
-
Sponsored Products
-
Trending in Your Neighborhood
-
Store Open Sensor
-
Delivering to Zip Code
-
Store Features
-
Recycling at Home Depot
-
Store Details
-
Customer Store Reviews
-
Popular Category Search Buttons
Primary Navigation:
-
All Departments
-
Home Decor, Furniture & Kitchenware
-
DIY Projects & ideas
-
Project Calculators
-
Installation & Services
-
Specials & Offers
-
Local Ad & Catalog
Footer Elements:
-
Customer Service
-
Resource
-
About Us
-
Special Financing Available
-
Shop Our Brands
-
Privacy & Security Statement
-
Cookie Usage
-
My Preference Center
-
California Privacy Rights & Report
-
Do Not Sell My Personal Info
-
California Supply Chain Act
-
Site Map
-
Store Directory
-
Mobile Site
USER PERSONA: MEET DAHLIA DEAL DIVER
What matters most to Dahlia is cost! Here are the characteristics of Ginkgo's key customer that I took into consideration for the new website design:
-
Comparison shops for price, even when it takes time
-
Seeks discounted shipping
-
Plans purchases well in advance
-
Tries new things if there’s a good enough offer
-
Shops online alone at home
-
Sometimes repeats purchases in error
-
Avoids complicated descriptions and product details
DAHLIA WANTS TO PLANT FLOWERS ON A BUDGET.
WHAT WOULD HER EXPERIENCE BE
ON THE CURRENT WEBSITE?
AND I EXPECT THIS TO BE HER EXPERIENCE
WITH THE PROPOSED DESIGN!
I ASKED MY TESTERS TO FIND ORANGE TULIPS
To test the design, I tasked the testers to find orange tulips and thought about some things Dahlia Deal Diver might do -- like create a wish list that matches what she budgeted for this project. I expected the flow to go like this.
RESULT
I created a new design system based on UI standards and industry elements. Customers are now able to discover products, purchase them and review recommendations for their projects.
DESIGN STUDIO - SKETCH SOME IDEAS
DESIGN STUDIO - MID-FIDELITY SCREENS FOR THE MOBILE VIEW
Proposed Home Page
Proposed Product Page
Proposed Cart Page
BEFORE, CUSTOMERS COULDN'T MAKE AN ORDER. AT ALL.
NOW, AN ORDER CAN TAKE THEM ABOUT 67.6 SECONDS!
During the remote moderated usability tests, I made the following observations:
-
All of the users were able to complete the tasks.
-
I didn’t have hotspots in some more intuitive places, but that didn’t stop users from completing the task.
-
Users were already used to the heart icon meaning lists/favorites, but it would be helpful to add a label in the menu bar for users who are not aware of the meaning.
-
Users wanted to add the tulips to the list from the general product page and not only the product details page.
THE NEW WEBSITE CAN LOOK LIKE THIS
BRING THE AGILE PROCESS TO YOUR VISION
