From Roots to Online Checkout
User experience and UI mocks for a local plant nursery ecommerce website.
Embedded Files
Client
Client
Our hypothetical client was Butterfly Blooms Plant Nursery, located in the suburb of St Peters in Sydney, Australia. It is a family-run plant nursery that has been serving its neighborhood for over 20 years. The nursery is renowned for its carefully curated selection of plants, including rare and hard-to-find varieties, that are known for their exceptional quality.
The Problem
The Problem
Butterfly Blooms prioritises face-to-face contact with customers, but now seeks to expand its business online to support the local community through eCommerce. It aims to showcase its curated products while maintaining its "small local shop" appeal and exceptional customer service. Unlike Amazon, Butterfly Blooms focuses on hand-picked quality over quantity in its inventory.
The Goal
The Goal
Design an eCommerce desktop website for the target audience determined from research
Keep the “small local shop” feel of the business even online
Consider practicality and feasibility of design for the business
Our Website Design
Our Website Design
Plant Quiz for Unsure Shoppers
Plant Quiz for Unsure Shoppers
Our main feature for meeting the need of shoppers like Avery to visually find a suitable plant for their space while shopping online. This quiz onboarding tool helps her quickly decide in 5 steps which plant selection to look at within the ecommerce site of Butterfly Blooms.
Also included 30-day Guarantee at the top of the screens to assure Avery is comfortable buying plants online because she can return her plant if she is not satisfied with the plant.
Visualising the Scale
Visualising the Scale
Avery is able to visualise the scale of the plant by clicking through the different images and by reading the scale of the plant product.
Dropdowns for Overview
Dropdowns for Overview
We made the main nav bar with dropdowns of categories for a quick overvew of what the plant nurery offers.
2-week Design Sprint in March/April 2023
2-week Design Sprint in March/April 2023
As part of the General Assembly UX Design Immersive course.
Team: Ava Vlahogiannis, Dotti Li, Jessica Wong, Natalie Orsos
My Roles
My Roles
Elected project lead
User researcher
UX designer
UI designer
Deliverables
Deliverables
Website Design
Business & Market analysis
User research
Lo-fi to Mid-fi prototyping
Usability testing
Project Tools
Project Tools
FigJam
FigmaDesign
Zoom & Slack
Google Docs & Slides
Market Research
Market Research
Where does Butterfly Blooms sit within the market?
Competitive Market Analysis
Competitive Market Analysis
We mapped the direct competitors of Butterfly Blooms to better visualise who is competing with this business nearby.
We found 8 competitors of smaller and larger businesses near Butterfly Blooms.
E-Commerce Market Mapping
E-Commerce Market Mapping
We then looked at the ecommerce sites of the above competitors and grouped them according to how local or mainstream they are and according to what audience they mostly cater for, customers of either high or low plant knowledge.
Here we could see a gap in the market where Butterfly Blooms could target an audience with low plant knowledge on their ecommerce website. This would have to be followed up with user research.
User Research
User Research
To understand the experiences and behaviours of people shopping at a nursery.
To engage what process people go through when purchasing nursery items.
My team and I were ready to buy some plants!
Over 3 days we...
visited 12 different nurseries (in Sydney and in Melbourne)
talked to customers, nursery owners and staff members,
each of us conducted 10 contextual interviews,
In addition we interviewed some friends and acquaintances about their plant buying habits, behaviours, and past experiences shopping for plants in-store or online.
Thank you to the 48 interviewees who contributed to this project!
Thank you to the 48 interviewees who contributed to this project!
With this plethora of qualitative data, our team got back together to synthesise all our insights.
With this plethora of qualitative data, our team got back together to synthesise all our insights.
Understanding the Users
Understanding the Users
We needed to understand users main behaviours when it comes to shopping for plants.
By mapping the affinities of the 500+ user insights, we were able to derive common trends and behaviours.
What trends did we see?
What trends did we see?
We observed these 4 main trends from our user research.
I have only included one example of insight per trend here.
23 people said they value expert help.
35 people mentioned they want an easy, clear way to purchase plants.
16 people emphasised they care about the quality of the plants before purchasing.
28 people said they research nurseries & their plants before visiting the nurseries.
We also found that the largest group of plant buyers were casual buyers with low plant knowledge which had reinforced an opportunity to fill in the beginner plant buyer gap we saw in our ecommerce market mapping earlier.
Building Empathy
Building Empathy
As a team, we developed an Empathy map to foster a shared understanding and deeper empathy towards our users.
By collectively writing down these points, we began to see the primary characteristics and behaviors of our main target audience. The next step of creating a Persona was made easier by doing this task together.
Our Target Audience
Our Target Audience
We created a persona based on our user research insights and our empathy map. Her goals, feelings and characteristics are representative of the larger group of nursery buyers previously interviewed. Having a deep understanding of Avery as our target audience was fundamental in how we proceeded to answer more important questions, what problems to solve and what actions to take.
So from our research we know that Avery is someone with low plant knowledge but she cares about her interior space and her goal is to find the most suitable quality plant for her space. She has several needs to reach this goal.
However she comes across digital pain-paints that stop her from reaching her goal online,
unable to assess the plant’s scale, aesthetics and health,
unable to touch and feel the plants.
Whilst one may try to address all her needs & paint points at once, we believed that it is more realistic and cost effective to prioritise what her needs are. We decided that solving her need for an accurate visual representation is the lowest hanging fruit that will make the most impact for Avery.
The Lowest Hanging Fruit Problem
The Lowest Hanging Fruit Problem
Avery needs a way to visualise the scale of plants so that she buys the most-suitable plant for her home.
Avery needs a way to visualise the scale of plants so that she buys the most-suitable plant for her home.
Current User Journey
Current User Journey
What steps is Avery taking currently and how does she feel at each stage of her plant buying journey?
Avery aims to visualise the size of plants while browsing online, with the objective of finding the perfect indoor plant for her apartment's dimensions.
Avery follows through a journey of browsing online for inspiration of possible indoor plants for her coffee table before looking to see if her local nursery have the plants available.
She feels undecided during her research phase as she is unable to get a real sense of scale of the plant or it’s visuals and feels confused .
She buys the plant hopeful that it is going to be suitable for her space and feels unsure . She receives the plant and it is not what she expects so she feels disappointed .
Where Could we Improve The Experience?
Where Could we Improve The Experience?
During Research
During Research
To build on ‘inspo researching’ behaviour
During Consideration
During Consideration
Improve images to have a better sense of scale
To provide online support and advice
Curate online offerings to her interior space
During Purchase
During Purchase
Re-assure buyer with some sort of guarantee or return policy
Igniting Ideas
Igniting Ideas
It was time to ideate, to think of as many ideas as possible to meet the above problem.
Each team member generated "How might we" (HMW) statements thinking of how to amp up the good, remove the bad, explore the opposite, question an assumption, or by going after adjectives of the problem statement.
This approach helped us brainstorm on possibilities, however it made the process longer than it needed to be. We generated too many options which made it complicated to choose from even with voting.
A solution we found for next time, was to come up with 3-4 HMW statements as a team and move on.
Eventually...we voted for 3 main HMW statements as a team:
Eventually...we voted for 3 main HMW statements as a team:
HMW visualise the most accurate sized plant for Avery`s apartment?
HMW remove the uncertainty around scale when Avery purchases plants?
HMW understand Avery’s apartment’s situation to ensure she buys the most suitable plants?
Crazy-8 Sketches
Crazy-8 Sketches
Ideation continued with 3 rounds of Crazy-8s, sketching 8 ideas in 8 minutes for each HMW statements to generate a multitude of ideas within a limited time frame.
From the Crazy-8 sketches we started formulating these main ideas:
From the Crazy-8 sketches we started formulating these main ideas:
Visual filter
Visual filter
Filters to quickly and easily narrow down the selection of plants as per the users`s need.
Plant in Context
Plant in Context
Images of the plant against everyday items or a human would provide a better sense of scale during the online shopping experience.
Customer Support
Customer Support
Online customer support to get advice on the right sized plant.
Which Ideas are Worth it?
Which Ideas are Worth it?
We then judged our main ideas by business feasibility & customer value.
Plant in Context
Plant in Context
Low Business Feasibility
Visual filter
Visual filter
Low-Moderate Customer Value
Plant Quiz
Plant Quiz
High Customer Value & Business Feasibility
High Customer Value & Business Feasibility
We believed that having a plant quiz as onboarding would have the highest value to the business and the customer compared to the other ideas.
We decided to research this deeper.
Benefit of Quiz
Benefit of Quiz
Provides accurate product recommendations and increase customer conversion rate.
Once customers take the quiz, can give them accurate product recommendations that will influence their purchase decision.
NatureWise, a supplements brand, has a 25% conversion rate through their quizzes, meaning one in four customers make a purchase after taking the quiz.
Building the Architecture
Building the Architecture
During this stage of the project, our ecommerce website solution started to take shape through finding answers to:
1. How to construct the plant quiz?
2. Where to place this within the site architecture?
Finally, we planned the information architecture of the whole website.
Ecommerce Quiz Comparisons
Ecommerce Quiz Comparisons
Compared quizzes from naturewise, The Good Plant and Co, Matcha Bar, and Curlsmith to learn more about the structure, length, style of each so we be inspired how we could design our plant quiz.
Our main findings:
Our main findings:
5-10 questions - 10 seems too lengthy
Breadcrumbs - used to track progress of quiz
Icons/Images to aid decision-making
Customer emails asked (3/4 with discount offer)
1-3 product(s) suggested at the end - avoid Paradox Of Choice
Quiz Flow
Quiz Flow
What questions Avery would need to answer in order to find the most suitable plant for her room?
We created a task flow that shows the happy path of Avery starting and completing the plant quiz after which she would see a curated list of plant suggestions for her interior space to choose from.
We imagined a short and concise quiz , having 5 question.
User Flow of Website
User Flow of Website
Creating a User flow has helped us visualise how Avery would move through the journey of taking the quiz, curating a plant selection and purchasing a desired plant and pot, making decisions along the way.
What About the Main Nav Bar?
What About the Main Nav Bar?
In order to get a better sense of how other main competitors have their site arranged we compared the main navigation bars of
Bloomscape, Flowerpower, and The Good Plant co.
We saw that having a drop down from the main nav bar was common practice to have a quick overview of product categories. Butterfly blooms only lists their categories once clicking into a page from the main nav bar. We thought to change this as shows in the site map we created above. Meanwhile, we were thinking to have the Plant quiz in the hero section of the landing page as the main Call-to-action for new customers.
Mid-fi Testing
Mid-fi Testing
We asked 5 users to test our prototype over Zoom with the the given scenario of they are looking online for a small, low-maintenance, indoor plant, for their living room coffee table which receives a lot of light.
They wish there was a quick and visual way to look for plants that catered to their room.
They wish there was a quick and visual way to look for plants that catered to their room.
Results
Results
from 5/5 users:
from 5/5 users:
Quiz was easy to find and was quick to complete.
Visual representations of the Quiz made choosing easy.
Overall Checkout process was completed with ease.
Always Space for Improvements
Always Space for Improvements
Our users pointed out some important but easy to fix problems during the navigation of the site.
3/5 users
3/5 users
said why the Next button, screen progresses to the next after completing the task anyway.
said why the Next button, screen progresses to the next after completing the task anyway.
We removed the Next button.
2/5 users
2/5 users
wanted to go back to previous question but had no option to do so.
wanted to go back to previous question but had no option to do so.
Added a Back button instead of the Next button.
3/5 users said
3/5 users said
they are missing the Back button to be able to go back to the list of products they saw previously.
they are missing the Back button to be able to go back to the list of products they saw previously.
We added a Back option for users.
Final MVP
Final MVP
Plant Quiz for Unsure Shoppers
Plant Quiz for Unsure Shoppers
Our main feature for meeting the need of shoppers like Avery to visually find a suitable plant for their space while shopping online. This quiz onboarding tool helps her quickly decide in 5 steps which plant selection to look at within the ecommerce site of Butterfly Blooms.
Also included 30-day Guarantee at the top of the screens to assure Avery is comfortable buying plants online because she can return her plant if she is not satisfied with the plant.
Visualising the Scale
Visualising the Scale
Avery is able to visualise the scale of the plant by clicking through the different images and by reading the scale of the plant product.
Dropdowns for Overview
Dropdowns for Overview
We made the main nav bar with dropdowns of categories for a quick overvew of what the plant nurery offers.
Next Steps
Next Steps
If this was implemented by Butterfly Blooms...
Conversion rate
Conversion rate
Measure the percentage of visitors who complete the plant quiz and go on to make a purchase. A higher conversion rate indicates that the quiz is effective in guiding users towards plant selections that match their preferences and encourages them to buy.
Customer Satisfaction
Customer Satisfaction
Gather feedback from users who have completed the plant quiz to assess their satisfaction level. Use methods such as surveys, interviews, or rating systems to gauge user sentiment and identify areas for improvement. Higher customer satisfaction indicates that the quiz is delivering valuable recommendations and a positive user experience.
Abandoned Cart Rate
Abandoned Cart Rate
Assess the percentage of users who abandon their shopping carts after interacting with the plant quiz. If the quiz is effective in guiding users to suitable plant selections, it should help reduce the number of abandoned carts and increase the overall conversion rate.
My Reflections
My Reflections
What went well and what would I do better next time?
Helpful Visual Roadmap
Helpful Visual Roadmap
Having a visual roadmap set out from the beginning of the project helped us tremendously to keep on track.
Refer Back to Research
Refer Back to Research
We were slow and steady with our progress throughout the project and we got stuck on many occasions. These times once we revisited our user research and market research we were able to proceed. So taking a step back when being stuck worked well for us.
Need Regular Reflections
Need Regular Reflections
We have learnt that the project can be made more fluid if we reflect and take notes after each task for 5 minutes on why we did it, what we had gained out of it and what we should do next. We ended up analysing and preparing for the final presentation a lot longer than we anticipated.
Page updated
Google Sites
Report abuse