Unlocking Crucial Webpage Elements for Smart Purchases

Felix Osiobor

Web Designer
UX Researcher
Product Designer
Figma
Vention

Overview



🏢 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

In what ways does Vention's existing eCommerce platform for automation robots enhance prospects' ability to make informed and streamlined 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 encompassed:

  • 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.
Legacy UI to be redesigned to address current needs



“You don’t need a big close, as many sales reps believe. You risk losing your customers when you save all the good stuff for the end. Keep the customer actively involved throughout the presentation, and watch your results improve.” –Harvey MacKay





In this project, my goal is to furnish customers with thorough and valuable information from the outset. This approach is designed to ensure that customers feel adequately supported and to cultivate trust in Vention's capability to provide the necessary equipment.







🎯 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:



  1. Placing the filtering feature on the left side, aligning with conventions observed on various e-commerce platforms to enhance user familiarity.
  2. Introducing product category thumbnails at the top of the page to facilitate rapid filtering for users.
  3. Emphasizing the product section by displaying the inventory count to enhance user engagement.
  4. Positioning the sorting function adjacent to product cards to streamline search result customization based on user preferences.
  5. Consistently placing product cards to aid both front-end development and ensure mobile-friendly design.



Low - fidelity mockup with annotations to explain the UI components on the page and their benefit



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.



ENGINEERING 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

E-commerce page now offers vital online shopping features

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.



Product e-commerce 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



🎞 Prototype preview

Preview experience of the design solution





THE INVITATION (visit the live site)

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.



Visit the live site here below.













🌠 Key Takeaways

Through our joint efforts, we kicked off a comprehensive redesign project focused on refining UI components and meeting various user and business needs. This teamwork led to a remarkable transformation, aimed at delivering greater value to customers by making their shopping experience more efficient. For the business, it opens up exciting possibilities for boosting sales.





Partner With Felix
View Services

More Projects by Felix