Bringing your florist store online
E-commerce website | UX\UI design | Concept Project |2 weeks sprint | Solo
Overview
This is my second project in General Assembly. The goal was to design the e-commerce experience of a small garden shop in London whilst still keeping its small shop appeal and great customer service.
The project was developed during a 2-week design sprint, the structure was in a group of 5 during the research-phase and solo development. This decision has been to make sure we had an amount of data that can show patterns and habits of the user and be able to deliver a realistic solution.
I followed the double-diamond design model and identified problems, resulting in a mid-fi prototype and a solution.
THE PROCESS
Ideal Double diamond
Breaking down the brief
I extracted highlights from the brief to focus on.The main importance for the company was to reflect their values and the friendly atmosphere that always been elevated their shop.
These are some quotes enclose their believes that helped me to keep myself focus :
“We want to maintain a high standard customer service, whilst supporting the local community as much as possible”
“Face-to-face contact is our main focus, however.”
“We want to offer our customers the best range of products at reasonable prices”
Discover —
To fully investigate the problem space of online shopping I decided to focus part of my research on how the user interacts with online websites.
Highlights :
“People scan, not read” — Steve Krug
in-fact just 20% of the content in a page is actually read on the average
Having said that.
“Busy sites tend to turn people away.They have a goal to achieve, but you’re making it harder for them to trust you.”
Therefore one of my main focuses is simplicity. How am I going to keep this simplicity?
- Easy browsing and scrolling
- Minimal usage of various fonts just to underline the content hierarchy
- Highly visual
- Given the information in order to provide a better understanding of the products
How do users shop online and in-store?
To fully investigate the problem space of online shopping, we conducted interviews based on topic maps, which includes in-store experience, online experience, and gardening shopping. Next, we analyze user's responses by looking for commonalities in the challenges users faced and their contexts.
What people love in store
- First-hand experience with the product (touch and see)
- Staff accessible when needed
- The environment made room for people to explore and be inspired
What people love online
- Can look at lots of items quickly
- Save items to list
- Able to check product details and availability online
Websites comparison
We conducted as a team, a competitor analysis between the most used gardening websites and I focused my research on how they have used different methods to categorize their product and organize the navigation.
To help prioritize the issues, I used a quadrant analysis to help rank the category of values by how important they are to the business.
We conducted qualitative methods: contextual inquiry and interviews to drive our planning phase. Where we interviewed 15 users and each one of us did
After that, we concentrated on gaining enough data from different types of users involved in the gardening practice especially when they buy online.
Information Architecture
Information architecture is created to organize content to be easily understood by users, and ensure its usability and find-ability.
I used the card sorting method which allows users to categorize the products in a way they think fit. Some difficulties were highlighted around the possibility of having too many categories, or the need for sub-categories.
I undertook 2 closed card sorts and 2 open card sorts. The trends :
- Some groups were more intuitive than other
- Many variations in naming the same category
the main discovery was the difference between novice and expert gardener
An expert gardener has a different approach to the shop online experience
I decided to analyze the novice gardener because is more aligned with the concept of simplicity
DEFINE —
Site map
The card sorting based on the novice gardener permitted to create user-focused navigation that needs a seamless website easy to identify where the items are been located.
Navigational Structure
Navigation is key for users to easily get around the site. This is how I structured :
- Global Navigation with Expanding nav with the main categories visible to the users and once the hover on the can easy visualize the subcategories too.
- Breadcrumbs allow users to see where they are vs where they came from.
- Filters can be used to further shortlist products, depends on their needs
- Supplemental Navigation in the footer to be able to easily contact the store
Time to meet our primary user
Moving forward on some key findings from the interviews that were fundamental to create the persona :
- The product needs to meet their particular needs
- Reviews and advice from the staff are a must to have
- They don’t know what they looking for until they found it
- They choose online shopping because they don’t have much time
One of the greatest tools for empathizing with the user is to create User Personas and treat them as actual individuals who will be using the product. I chose to create a persona of potential users. Welcome, Maya!
How we achieved Maya’s goals?
By offering personalized support with the following features :
- “Be inspired” page
- Personalized filters
- Instant chatbox
- “Pick day” delivery
I created a user flow with a scenario based on the happy path, that involved thinking through screen, choice, and action that Maya will do, in order to accomplish specific tasks within the website to achieve her goals.
SCENARIO
Maya needs to buy a new plant for her home
She needs the inspiration to choose among the possibilities available on the website and customized advice from experts
It needs to be pet-friendly as she has a cat
She needs it before Saturday morning
User flow
Based on Maya’s needs
This flow is the blueprints I’ll use to create sketches and prototypes.
DEVELOP —
IDEATION TO ITERATION
Next, I created quick layouts for each screen in the flow. Taking inspiration from other review-based platforms like Ikea, I played around with the ordering of filters and aligned them with general best practices. I also created a more eye-catching version of the “Be inspired page” page to help users find it easier towards the top of the page. I tried several different solutions to the problems that Maya had and iterated till I found the most cost-effective and simple solution.
I used: paper sketch — Balsamiq — Figma
USER TESTING
I performed preliminary validation by walking through the Lo-Fi sketches with 5 users. I received some good insight and incorporated them into the final design.
DELIVER —
Mid-fidelity wireframes
I decided to select the primary pages that bring alive the idea of personalized support that reflects all the values that the company wants to keep for the online experience.
The homepage has clear navigation and gives the possibility to have a guided browsing or a universal search box for the user that already knows what they are looking for. Displaying the core values of the company to show transparency and gain the trust of the users
Be inspired page is a fundamental area, which is a reflection of user-centered design, each category of our product has a section and every user can simply access using the global navigation. The page is structured with clear photos of personalized products that the user may be interested in. Giving inspirations with the most frequently purchased items and Instagram photos from customers that are using the products at home as Groovers Grove doesn’t want just to sell products, but lifestyles. That’s why Instagram sales are increasing, and every big brand has an account, that allows customers to shop.
The product page shows photos from different angles simultaneously + lifestyle photos, an accurate and comprehensive demonstration of its properties as well as helping the customer imagine the product. A product group info is displayed using collapsable/expandable lists to allow users to dive into the details as they wish, compose by description, tips, reviews all written by customers and the knowledgeable staff.
Chatbox is present on every page and allows one to speak instantly with a member of the staff for any doubt or question the user could have while browsing \ choosing the product.
The delivery page offers a simple summary of what the user is going to buy within just a few clicks. Adding the possibility of selecting the day that the item has to be delivered.
Prototype
You can view the mid-fidelity prototype on Figma here.
Don’t forget! Maya needs to buy a new plant for her home She needs the inspiration to choose among the possibilities available on the website and customize advice from experts It needs to be pet-friendly as she has a cat She needs it before Saturday morning.
Next steps
I will add an additional persona based on the expert gardener, it’ll be interesting to find out the pain points and habits of knowledge and experienced users and evolved them into possible ideas to apply and merge within the already created.
More usability testing, driven by observations of real users and of their interactions with the design
Offer a mobile app customer experience that would offer more user benefits. For example:
- Apps can send push messages that keep customers engaged with your e-store.
- App icons are visible when a user explores their phone, keeping their brand awareness high.
- Apps can retain user data, enabling one-click checkouts and minimizing load times.
For these reasons (and a few more), 40.4% of all users buy more of a brand’s goods after downloading its e-commerce app. 45.9% also end up visiting their physical store more often. These numbers show that users not only use apps but take action after visiting them. Compare this to mobile websites, which barely retain 40% of all visitors past the first few seconds, and it’s clear why apps are important for brand loyalty
Reflection
- Start broadly and keep narrowing down based on the double diamond model. I started this project with an idea: how can I make the online experience pleasant as the in-store. Then, based on my interview, interviewees mentioned that they needed help in daily tasks, be able to receive advice, and have a customized experience based on their needs it’s what’s important. Indeed, they preferred to ask friends or families for help but more often than not, friends and families can’t help them. So the brief was narrowed down to deal with daily tasks based on potential users. A clearer brief had helped me achieve a better focus in research.
- Business needs are equally important as user needs, especially at the early stage of a product's life. A product cannot survive by only being user-centric. It is also indispensable to incorporate business strategy into the UX process.
In the research phase, I worked with 4 other UX designers. We not only shared findings and insights on the subject matter but also learned from each others.
THE OUTCOME
Grovers Grove’s high values of high customer service and face-to-face are reflected in the online store.
Through validation studies, I showed that 5/5 users were able to navigate to the top things to do page and use the filter and sort functions to narrow down their results as needed. The best way to naturally find issues and pain points are by testing. Users never do what is expected, and patterns reveal themselves after having just a few users test a product.
Yay! You made it to the end! Thank you for reading.
Thank you very much for reading my case study. If you’d like to know more about the project, my process, or simply just would like a chat, feel free to say hi on LinkedIn , or visit my portfolio
