My Role
UX Researcher and Designer
3 weeks
Figma, Figjam, OptimalSort


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.


Detecting Usability Issues

To begin this project, I visited one of the brick-and-mortar locations for a refresher on the in-store experience.

Photo of Asrai Garden's brick-and-mortar shop on North Ave in Chicago, IL
Screenshot of Asrai Garden's homepage on Jan 23, 2023

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)

Getting to know the Users

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:

Icons showing findings from user researtch: that Asrai Garden's customers value convenience, monetary value, easy returns and reviews

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.

An icon representing a finding from user research: that users exclusively shop in-person for local flowers, not online
Persona Creation

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:

Persona card describing Ava: 
Age: 34
Work: Occupational Therapist

Bio: Ava is an Ava is an Occupational Therapist who is passionate about bettering her local and global communities. She leads a busy life so leans on online guides to learn about the best spots to shop and does almost all of her shopping online, too. Although she loves the convenience of online shopping, Ava wishes the experience shopping local was as seamless as shopping big-box so that she could have fun living her everyday values through shopping for herself and others!

Goals: To have fun shopping online!
To shop local and/or support small businesses

Frustrations: It takes so much longer to use local/small business websites
There’s not often an option when online shopping to see products on people who look like me
Testing the current site

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 →

Pain Point

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

Information Architecture

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.

Screenshot of hover state on Asrai Garden's original site global navigation

Here's another view, a map of the original navigation, to help visualize the imbalance that led to delayed browsing.

Original Site Map with five global navigation items - Shop All, Floral, About, Forever Jewelry and Black Florist Fund. 

under Shop All, there are 31 secondary/tertiary navigation items. There are 3 under Floral, none under About, none under Forever Jewelry and 1 under Black Florist Fund.

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.

Redesigned Site Map
Brainstorming & Sketching

See where I started! These are the sketches that you'll see evolve with feedback and testing through the next few steps.

Mid Fi Design & Testing

I used figma to translate my sketches into a functional prototype for usability testing. Below are my notes and wire iterations.

Hi Fidelity Design
Next Steps & Reflections
What I learned:
It was very rewarding working on a conceptual project for a brand I love because I had to put into practice what I learned about putting my own biases aside and focus on empathy for the users I spoke with. I also learned a ton through market research about information architecture during this project.

What I'd do differently next time:
Next time I wouldn't jump the gun! I was so eager to get started with UI that I built wires in Figma before I finished my research. It turns out they taught us to be patient and focus on functionality first for a reason - I understand now that my time was wasted on those initial wires because they didn't account for so much of what I learned during research that I ultimately had to scrap them and start over. I understand that the process is never the same on any two projects but next time I'll rationalize and prioritize time management.
© Annie Glasser
Email  | Linkedin | Resume