Satechi E-commerce Redesign
As a leading San Diego tech firm, Satechi sought a website redesign that mirrors its ethos of delivering high-quality, affordable tech products. Addressing the challenge of low conversion and high cart abandonment rates, particularly among new visitors, I spearheaded a collaboration with external Shopify experts to revamp the site's UI/UX. This strategic overhaul not only fortified Satechi's brand identity but also propelled average conversion rates by an impressive 30%, capturing and retaining the attention of first-time shoppers effectively.
The Challenges
• Update the UX to make it more intuitive, highlighting product collections on the homepage to make it easy for shoppers to find what they want.
• Give visitors a stronger sense of who Satechi is, and what they stand for. Create a better brand identity.
• Give visitors a sense of the quality of Satechi's products, call out key product differentiators, emphasizing the sleek design.
The Process
Research Methods.
• User behavior analysis
To find out the reason behind the poor performance, we first used Hotjar heatmap data to understand how customers interact with key pages. And we feel this doesn’t provide enough insight, for example, we found the CTA click rate on the homepage banner is low, and it could be because the hero title isn’t readable or other reasons.
• Usability testing
To make sure the team is focusing on the right issues and feel more confident about our design decision, we moved forward with usability test on both Satechi’s existing site along with some competitor websites with 5 users.
We worked with an external UX researcher to conduct competitive usability studies to identify the key strengths and weaknesses of their design by analyzing different design patterns and user flows etc. to determine which concept might work and not work for our audience. They allow us to test ideas without having built the designs ourselves and to discover new interactions for our site and avoid mistakes made by others. Usability studies lay the groundwork for the redesign process and keep our team focused on the right issues. We are more confident about the decisions because we've witnessed people interacting with websites in similar situations.
Research Summary - The symptoms of bad conversion rate.
• The current website looked very outdated — The GothamRounded typeface, the color palette, the round button style didn't present the high-tech brand identity. One of the easiest ways to make users feel that a product is reputable, reliable, and worth the money is to make it feel premium. So by having a website that has a really good esthetic, you can make the user feel that the product/service is premium.
• Slow load times — When the customer clicked on the CTA to checkout, it used to take around 5 seconds. There was neither any loading state nor visual feedback.
• Usability issues — Text on Hero banner is not readable, some text is very small ( 10px), elements overlap on mobile page via CTA. Email sign-up pop-up is displayed multiple times.
• Poor navigation — Users feel it's hard to find the product they are looking for, there are too many main categories. The products organization is based on the systems of warehouse.
• Product Catalogs — The filter is not very helpful, on a large screen the section still takes up the full width, making scanning very difficult for the user.
• Lack of Social Proof — Pages with social proof create trust and increase conversions. Adding media reviews to the homepage can increase trust in the brand.
• Product Page — It’s usually at the product page where the user will decide whether or not to buy a product. Therefore, it’s extremely important to display information that will support him in the decision-making process, but also won’t flood him with details.
Design.
As we are aware of the problems now, let's dive into solving them! 💪💪
• Homepage
• Navigation
• Product Catalog
• Product Page
UI Kit & Component Library
Results.
within 3 months
30% increased in home page and mobile conversion rate
28% increased in average order value
-7% decrease in cart abandonment rate
Reflect.
While working on this project, I had a great opportunity to work with and learn from some experienced Shopify Experts. They offered us strategic, data-informed suggestions to improve the online experience. This website redesign encouraged me to dive deeper into what best UX practices in E-commerce really are.
E-commerce value propositions are clear, measurable, and demonstrable benefits customers receive when buying a product or service. Shoppers will normally see these values scattered throughout a store: on the homepage, footer, and product detail page. These are often intended to call out factors that differentiate your store from the competition and may include things like shipping & returns, free trials, warranties, and other policies.
I also learned how to use high-level data to understand what happens throughout the shopping journey. We dive into segments like device, demographics, and channel and analyze shopper behavior based on touchpoints on the site. We couple heatmap data with Google Analytics to understand exactly how customers interact with key pages. This helps us identify what works and what doesn't on each page.