BACKGROUND

Brief:

• To enhance the user interface (UI) of the existing vape device comparison page. The goal is to enable our customers to compare multiple vape products seamlessly, whether they are using a desktop or a mobile device. The primary focus is to create a user-friendly design that facilitates easy access, clear viewing, and effective evaluation of various vape devices side by side.
• Target Audience: The target audience for this vape device comparison page includes both seasoned vape enthusiasts and first-time buyers. The page should cater to users of all experience levels, offering a clear and intuitive interface that enhances their decision-making process.

​Goals:

1. To support multi-product comparison
2. Responsive Design

‍

RESEARCH

To ensure that the redesign seamlessly integrates with the established brand identity of the website, I initiated the process by meticulously analyzing the user flow. This examination allowed me to gain insights into the interactions of existing customers with the e-commerce platform and to envision the expectations of potential new customers. This initial phase involved conducting a series of in-depth internal interviews to gather valuable perspectives.

Additionally, as part of our long-term vision for the project, we aimed to create a scalable solution capable of accommodating more than three products. To substantiate our design choices and validate the features intended for customer benefit, we conducted a thorough comparative analysis of other e-commerce websites. This benchmarking exercise proved instrumental in shaping our design approach.

‍

CHALLENGES

We have limited data regarding how current customers interact with the existing device comparison landing page.​

‍

The plan

1. Define the user flow
2. Discover design opportunities
3. Conduct user testing early
4. Responsive Design

Step 1: Define the user journey

I have chosen to develop a simplified user flow to find opportunities to improve customer experience on this e-commerce site.

By mapping out the user journey, we can identify pain points and opportunities to improve the overall customer experience.

Understanding the customer's perspective helps in designing seamless and intuitive interactions, leading to higher satisfaction and loyalty.

Step 2: Discover design opportunities

From the current flow in this part of the customer journey, there are pros and cons:

• The side-by-side design allows customers to compare the information efficiently without too much scrolling
• The current design lacks the flexibility to scale when there are more than two products
• The new design should allow customers to compare the products easily.

‍

Updated User Flow

The new flow helps to set the tone in the design in order to ensure we prioritize customer satisfaction and to help them use this page and understand the product information more efficiently.​

I then proceed with designing three options for desktop before iterating on mobile.

Potential UI Solutions

1. Tick & Select

Option 1 has a horizontal layout of all available products to allow users selecting maximum of three to compare.

‍

2. Side Filter

Option 2 locates on the left hand side of the page which provides more flexibility to list multiple products.

‍

3. Drop down filter

Option 3 provides same functionality as other two options and allow more personalisation when comparing the devices.

Iteration & Validation

Step 3: Collect feedback to further refine designs​

We have implemented an interactive prototype for testing to validate the design. This process has been an essential part of understanding user interactions and used to be a reference for building mobile responsive design.​

​

Gathering insights:

• Participants enjoyed having the flexibility to select the product and list it as their preferred order
• Participants interacted with the prototype efficiently as it followed their reading pattern from top to bottom rather than selecting on the left and reading on the center of the page

Note: The button (Call to action) has been updated to match the rebranded guideline to be white instead of red to allow a more modern and slick look.

‍

Step 4: Mobile responsiveness

Following the insights collected from desktop design testing, I have refined the interactions and designed mobile with the same approach with 2 column layout instead of 3 with considerations of smaller mobile screen sizes.

Cross-functional collaborations:

Throughout the design process, I led the effort to reorganize the Information Architecture (IA) on the page to highlight key user interests like battery time, puffs, and recyclability with clear labels.

Post prototyping, we utilized Google Analytics to measure the page's performance and gather user feedback to validate our design choices. This testing phase was crucial as it provided real-time data on how our redesign was impacting user behavior and conversion rates.

With a validated design, I coordinated with the development team to ensure accurate implementation. The collaboration was seamless, and our daily stand-ups ensured that we were aligned and could tackle any arising issues promptly.

​

​The results were highly encouraging. Post redesign, Google Analytics data showed a 65% conversion rate from the page, demonstrating a significant improvement in aiding customers to make a purchase decision. Furthermore, the page view time was reduced by 55%, indicating a more efficient user journey to the product-specific page. This project underscored the importance of cross-functional collaboration in delivering a customer-centric design that not only enhanced the user experience but also positively impacted business objectives by increasing customer satisfaction and facilitating quicker purchasing decisions.

‍

Takeaways

After participating in this project, I have gained valuable takeaways including:

1. Interaction Design: I have gained expertise in organising information, creating filters, and facilitating comparisons through well-designed interactions.
2. Accessibility Considerations: Evaluating the accessibility of the redesigned page will have heightened my awareness of accessibility guidelines and how to make digital interfaces inclusive to all users.
3. Collaboration and Communication: Working with stakeholders, copywriters, developers, and other team members will have improved my collaboration and communication skills.
4. Brand Consistency: Aligning the redesign with the existing brand identity will emphasize the significance of maintaining brand consistency across different interfaces.
5. Project Management: Participating in the project from research to implementation will have given me insights into project management and how to meet deadlines and milestones effectively.