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
Role
Product Designer
Tools
Figma, Maze
Timeline
2 months
01
Overview
BACKGROUND
Although Orchid Man has been able to establish a large presence in the floral industry of New York City, their website currently lags behind their growing customer base due to its outdated design.
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.
02
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
We accessed four popular local floral websites and took note on what worked and what didn't. Although they all have their strengths, there wasn’t one that had both the visuals and usability that would create a seamless experience.
100%
Displayed delivery info & hamburger menu on top of page.
75%
Utilized pop-ups to promote the business; email sign up & discount.
75%
Personalized their brand by sharing the history of the business.
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?
03
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.
04
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.
05
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.
06
The Final Product
