Ricky's Flower Market
concept project
Role: UX/UI Designer, Information Architect
Date: July 2020 (Two-week design sprint)
Team: Finna Wang
Tools: Sketch, InVision, Optimal Workshop, Axure, Maze
Project overview
For this concept project, I was tasked with finding a local retail business that did not currently have an e-commerce store on its website. As someone who's new to plant parenthood, I naturally gravitated toward Ricky's Flower Market in Somerville, MA. Ricky's is a one-stop shop garden center and plant nursery. I spent two weeks researching and designing a prototype website for this business, so that patrons could shop online for all their plant needs.
Conducting research
Current brand representation
The first thing I did was observe the company's existing online brand representation. There were two navigation links on their website, neither of which highlighted the hundreds of items I knew were available for purchase from the nursery (based on what I'd seen on their Facebook Live posts). Some of the links were broken, and business hours were inconsistent with what was on Google Maps. There was a lot of work to be done!
Visiting the site
I hopped on my bike and headed to the store to get an idea of the inventory, because I was intrigued by what I'd seen on Facebook, as I mentioned earlier. I came across this display for a DIY "terrarium buffet," as the sign called it. I already knew I was going to create user flows for browsing and buying individual items, but this got me thinking.
How might we design a feature that allows users to buy customized products?
User interviews
I conducted five user interviews with potential users, from which I derived 15 I-statement that I divided into two different user personas. Some of the key I-statements derived were:
- I highly value convenience.
- I get my plant care info from blogs and websites.
- I prefer to shop locally.
- I'm influenced by trends and scarcity.
- I use plants as home decor.
Fun fact: when asked "What will be your next plant purchase?" two of the interviewees said they would buy a Pilea peperomioides (seen on right). So trendy!
Competitors
When it comes to buying plants online, there are countless competitors. I'm ashamed to admit the amount of money's worth of abandoned shopping carts I left during this design sprint. "It's for the research," I told myself, as I closed another Chrome tab before selecting "Checkout Now."
Direct competitors
- The Sill (NYC, NY)
- Niche Plant Shop (Boston, MA)
- Land of Alice (Orlando, MA)
Indirect/analogous competitors
- Home Depot - sells plants, but also countless other things
- Nike
- Grubhub
When thinking about indirect competitors, I thought of retailers that allow you to customize your order. On Nike.com, you can customize a pair of sneakers, while on Grubhub, you can customize a burger from Boston Burger Company, for example.
Defining a target user & problem statement
Based on the user interviews I conducted, I created the above primary persona/target user, the Tech-Savvy Plant Mom.
Problem statement
The Tech-Savvy Plant Mom needs a way to make informed decisions about plants that she wants to buy so that she can continue to support her local garden center from the comfort of her home.
Designing the sitemap & user flows
Card sorting
Using the inventory I gathered from my visit to the store, I conducted two card sorting exercises to help guide the site map for the prototype.
- Open sort: 6 participants named 6-17 categories
- Closed sort: 6 general categories named with strong agreement among 4 participants (75% of cards were unanimously categorized)
Sitemap
Click to toggle between the final sitemap and footer. The most important aspect of this map is the "shop" tab, while the other navigation items are based on what I know the shop offers (through research and physical observation), or similar features that competitors offer.
User flows
I created two user flows for the prototype:
- 1. browse for and purchase an item for delivery
2. customize an order from the terrarium buffet
Design iterations
Low-fi wireframes
I started designing the prototype by hand-sketching several ideas for different pages. I marked up my work along the way as I came across mistakes or things I wanted to clarify.
Homepage development
After hand sketching, I started plugging in my designs into a UI kit on Sketch. All of the screens went through a similar development that I'm showing below.
1/3: One of the first iterations of the homepage.
2/3: Adding some text, card modules, and color to the prototype.
3/3: The final homepage!
Usability testing
For this project, I conducted usability testing using Maze.design. I asked users to order a plant for delivery, and then asked them to rate the difficulty of the process.
Seeing hotspots
This screenshot was taken from the checkout page. It was interesting to see how the "curbside pickup" option was clicked even though the directions were to place an order for delivery.
High fidelity prototype
Try it for yourself!
Demoing user flow 1: browse for and purchase an item for delivery
Demoing user flow 2: customize an order from the terrarium buffet
Takeaways
Remote user testing
Unmoderated and remote user testing can be really challenging. The directions I wrote on Maze were not enough for the testers to fully understand the capabilities of a working prototype, which is why they were confused about things such as the address field being filled in "on its own."
UI kits
I used a UI kit for this project and got to know the ins and outs of how symbols and components are made. This inspired me to pursue making my own style guide! See the project I did with Jambb for more on that!