Design a new purchasing experience for the fruit club customers and their gift recipients. A longstanding service shouldn't mean an outdated interface.
I identified usability roadblocks and conducted usability tests via rapid prototyping to inform the design decisions; designed and delivered the interactions; and oversaw the implementation.
"The experience was flawless. It was really straightforward and to the point." - Club Research Participant
How might we improve the discoverability of the product information while maintaining a relatable experience for catalog customers?
Fruit club products have been one of the most popular gifting options for older adults or their loved ones to enjoy fresh, in-season fruits since 1936. However, the website interface was built a decade ago based on the catalog experience. How might we improve the usability of the site and discoverability of the product information while making the experience more digital native friendly while keeping it relatable for our existing senior customers?
Solution at a Glance
Focus on feedback, accessibility, and prioritizing product information
The old site experience was based upon a catalog layout; long columns with every bit of information on the same page. The redesign focuses on prioritizing information, increasing accessibility, and providing immediate feedback after any interaction, to speak to our senior catalog customers while attracting younger demographics by eliminating the print-based layout.
- Iteration 1
- Iteration 2
- Iteration 3
- Iteration 4
Understand the problem with a mindful eye for budget and resources
As the solo designer and researcher with the limited resources the company could provide, I conducted competitor analysis, secondary research, and remote usability testing to understand the market, customers, and usability opportunities.
After presenting the competitor analysis to the team, we noticed the interfaces from our partial and analogous competitors are more intuitive than the ones from our direct competitors. Then we decided to borrow wisdoms from partial and analogous competitors
Club customer profile
Data provided and retrieved from Epsilon Data Management, LLC.
Improve the information discoverability, iconography, and micro UX copy
Based on the customer profile, I designed a series of usability tasks and recruited representative users from UserTesting.com. A few major issues include:
- The relationship of price, starting month, and Club length is unclear.
- The scannability of prices needs to be improved.
- The interaction lacks feedback to inform the customer of current selection status.
- The concepts of upsells and add-ons need to be delivered clearly.
- The discoverability of upsell product information needs to be increased.
- The upsell copy was mistaken as add-ons.
From low-fi to hi-fi, every interaction is supported by research based rationales
Paper and pen for quick ideatation
After discussing my sketches with other senior team members, I learned more about which designs worked or didn't work well in the past.
Product Page Wireframe
Moveing forward based on my sketches, I made low-fi wireframes and discussed with stakeholders to make sure the design suits business requirements.
Product Alt Images Wireframe
Product Upsell Wireframe
Using the wireframes as a starting point, I created a high-fidelity, interactive prototype for remote user testing on UserTesting.com.
Mobile Devices - the Opportunities
Prioritize the User's Task and Touch Targets
Since the company just finished replaformed their mobile site at the time I joined the team, the design on mobile was updated fairly recently. Yet there are some missed opportunities such as touch targets violated WCAG 2.1 guidelines and the placement of club length and month should be higher up to provide the information upfront for customers.
Current pages on mobiles and tablets
Iterations of the mobile page
Iterations of the tablet page
Design iteration 1
Look before you leap - Can our older clientele understand the button-like UI design?
The new experience aims to be responsive thus a more touch-device friendly selector pattern is adopted. I conducted a few rounds of tests to examine the following hypotheses:
H1: Customers will be able to understand how to change the starting month.
H2: Customers will find the new starting month design convenient because it shows the product availability before a club length option is made.
10 out of 10 test participants could understand the new interaction immediately, and more than half preferred the button UI because it made the starting month availability obvious.
Design iteration 2
Evolve with user feedback - How do we provide more information about club length?
The old experience didn't provide much feedback on the selected club length and period. Would our users notice the feedback provided with a photo snipe on the new experience?
H1: Customers will notice the information about the selected length/date on the photo.
H2: Customers will find the information helpful.
Users immediately noticed the information provided on the photo and found it useful.
Design iteration 3
Balance business goals and user needs
As a promotion-focused company, our customers rely heavily on coupons and seasonal discounts. Therefore, highlighting those offers is essential for the marketing team.
H1: By calling out the "best value" club, we will get more orders for the 12 month club product.
H2: By sorting the price range from high to low, the average order value per customer will increase.
The treatment significantly boosted the order value and the sales.
"The experience was flawless. It was really straightforward and to the point." - Club research participant
The new design increased upsell purchase by 17.09% and revenue by 14.11% (about $ 1 million more than the old experience over a 4 month test.) Besides quantitative uplift, customers have been given positive feedback, which also reflects on their purchase behaviors.