Redesigning e-commerce experience for power supply company
CyberPower is an electronics manufacturer that specializes in power supply products. They worked with the agency Modern Climate to redesign their e-commerce website.
Role:
Lead UX/UI Designer Project duration:
Nov 2021–Feb 2022
Project
In 2021, CyberPower migrated their website to a new e-commerce platform. They used this opportunity to redesign their website and establish a design system that could be used to scale in the future.
Research
CyberPower conducted a usability study and evaluated site analytics to identify the following pain points for their users:
→ Poor product find-ability
CyberPower organized their products into three category levels. Analytics showed that the third level of categorization received little traffic in the navigation. The majority of users started their shopping journey from the second level of product category. Users also utilized site-level search to find products.
→ Desire for simpler online support
CyberPower’s support pages were getting low traffic, while their support call volume was high. Their call center support staff often directed users to support pages on their website.
Site architecture
I started by proposing a new site architecture that centered product find-ability and customer support. I moved tertiary actions to the footer, and elevated a new “chat” feature.
I also removed the underutilized third level of navigation. This drastically simplified the navigation.
Navigation
I redesigned the menu drawer to a full-width design. This new design allowed us to add category names to menu items. These category names helped organize a long list of menu options into digestible options. This extra space also allowed us to put contextual support content in each drawer.
Wireframes
To help visualize the product find-ability flow, I created lo-fi wireframes and prototypes for the team. This was an important step to see how the new site architecture would come to life.
Digital brand expression & page templates
I used CyberPower’s established color palette and typography to build a more modern brand expression. With this new brand expression, I designed 29 page templates from which the developers could build the entire site. Here are a handful of pages:
Product detail
Home
Navigation
Support
Design system
Along with the page templates, I created a design system to help with development as well as support future growth. The design system included foundational elements like custom iconography, typography, spacing, elevation, color, etc. I also created a library of 30 components guided by the atomic design approach.
I used WCAG accessibility guidelines to guide this work - checking color contrast, requiring image and iconography labels, and more.
Select components
Style guide + iconography
Learnings
The design and development process was great — CyberPower’s development team was thorough and excited to work closely with us to develop the website to exact specs.
What I would do differently:- In order to de-risk our navigation design and product find-ability flow, I would have preferred to test the new design with users to understand if our assumptions about their shopping patterns were accurate.
- Our partnership ended with CyberPower once the website launched. Ideally, we would continue to partner with them post-launch to watch analytics and iterate.