VeganHive

Business profile page revamp

My Role
UX/UI Designer

Timeline
May 2024 - Oct 2024

project introduction

The business profile page is a cornerstone of the VeganHive marketplace. It serves as the primary platform for sellers to showcase their products and is frequently visited by buyers seeking to make purchases. This revamp is designed to address and enhance the existing UX/UI challenges associated with this critical page.

the problem

The business page was developed using outdated research and lacked recent user testing. This resulted in a design that failed to meet evolving user expectations and preferences.

The previous design suffered from a disorganized information hierarchy, a non-responsive layout, and significant performance issues on mobile devices. These shortcomings made it difficult for users to locate essential information and navigate the page efficiently. Additionally, the outdated user interface was not visually appealing or modern.

  • The business detail information previously occupied a significant portion of the screen, obscuring the primary focus, which is the products that the business aims to sell (Box 1).

  • The third column of information was not optimized for smaller screens, leading to a poor user experience and an outdated visual appearance (Box 2).

  • The product section was hidden from view, requiring users to scroll to access it. This hindered product discovery and potentially reduced sales (Box 3).

  • On mobile devices, the problems associated with the business page were exacerbated. The business information and third column occupied an excessive amount of screen space, hindering the user's ability to quickly find and navigate through products. Additionally, irrelevant information was displayed, further cluttering the interface.

  • Individual product pages also presented challenges. A single product often consumed the entire screen, making it difficult for users to efficiently scan and compare multiple products. Businesses with more than five products required excessive scrolling, creating a frustrating user experience.

  • The review section occupied a substantial amount of screen space, often leading to user neglect and contributing to slower page loading times. This saturation of the main page with reviews detracted from the display of more relevant information that could have been managed more effectively.

THE GOALS

To address the aforementioned challenges, we adopted a mobile-first approach for this revamp. This strategy prioritizes simplicity and optimal user experience on mobile devices, recognizing that over 70% of VeganHive users primarily access the platform via their smartphones, with desktop usage being secondary. By focusing on mobile optimization first, we ensure a seamless and intuitive experience across all devices.

research

To gain valuable insights, we conducted a comprehensive analysis of leading marketplace apps. This analysis focused on information management, hierarchy, mobile prioritization, layout, interactions, and unique differentiating factors. By studying these successful platforms, we identified best practices and identified areas for improvement in our own design.

the solution

We began by creating sketches to visualize information based on our research findings. These sketches helped us determine the optimal organization and placement of elements. We then conducted usability testing with a focus group to identify any pain points or misunderstandings within the page design.

Once the structural framework was established, we proceeded to develop a high-fidelity prototype. This prototype incorporated essential features designed to guide users seamlessly through the page and ensure intuitive navigation.

We implemented a comprehensive revamp, beginning with a redesigned top section that presents all business information in a clear and concise manner, prioritizing the most relevant details (Box 1).

To address the previous product visibility issues, we prioritized the product section and enhanced its layout. Users can now view four products per scroll, making it easier to browse and find desired items. Additionally, we introduced a search and filter section to streamline the search process and enable users to efficiently find products that meet their specific criteria (Box 2).

To foster cross-promotion and increase sales opportunities within the VeganHive marketplace, we added a recommendation section. This feature allows users to discover similar businesses and products, expanding their options and potentially driving additional revenue for all participating businesses.

To enhance user engagement and facilitate interactions, we added an action bar at the bottom of the page. This bar provides easy access to options like marking as a favorite, sharing the business, and accessing additional features. These features empower users to actively participate and promote the business within the VeganHive community.

To minimize clutter on the main page and maintain focus on essential information, we incorporated additional details such as business details, opening times, and reviews into dialogs. These easily accessible dialogs provide users with the option to view this information when needed, without distracting from the primary content.

Desktop

To maintain consistency across all platforms, the desktop version retains the same core structure. While the primary focus remains on product and business information, we leverage the larger screen size to provide additional context and details, enhancing the overall user experience.

inTERACTIOns

A comprehensive prototype was developed to provide a detailed context for the development team and to facilitate testing with a group of users. This prototype served as a valuable tool for refining the design and ensuring that it met the needs and expectations of the target audience.

takeaway

By deeply understanding your users, stakeholders, and their preferred devices, you can create a truly exceptional application that addresses their needs. Adopting a mobile-first approach simplifies development and ensures a superior user experience. Prioritizing hierarchy and identifying key problems before diving into solutions provides a strong foundation for effective problem-solving. Conducting thorough competitor research offers valuable insights into market trends and best practices, guiding your development process.