INTRODUCTION
Orchid Man is an established local flower shop offering orchids for retail & wholesale purchases. They have specialized in orchids for the last 20 years, maintaining old & new customers
Product Designer
Figma, Maze
2 months
Overview
BACKGROUND
Despite Orchid Man’s strong presence in New York City’s floral industry, their outdated website no longer meets the expectations of their growing customer base.
PROBLEM
How might we update their current design to increase their customer base?
GOAL
We want to design a responsive website while creating an inviting experience to further establish Orchid Man's online presence.
Discover
RESEARCH PLAN
To understand what the pain points the business and their customers may have, we have to look towards Orchid Man’s current website journey as well as their competitor’s experiences.
A few objectives to keep in mind:
Determine what users are struggling with while placing an order.
Understand what information users look for on a floral website.
Learn how users feel navigating the website.
Discover what makes users write reviews for businesses.
COMPETITICE ANALYSIS
USER RESEARCH
Surveys were done with users who have purchased flowers before. We were able to glean important factors they considered while purchasing and how they felt about the current website.
Some of our findings:
Most participants had difficulty navigating the website as there was an overwhelming amount of data. The font was difficult to read due to the size and color.
Participants are willing to leave a review once incentivized by a discount, this would increase the brand's online presence.
The ordering process is disconnected and long. Participants have difficulty remembering what they picked out while filing out the form.
After finding the participants’ common pain points & needs, a clearer picture forms in who will be using this platform.
How might we increase Orchid Man's online presence while creating an easygoing experience for first time customers?
Ideate
Solutions
Based on our research findings, we were able to narrow down a few solutions for Orchid Man.
Simple and easy-to-follow navigation. This can be done by limiting users’ options upon landing on the homepage.
Filters for viewing the varying types of orchids Orchid Man has offered. Visually taking out the excessive amounts of pages to be combined in an organized fashion.
Actively promote brand with a discount offered to first time customers as well as customers who leave a review.
SITE MAP
We simplified the current website and organized the information into smaller categories that wouldn't overwhelm a first time customer.
TASK & USER FLOWS
User flows helped translate our users’ needs & goals into steps inside of the product. Task flows formed the structure of the product by creating a direct path to our users’ goals. This prioritizes the key screens needed to start wireframing.
Design
MID FIDELITY SCREENS
We digitized initial concepts for necessary screens extrapolated from the user task flows.
UI DESIGN
The colors for Orchid Man will be organic, reminiscent of the plants they sell. Most of the colors would come from the pictures of the orchids, therefore it will be mostly neutral tones.
Test
USABILITY TESTING
Testing was conducted unmoderated on Maze with participants between ages 20-40. Our goal is to determine if users are able to navigate the website intuitively. This is also a chance to confirm that the interface is overall friendly & easy to use.
INTERATIONS
Iteration #1: Navigation Bar
Renamed two out of the four menus on the navigation bar after user feedback. The “Help” page to “FAQs” and “Shop Now” to “Order Now”. Users were confused where to find additional information since the “Help” tab translates as a way to contact the store. The positioning of the “Order Now” tab has also been moved to the right, mimicking various sites that have the shopping cart in the same position.
Iteration #2: Buttons
One user mentioned that during the process of placing an order, the “Next” button was beneath the fold so they didn’t know how to go next until they scrolled. To prevent any confusion, the button is now fixed at the bottom of the screen. This provides ease of access if the user needed to scroll back up to double check information.
Iteration #3: Editing Information
Before submitting an order, a button for editing the inputted information in the previous steps has been added. This would prevent users from having to repeatedly click the “Back” button to reach the step they need to edit.
Iteration #4: Order Submission Confirmation
The order submission confirmation page has been changed by removing the progress bar that the previous steps had. A gif has been placed as a reminder for the customers to check their email for a reply from the business.
