ROLE
UX/UI Designer and Prototype Developer
TIMELINE
June 2017 - Jan 20181
RESPONSIBILITY
I collaborated with the Art Director and engineering team to enhance the user experience and boost direct eCommerce sales on simplehuman.com, a company that designs and manufactures high-quality kitchen, bath, and beauty tools.
“Remember, every ‘mistake’ your customer makes, it’s not because they’re stupid. It’s because your website sucks.”
1The existing site architecture did not effectively organize the extensive range of products, leading to a suboptimal and confusing user experience that obstructed the path to purchase.
2The lengthiness of the checkout process contributed to a high cart abandonment rate.
3While the site was mobile responsive, it lacked mobile-friendly design elements.
1Simplify the purchase process for both existing and new customers
3Optimize product search efficiency
2Redefine the checkout process to one-step-checkout process
4Improve the mobile experience
1DEFINE TARGET AUDIENCE AND THEIR BEHAVIORS
Based on the site data from the 3rd quarter of 2016, approximately 71% of site traffic on simplehuman.com was from new visitors, higher than industry standard bounce rate of 60%. The majority of traffic, nearly 64%, came from mobile devices, and the target audience was primarily individuals between 25 to 54 years old.
Consequently, the new user experience needed to cater to the requirements of mobile users and professional/mature target audience.
2OPERATIONAL SIMPLICITY
Simplification enables scale. With the addition of more products, the old architecture became outdated and could no longer handle the increasing scale. I conducted a thorough analysis of product attributes and customer navigation, and grouped similar attributes together to simplify the site map and help consumers learn or purchase products more quickly. This resulted in a shift from navigating through multiple pages to a configurable product page.
3STRONG BRANDING AND DESIGN THAT DO NOT OVERSHADOW THE EXPERIENCE
simplehuman is known for its sleek and innovative designs, often referred to as the "Apple of Household Industry."" As a result, the design of simplehuman.com must reflect this modern and minimalist aesthetic while also accommodating the complex range of products offered.
4MOBILE, MOBILE, AND MOBILE
Given that more than half of the site traffic on simplehuman.com came from mobile devices, it was essential to prioritize mobile friendliness alongside mobile responsiveness. In order to achieve this, we conducted extensive research on best practices for mobile eCommerce and made the following recommendations:
INVITING DESIGN ENHANCES FLOW
The flow of different categories was improved to shorten the path of purchase, making it more efficient for consumers to browse and decide.
Here are the before and after comparisons of the flow:
BEFORE
AFTER
After gathering data and feedback from Google Analytics and the Customer Service department, I re-designed the user flow and made the product page more configurable. This allowed consumers to view all the options on a single page, rather than navigating back and forth between the product page and feature page. To accommodate both new and returning customers, I combined the product features and a sticky CTA "Buy" bar on the second step.
Here is the lo-fi flow for new and returning customers:
I streamlined the complex product family structure into four templates, which were developed through wireframes and finished design:
1Single product (No configuration)
2One-option configuration (Either finish or size)
3Two-option configuration (Product tier)
4Complex two-option configuration (Product tier, size, and/or finish)
FAST, SECURE, AND CONVENIENT CHECKOUT PROCESS
The checkout process was made more efficient by reducing the number of steps from 6 to 3 and integrating Apple Pay for faster and more convenient checkout.
RESULTS:
By the first quarter of 2017:
WHAT I LEARNED:
During the design process, I learned to utilize analytics and user feedback to inform design decisions. Looking at data to see where users were dropping off and where they were having issues helped decide what improvements to make for the site. Moreover, the checkout process is the most important part of the user journey, and it's where users can easily become frustrated and abandon their purchase. I made sure the chekcout process was as streamlined and easy as possible, and offer multiple payment options, such as Apple Pay, for added convenience.
Improving user experience is a continuous process that must evolve to meet the changing needs of consumers. For the next stage of development for simplehuman.com, we will prioritize the subscription service and aim to personalize the shopping experience for our customers. We are also exploring ways to make the transition between web and mobile applications more seamless and user-friendly. This includes streamlining the process of creating a personal account, making it a valuable addition to the purchasing journey rather than a hassle.
CHECK OUT MY OTHER CASE STUDIES :)
