pc Factory covers 90% of the Chilean territory with more than 30 physical stores, and more than 120K users per day, now they´re looking to consolidate its online model.
-
Role: UX/UI Designer
-
Collaborators: Product Manager, Engineering, QA.
-
Company: pc Factory
-
Timeline: November 2021
Background
With monthly sales above USD 15M, the pandemic accelerated the need for an e-commerce that meets user expectations.
Consumption habits changed in a very important percentage due to the pandemic. Self-management on websites accelerated and pc Factory had to turn its users towards a 100% self-managed digital experience.
The problem
The problems we faced were focused on the usability and navigation of the current product.
-
Categorization: With over 50,000 products, proper categorization was necessary, as there were more than 32 categories that does'nt allow a easy navigation.
-
JTBD flows: When trying to solve multiple problems on the same screen, it is common to end up not satisfactorily addressing any of them. Therefore, it is essential to understand each task the user needs to accomplish in each flow of the product.
-
Scalability: Pilar page templates must be in place to facilitate the reproduction of content in a simple and agile way. It is not feasible to create a digital product where each piece of content has a unique layout, as this leads to inconsistency and additional design/implementation rework.
-
Complex purchase process: In an e-commerce platform, it is crucial to keep the purchase process as simple as possible since the most important KPI is the conversion of users through the digital product. It was necessary to create a step-by-step purchase process that guides users toward completing their objective, instead of an interface with excessive details that complicate decision-making.
Opportunity
Create a scalable product where the user is at the center of the experience.
With the number of users accessing pc Factory each day, it was necessary to create a new experience where the user had a unique profile to manage their orders, a segmented purchase flow in steps, a layout that could be replicated for other contents, and an information architecture that went from macro to micro to help locate and guide the user.
Research
- Benchmark: We analyzed more than 20 e-commerce websites to find patterns and standards that we could use to make the product's learning curve as simple as possible. Additionally, we reviewed the content structure and prioritization criteria of the competitors.
-
Interviews (Meeting business with user needs): We conducted 15 interviews with customers who had previously used the product. This allowed us to understand the pain points they experienced while interacting with the product, which led to the failure to achieve sales goals through the digital channel.
As a result, we found that users had difficulty interacting with the previous site due to the lack of product structure and complexity in the purchase flow. There were many steps that made the process confusing and lengthy."
Structure - Product navigability
We needed to create a way to optimize the organization of products and assist users in finding what they were looking for. Therefore, we created macro categories that housed subcategories, aligning the groupings with users mental models.
HOME > CATEGORIES > PRODUCTS ❌
HOME > MACRO CATEGORIES > SUBCATEGORIES > PRODUCTS ✅
Ideation - Design system
With over 25 years in the market and a brand evolution launched during 2021, the design system was essential to convey the brand essence in the new product.
We developed a design system from scratch, working closely with the development team to successfully implement it.
SSO (Single Sign On)
To access an account, an unconventional method was previously used for an e-commerce site. So, it was decided to change the core user registration method and start using a standard login through email and password, in addition to the option of accessing via social media.
Product detail
Content prioritization and information hierarchy, for this, we developed the new product details. We used a layout that divided the screen into two sections (horizontally) on desktop and a fixed component for mobile that focused on conversion.
In this section, we prioritized the conversion CTA, relevant information such as prices, product photos, and delivery methods. We also segmented the content about the product in a way that didn't overwhelm the page but instead organized how the information is consumed and found.
From the big picture to the detail (Categories)
The creation of the pillar categories section helped improve the navigability and findability of products, allowing users to locate themselves and delve into the details they needed through this new section.
Furthermore, spaces were created for promotions (cross-selling) and segmentation by characteristics within the same 'big category'.
We increased efficiency by 83% in tasks related to finding a specific product.
Purchase flow (Conversion)
How did we manage to guide the user step by step through the purchase flow? We discovered that the purchase flow needed to be well-segmented into each of the necessary stages to avoid displaying irrelevant information when it was not needed.
One profile, one data center (All in the same place)
To deliver a unified experience, it was important to give the necessary relevance to user profiles, where through this section, they could self-manage, track orders, manage payment methods and addresses, personal information, purchase history, etc.
Build your PC
One of the product highlights in the pc Factory market is the business model where users can customize a computer according to their needs. This functionality accounts for more than 25% of the company's revenue, which is why it was crucial to improve the experience and make it more straightforward. Previously, this feature existed, but over 74% of purchase intentions required the use of the contact center.
How did we do it? We maintained the product gallery experience while guiding users step by step in building their PC. Additionally, we filter out components that are not compatible with the previous selections, avoiding user frustration when attempting to add components that are not compatible with their computer.
We increased self purchase by 42% at the end of this flow.
