📃 Case Study – Revamping the B2B ShopNOSCO Website
Revamping the B2B ShopNOSCO Website
ShopNOSCO is a B2B platform designed to streamline inventory and procurement processes, offering over 900+ Global Product Numbers (GPNs) and shipping orders to over 40 countries directly to site in just a few clicks. Our goal was to revamp the website to enhance user experience, increase efficiency, and drive higher user engagement.
Project Duration: 2 Months
The ShopNOSCO website faced several critical issues that hindered its usability and overall user experience:
1. Cluttered Interface
The interface was visually cluttered with inconsistent design elements, poor use of whitespace, and low-quality images. This made the site aesthetically unappealing, affecting user satisfaction and trust.
2. Complicated Navigation
The existing navigation structure was cluttered and complex, making it difficult for users to find the products they needed quickly. This led to user frustration and high drop-off rates.
3. Inefficient Checkout Process
The checkout process was lengthy and complicated, requiring users to go through multiple steps to complete a purchase. This resulted in high cart abandonment rates and lower conversion rates.
4. Slow Load Times
The website had performance bottlenecks that resulted in slow page load times. This negatively impacted user experience, leading to increased bounce rates and lower engagement.
To address these problems, we implemented the following solutions:
1. Enhanced Visual Design
Modern Design Language – Adopted a clean, modern design language with a consistent color palette, typography, and visual elements to create a cohesive look and feel.
Effective Use of Whitespace – Utilized whitespace effectively to reduce clutter, improve readability, and focus user attention on key elements.
2. Complicated Navigation
Robust Search and Filter Functionality – Implemented an advanced search feature with autocomplete and filtering options, enabling users to find products quickly and easily.
Breadcrumb Navigation – Added breadcrumb trails to improve user orientation and allow users to easily backtrack to previous pages.
3. Streamlined Checkout Process
One-Step Checkout Process – Consolidated the entire checkout process into a single page to minimize abandonment rates. This involved combining cart review, shipping information, and payment details into a streamlined, user-friendly form.
4. Optimized Performance
Minimized HTTP Requests – Reduced the number of HTTP requests by combining CSS and JavaScript files, optimizing images, and using sprites where applicable.
Lazy Loading – Implemented lazy loading for images and content to improve perceived performance and reduce initial load times.
Code Optimization – Minified and combined JavaScript and CSS files to reduce file sizes and improve load times. Removed unused code and optimized scripts for better performance.
UX Design Process
Process We Followed
Stage 01
Empathize
Understanding the users’ needs and pain points was the first step in our design thinking process. We conducted comprehensive user research to gather insights into their experiences with the current platform.
- 1. User Feedback Analysis
- 2. UI/UX Analysis
- 3. HTTPS Request and DOM Analysis
- 4. Coverage Analysis
- 5. Load Time Analysis
User Feedback Analysis
We gathered user feedback through surveys, interviews, and usability testing sessions. This feedback was crucial in identifying pain points, user frustrations, and areas for improvement.
Collecting user feedback allowed us to understand the real-world challenges users faced and prioritize features that would have the most significant impact on their experience.
UI/UX Analysis
We performed a thorough analysis of the existing UI/UX, examining user flows, interface design, and interaction patterns.
This analysis helped us identify usability issues and design inconsistencies, providing a clear direction for redesigning the platform to enhance user experience.
HTTPS Request and DOM Analysis
We analyzed the HTTPS requests and Document Object Model (DOM) structure of the existing platform to understand the technical performance and bottlenecks.
This analysis was critical in identifying performance issues related to loading times and page rendering, allowing us to optimize the technical aspects of the platform.
Coverage Analysis
Ensuring comprehensive test coverage was essential to identify and fix bugs, enhancing the overall reliability and robustness of the platform.
Load Time Analysis
We performed load time analysis using tools like Google Lighthouse and WebPageTest to measure and optimize the platform’s performance.
Reducing load times was crucial to improve user experience, as faster load times lead to higher user satisfaction and better engagement.
Stage 02
Define
Based on the insights gathered, we defined the core problems and user needs. We created user personas and user journey maps to visualize the user’s interaction with the platform.
- 1. Persona
- 2. Customer Journey
User Segments for ShopNOSCO B2B Platform
Understanding the diverse user segments was crucial to the successful redesign of the ShopNOSCO platform. The following user segments were identified and targeted during the project:
Customer Journey Map
Stage 03
Ideate
With a clear understanding of user needs and pain points, we brainstormed potential solutions. We generated a wide range of ideas and concepts, focusing on improving usability, efficiency, and overall user satisfaction.
- 1. Card Sorting
- 2. Brainstorming
- 3. User Flow
Card Sorting
For the ShopNOSCO platform, card sorting helped us design an intuitive information architecture by organizing features, functions, and content in a way that aligns with user expectations.
Brainstorming
User Flow
Stage 04
Prototype
We created prototypes of the redesigned platform, incorporating the insights and ideas generated in the previous phases. These prototypes were developed with a focus on usability and performance.
- 1.Wireframes
- 2.Design System
- 3.High Fidelity Design
- 4.Interactive Prototype
Wireframes
A wireframe helps visualize the layout and structure of the platform before moving on to detailed design and development.
Design System
We created design system which helped us create consistent and coherent user experience across different platforms and products.
High Fidelity Design
We created high-fidelity design to improve the quality of the end product also streamline collaboration, user testing and accelerate project timelines.
Interactive Prototype
With interactive prototype we created working model of a product that simulates the user experience and allows users to interact with the product.
Stage 05
Testing & Iteration
The testing phase is crucial to ensure the revamped ShopNOSCO platform meets user needs and performs reliably. Below is a detailed plan for the testing phase, including key activities and methodologies.
- 1. Planning & Test Case Development
- 2. Usability Testing
- 3. Iteration
Planning and Test Case Development
Test Case Development
Usability Testing
Understanding the diverse user segments was crucial to the successful redesign of the ShopNOSCO platform. The following user segments were identified and targeted during the project:
Stage 06
Measuring Success
Measuring the success of the ShopNOSCO website involves evaluating a combination of user experience, business outcomes, and technical performance.
1. Measuring Time on Task Using Click-Through Rate (CTR)
Time on Task is a critical metric in user experience that measures how long it takes for a user to complete a specific task on a website or application. One way to indirectly measure Time on Task is by analyzing the Click-Through Rate (CTR) in relation to the task flow.
By analyzing CTR, we identified unnecessary clicks or steps in the user journey. For instance, if users consistently click back and forth between pages, for those instance we designed better navigation and added clearer instructions.
Reduction in time on task for critical actions by 30-40% after UX improvements.
2. Website Load Time
Achieving load times under 3 seconds for the ShopNOSCO website was a significant milestone in the revamp project. By implementing a range of optimization strategies across both front-end and back-end components, the website now offers a faster, more responsive experience for users. This improvement not only addresses user concerns but also aligns with best practices for web performance, ultimately enhancing the overall effectiveness and success of the ShopNOSCO platform.
3. First Impression
Achieving a positive first impression from at least 85% of users in focus groups was a significant success for the ShopNOSCO website revamp. By focusing on visual design, usability, performance, and content, the website effectively captured users’ attention and created a compelling initial experience. This success not only enhances user satisfaction but also sets a strong foundation for ongoing engagement and positive user interactions with the platform.
