Maximizing Customer Shopping Experience

Client Introduction

Vention Inc. is an organization that is poised to revolutionize factory automation and as such, it has high-value pieces of equipments to put in the hands of forward-thinking businesses.

Million Dollar Question

How does Vention's eCommerce platform for automation robots help prospects make smarter and easier purchasing decisions?

Challenge

The aim was to improve the discoverability and filtering functionalities of Vention's premium equipment, enabling prospective buyers to efficiently locate products without undue time expenditure. This initiative sought to address any potential adverse business implications arising from prolonged search processes.

The identified business risks:

• The risk of customer site abandonment due to prolonged product search durations.

• Potential customer frustration stemming from the absence of effective filtering mechanisms, resulting in uncurated search results.

• The possibility of customer disengagement due to insufficient information, lacking essential details necessary for confident purchasing decisions.

Current Product Experience

The current webpage housing Vention's automation equipment for sale displays several significant shortcomings:

• A notable absence of a prominent search bar, inhibiting users' ability to quickly locate desired items.

• Ineffective filtering functionality, which hampers users' ability to efficiently narrow down product options.

• The lack of a visually appealing and contemporary design, a crucial factor in fostering trust and engagement among users.

Old UI in need of a redesign to address current needs

Project Goal

Prioritize the enhancement of filtering and discoverability functionalities, placing them at the forefront of the user experience. This facilitates seamless access to desired items and curated search results.

Solution

My solution adopts a comprehensive approach, encompassing meticulous consideration of various project aspects. Key elements of this approach include:

• Understanding the demographics and preferences of the target user base.

• Aligning with the overarching business objectives.

• Identifying and addressing the current pain points experienced by users.

Following insights into these crucial areas, I led the design process to revamp the page. This involved organizing the page's structure, assembling components, facilitating stakeholder reviews, and producing high-fidelity mockups for delivery to the development team for implementation.

Structuring the Page Layout

To enhance user experience and ensure seamless accessibility to all essential features, I crafted a low-fidelity mockup of the layout. The key design decisions included:

• Placing the filtering feature on the left side, aligning with conventions observed on various e-commerce platforms to enhance user familiarity.

• Introducing product category thumbnails at the top of the page to facilitate rapid filtering for users.

• Emphasizing the product section by displaying the inventory count to enhance user engagement.

• Positioning the sorting function adjacent to product cards to streamline search result customization based on user preferences.

• Consistently placing product cards to aid both front-end development and ensure mobile-friendly design.

Low-fidelity mockup with annotations to explain the benefits of each UI components

Stakeholder Review Sessions

After creating the low-fidelity mockup, I convened a collaborative review session with stakeholders to thoroughly address critical business requirements and explore opportunities for enhancing the shopping experience on the Vention platform.

Feedback gathered during this session was carefully considered and meticulously integrated into the design. This iterative approach ensures that the page effectively addresses the pain points identified with the legacy page, resulting in a smoother user experience.

Design Team Review

During this session, additional designers were invited to offer feedback on the page content, with the goal of incorporating diverse perspectives to refine and enhance the content effectively.

Development Team Review

The presence of a development team representative was solicited to assess the page from an implementation perspective, ensuring feasibility and estimating the development timeline.

I diligently incorporated all pertinent feedback provided, utilizing it as a valuable resource to refine and enhance my design iterations.

Designed screens for this project

Through collaborative efforts, we undertook a comprehensive redesign initiative, refining UI components and addressing diverse user and business requirements. This endeavor culminated in a significant transformation, transitioning from the legacy UI to our dynamic new interface.

The custom E-commerce page now offers vital online shopping features.

Product page with key e-commerce features and improved UI

Showcasing the Filter Feature

Below, I have provided the high-fidelity screen accompanied by explanatory annotations, aimed at elucidating the components and their respective functions.

High-fidelity screen with explanatory annotations

See It Live

I am pleased to invite you to explore the live site and witness firsthand how the enhancements deliver tangible value to customers, surpassing the capabilities of the legacy webpage.