A redesigned e-commerce website that guides customers efficiently, provides a delightful browsing experience, and aligns in-store and online branding.
Asrai Garden is a retail outpost known for stunning floral arrangements and luxurious fine jewelry. (You might know Asrai Garden’s owner, Elizabeth Cronin, as one of three judges on the HBO Max original, Full Bloom - a competitive floral arranging show!).
Asrai Garden's current e-commerce site is not aligned with Asrai Garden’s in-store experience - aesthetically or in ease and delight.
For this conceptual project, I redesigned the Asrai Garden website in order to guide the customer more efficiently, enhance their browsing experiences, and align in-store and online branding.
To begin this project, I visited one of the brick-and-mortar locations for a refresher on the in-store experience.
The digital shopping experience (homepage pictured below) did not deliver the same outcomes - the colors are drab, products are mislabeled and the browsing process is unpleasant due to poor site navigation.
I identified two primary pain points to focus on through my heuristic analysis:
1. Digital branding that is dissimilar from the in-store experience
2. Disorganized information architecture (site navigation)
Next I conducted user interviews to understand as much as possible about Asrai Garden's customers.
After interviewing Asrai Garden's target audience about their online shopping habits and preferences, and analyzing their responses using an affinity map, I identified that users value:
I also importantly found that while users do shop online for most products, they only shop in-person for local flowers. If the user buys flowers online, it is through a bigger company like 1-800 Flowers.
With an understanding of the current in-store and digital brand experiences, Asrai Garden's target audience and their pain points, I developed a persona to keep focused on the user throughout the ideation and prototyping processes.
Meet Ava:
In order to validate my heuristic analysis, I performed user task analyses. I asked users to browse the site and add items, including a medium bouquet and a necklace, to the cart and to checkout.
Here's how the task went for Ava, our persona, and the resulting pain points, opportunities, and recommendations.
Open Website →
Hover Header Navigation →
Browse for $1,000 necklace →
Browse for flowers →
Add flowers to cart →
Branding dissimilar
from store →
Disorganized Navigation →
Misconception that sort feature is broken→
Navigation is misleading/
confusing →
Multiple required fields that are not clearly marked →
Improve visual design→
Make it easier for customers to browse →
Show user that they can sort →
Reorganize to make browsing more enjoyable →
Make the process of adding flowers to cart simpler →
ImplementBranding/style guides
Use card sorting to reorganize - make intuitive
Test sort feature options to determine best solution
Simplify copy
Redesign add-to-cart and error handling
The original site navigation, as you can see below, was overwhelming. Almost every secondary and tertiary navigation item was listed under "shop all" and there was no affordance to suggest to the user the difference between secondary and tertiary navigations. This translated to users spending more time considering what to click, delaying and complicating their browsing experience.
Here's another view, a map of the original navigation, to help visualize the imbalance that led to delayed browsing.
My goal was to redesign the global navigation to more seamlessly direct customers to the categories they were most often shopping. In order to develop the best site map I performed competitive and comparative analyses and ran open card sorts using OptimalSort. Instead of maintaining rarely-clicked items in the global navigation, I split the "shop all" categories into the headings that were most often assigned in the card sort.
See where I started! These are the sketches that you'll see evolve with feedback and testing through the next few steps.
I used figma to translate my sketches into a functional prototype for usability testing. Below are my notes and wire iterations.
