Click here if you want only to see the screens✌️
Founder & leader of Ux team – Sonco Traffic Safety Market Place
The business goals for 2024 were clear: to double sales compared to last year. This should be achieved through collaboration between the UX, marketing, sales, and technology teams.
high level goals
Drive 15% sales online – was 2%
To create a design system to improve design
to development and consistency across the products
Start user research in the company
problem statement
After the MVP launch, our research revealed:
Bounce rate above 50% on product listing pages.
Checkout bounce rate up to 70%
Task completion average in the site was 20 min, the ideal is 4-5 min
Confusing price police in the product list page
20% of Clients want to buy less then 30 unities– the minimum in the site
click to see research methods I usedCheckout bounce rate up to 70%
Task completion average in the site was 20 min, the ideal is 4-5 min
Confusing price police in the product list page
20% of Clients want to buy less then 30 unities– the minimum in the site
Based on the data, we have identified the following assumptions:
We are facing serious usability issues, especially in the checkout process and product pages.
Our bundle pricing is unclear to customers.
Our homepage does not provide enough information about our portfolio or the company.
We are facing serious usability issues, especially in the checkout process and product pages.
Our bundle pricing is unclear to customers.
Our homepage does not provide enough information about our portfolio or the company.
Building
To create the proposed solution, we took into account the insights gained during the research phase and the extensive research collection from the Baymard Institute, a leading authority on UX for e-commerce. With this, we already had a clear understanding of the ideal structure to implement.
We began the screen creation process using medium-fidelity wireframes to facilitate communication with stakeholders, followed by high-fidelity designs. While designing the screens, we also structured the design system, a project that was part of our OKRs, which you can learn more about here.
The pages marked with content in “xxxx” are placeholders for future content.
The pages marked with content in “xxxx” are placeholders for future content.
figma prototype
We created navigable prototypes in medium fidelity to demonstrate the navigation to the developers and assess what was most feasible to implement, even before finalizing the UI. This approach was necessary because the same product page model would be used across the three e-commerce platforms within the group.
Although Figma has limitations when it comes to creating fully fluid navigation prototypes, we developed complex iterations, such as image changes on hover and opening the selected image within the gallery.
library building in figma
With scalability in mind for a multi-brand design system, we created a global library containing foundation tokens and core components. This way, team-specific libraries would inherit these components, simplifying local maintenance while mirroring design choices and creations across design files. This approach provides each team or product with the flexibility to choose their own tokens and personality without sacrificing the consistency offered by the global library.
key screens
Previously, all we had were copies of other websites, developed solely by the developers. With the final result, we achieved a unique identity and key functionalities that are highly valuable to the business.
impact
2x
more sales in 4 months after redesign
35%
Reduced time to complete the purchase flow.
After the first wave of deliveries and analysis of the results, the marketing team determined that the site was ready to handle increased traffic. As a result, they raised the budget for site traffic, which also contributed to a boost in sales.
We are now gathering insights through usability testing of new screens and in-depth interviews, which will help us further enhance the user experience and uncover new business opportunities for the company.
Outcomes
The marketing team trusts the insights generated by UX and has increased the budget for site advertisements.
Developers and designers have adopted a structured, efficient, and agile process for screen creation, reducing the time spent on designing new components by 35% and development by 25%.
We estimate further improvements in these metrics as more components are documented in Figma and programmed.
The company has also committed to investing in research, recognizing the value of user insights and focusing on making the site user-centered.
Now, all teams have a single source of truth for accessing assets and guidelines, which will streamline all future operations.
Developers and designers have adopted a structured, efficient, and agile process for screen creation, reducing the time spent on designing new components by 35% and development by 25%.
We estimate further improvements in these metrics as more components are documented in Figma and programmed.
The company has also committed to investing in research, recognizing the value of user insights and focusing on making the site user-centered.
Now, all teams have a single source of truth for accessing assets and guidelines, which will streamline all future operations.
Research methods I used
Cross-referencing usability, traffic, and marketing data – Hubspot, Hotjar, Google Analytics
Heatmap and user session analysis – Hotjar
Extensive competitor benchmarking – Semrush
E-commerce expertise from the Baymard Institute
Interviews with sales representatives & stakeholders
Usability testing – Maze
Heatmap and user session analysis – Hotjar
Extensive competitor benchmarking – Semrush
E-commerce expertise from the Baymard Institute
Interviews with sales representatives & stakeholders
Usability testing – Maze
Reflections & learnings
E-commerces are inherently challenging. Usability knowledge alone is not enough to bring success to the business. It is essential to combine expertise in marketing and business to understand what other teams are communicating and translate that into screens that will deliver the experience users need while achieving the business goals.
I gained invaluable insights working alongside SEO specialists, copywriters, e-commerce analysts, and C-level executives. For future projects, I will consider using another tool for advanced navigation prototyping, as Figma was definitely not designed with that in mind from the start.
I gained invaluable insights working alongside SEO specialists, copywriters, e-commerce analysts, and C-level executives. For future projects, I will consider using another tool for advanced navigation prototyping, as Figma was definitely not designed with that in mind from the start.
next case
(2)
An approach to create a multi-brand Design system
Go to this work