Setting up shop
Building an e-commerce solution for a house plant depot
Urban Jungle
Urban Jungle is a small garden depot in Philadelphia offering plants & supplies. The benefits of adding e-commerce to their the website, became clear during the pandemic.
PROJECT OVERVIEW
GOALS
Use a user centered research approach to discover, refine and test the best e-commerce solution for Urban Jungle, as requested by plant lovers.
ROLE
UX & UI Designer
RESPONSOBILITY
-
Research
-
Design
-
Iteration
-
Heuristics
-
Visual design
-
Prototyping
-
Testing
TIME
2 weeks
TOOLS
Axure
Procreate
Miro
Optimal Workshop
User research
To start I wanted to reach out and hear directly from real plant lovers what makes an amazing plant buying experience.
INTERVIEWS
Completed a series of user interviews probing for insight around house plants and shopping.
AFFINITY MAPPING
User comments were grouped into similar sentiments, making it clear what our users were saying.
INSIGHT STATEMENTS
Using what I heard here I was able to begin to give the users a voice. I pulled out the core sentiments they offered.
"I often buy plants as gifts."
"I shop for plants visually."
"I love the conveniences of online shopping."
"I like shopping with product reviews."
"I use technology to care for my plants."
Personas
Now armed with valuable insight, I was able to craft two different types of Urban Jungle users. Their voices will help shape our solutions!
Chris
The collector
"I wish I could get plants delivered to my house."
Bio
-
Lives in a major city and works from home
-
Spends tons of time at home and loves keeping a big green collection of plants
-
Does not drive and uses delivery services regularly
Frustrations
-
Local plant shops don’t often have a huge selection
-
Difficulty visiting plant stores without a car
Needs
-
A way to find obscure and rare plants for their collection
-
A way to buy plants without access to a car
Bio
-
Lives in a small town with few local plant shops
-
Enjoys visiting friends and family often
-
Thoughtful and giving
-
Always arrives with a gift
Frustrations
-
Difficulty getting to plant shops
-
Overwhelmed when walking into a garden depot
-
Doesn't want to spend a bunch of time researching a small gift
Needs
-
A quick and easy way to get small gifts for many occasions
-
To know what plants are low care and great gifts
Sam
The Giver
"I need a quick and cute housewarming gift."
Problem Statement
With more user perspective, we refined their wants, needs and frustrations into core elements. It was time to craft a concise statement that encapsulated what the users needed solved.
Chris needs a more convenient way to find and buy houseplants and supplies from home.
Comparative Analysis
Getting insight from our users is great, but I also had to take a close look at the other services that compare and compete in this space.
DESIGN & STYLE
-
Observe and analyze the layout and style used
-
Identify persona type
-
Summarize experience
LIFESTYLE - BASED
-
Longer user flow
-
Speaking to persona
-
Browsing is part of the experience
WAREHOUSE STYLE
-
User flow begins with a large inventory presented all at once
-
Simple but easy to use interface
-
Designed for the user who wants to find and purchase what they want as fast as possible
OPTIONS - BASED
-
User flow directs to large categories that refine as you go
-
Very inclusive
-
Designed as a journey to find the perfect plant
The users I connected with let me know they preferred a quick and easy shopping experience making me take notice of the simplicity of the warehouse style design.
FEATURE INVENTORY
I performed feature inventory on our comparators against features users cared most about , helping me decide where to focus my design efforts.
TASK ANALYSIS
I performed task analysis on comparators to analyze the flow design for their most core services. Because users let me know they prefer a quick and simple process, I focused on creating a concise design.
User Flows
Now that I understood exactly how plant lovers like to shop it was time to begin the design process. I started here with three different user flows based on scenarios provided by research.
CHECKOUT FLOW
In this scenario, the user searches for a product and buys from the product page.
PRODUCT DISCOVERY FLOW
The user uses the search feature to find a product. Focused on providing immediate availability to features users said were important.
CONTACT BUSINESS FLOW
The user reaches out to the business about an order. Again I wanted to put important features at the head of a short flow.
Organizational Structure
Again I wanted to design with my users voices in mind. To organize the array of products offered, I had users perform multiple card sort tasks. Each iteration of the sort made it more clear as to how plant lovers categorize.
CARD SORT
Again I wanted to design with my users voices in mind. To organize the array of products offered, I had users perform multiple card sort tasks. Each iteration of the sort made it more clear as to how plant lovers categorize.
-
Although the users didn’t agree on exact terminology, the categories they built ended up mostly similar.
​
-
Perhaps because there can be many factors to consider concerning plants and supplies, grouping seemed intentionally simple. Most users preferred to simplify options by sorting plants by small, medium, and large, with a few exceptions. These users sorted pottery using the same options.
​
-
These category choices were clear with closed sort.
Navigation
With all items categorized, I built the categories out into a navigation scheme.
SITE NAVIGATION
Because I adding only one additional core page to the site, I opted to keep the existing navigation format for the navigation links.
PRODUCT CATEGORIES
With the support of the users, I was able to format the store inventory into a core set of 4 categories, each with their own subsidiary sections.
SITE MAP
I built a redesigned site map that included all of our new content and categories.
Design and iteration
From here we set off to see what worked.
SKETCHES
Designs, layouts, components, are tested, improved, and redesigned, only to be tested and improved some more!
WIREFRAMES
As these designs are developed and tested, solutions can be rendered in higher fidelity allowing for a working prototype to be built for testing.
Usability Testing
Then, we wanted to see where we could improve.
GOAL
-
Collect real user data and feedback to uncover pain-points, insight, and opportunities
METHOD
-
4 Remote moderated tests
-
User must add 2 ceramic grey pots to their cart.
-
User must find a plant by searching its name.
-
User must contact the store support.
METRICS
-
Dialogue around impressions and expectations
-
Ability to successfully perform tasks
-
Time to complete the task
-
Number of clicks
-
Error rate and what issues were encountered
Outcomes and next steps
Analyzing final testing rounds and preparing for the future.
SUCCESSES
-
All users were successful in completing all tasks.
-
Users navigated the site and located items easily.
-
Users interacted with related items category.
METRICS
-
Average user completion time: 1:45 seconds
-
Average number of clicks: 12
-
Errors using store menu due to lack of feedback
OPPORTUNITIES
-
Users wanted a more functional search when looking for specifics.
-
Some users found the location of the Cart Card confusing
-
Some users wanted to move the Chat button out of the way.
-
Users wanted a cleaner store menu with feedback
REFLECTION
My biggest take-aways from this project are around the importance and impact of designing categories that users will intuitively understand. Though it takes many rounds of iteration, developing the most effective content categories went on to support the development of effective site navigation user flows.
​
In the future I'd love to develop these skills on a larger project and see how a larger user base might respond to categorization inquiries.