Revamping
Customer Portal : DealBerg
Welcome to our in-depth case study on the redesign of DealBerg customer portal, platform for our B2B business. Our journey began with a fundamental question: How can we enhance the user experience to to serve our diverse customer base better?
To address this, we embarked on a comprehensive approach:
Understanding the Problem: We conducted an in-depth analysis of DealBerg website, identifying user pain points and areas where the design lagged behind current trends. By collaborating closely with the founder and the entire DealBerg team, we gained a comprehensive understanding of the product, its customers, user experiences, existing user flows, and the competitive landscape.
Customer Insights: We engaged directly with our customers and DealBerg team to understand their needs, preferences, and expectations. This qualitative data gave us with a deeper understanding of the user personas and their unique requirements.
Strategic Redesign: Armed with these insights, we set out to revamp the portal with a focus on usability, accessibility, and aesthetic appeal. We developed wireframes and prototypes, iterating based on continuous feedback from our company and users to ensure we were on the right track.
Please take a seat and be our guest as we streamline DealBerg customer portal, enhancing the procurement experience and setting new standards for B2B platforms.
Business & Project Overview
Old
Design
New
Design
Let me introduce our company, DealBerg — a B2B platform dedicated to providing top-notch procurement solutions. We specialize in meeting the needs of restaurants and offices by offering a diverse selection of essential supplies. Our products include office supplies, warehouse supplies, and restaurant essentials, all available at competitive prices with customization options to feature your brand elements. We directly engaged with the founders and operations team to gain a comprehensive understanding of the product we were about to redesign. This included delving into the following areas:
Product Understanding : We explored the core functionality and unique value propositions of DealBerg customer portal to ensure our redesign would align with the company’s vision and goals.
Customer Insights : We identified the target audience, their needs, preferences, and pain points to ensure the redesign would enhance their overall experience.
Company Operations : We examined how the company functions, including internal processes and workflows, to ensure the new design would support and streamline these operations.
Employee Usage : We looked at how employees utilize the platform for their procurement needs, ensuring the redesign would be intuitive and efficient for internal stakeholders as well.
This thorough understanding of the product, customers, company operations, and employee interactions provided a solid foundation for our design strategy, ensuring the revamped portal would meet the needs of all users and stakeholders effectively.
Our Discovery Phase — Design Process
In our Discovery Phase — the cornerstone of our UI/UX design process — we delve deep into understanding user needs, market dynamics, and project goals. By meticulously researching and empathizing with our users, we lay the groundwork for crafting intuitive and impactful design solutions.
Defining The Problem
Based on the comprehensive data gathered from our research we developed our persona: John. John represents our ideal user, meticulously crafted to embody the key traits, behaviors, and needs we identified through our research. He serves as a vital touchstone in our design process, ensuring that our solutions are consistently aligned with our users’ expectations and experiences
User Journey
To understand the user’s needs and identify opportunities for improvement, John’s user journey was created during his use of the Dealberg website — Customer Portal.
Problem Statement
After conducting thorough research and engaging with our users, we identified a crucial challenge:
'Busy procurement managers and restaurant owners need a more efficient and user-friendly way to manage their procurement needs because they struggle with limited vendor options, tracking orders, and navigating complex desktop systems while balancing their busy schedules.'
This problem statement captures the core issue we aim to address through our redesign of the DealBerg customer portal, guiding our approach to enhance user experience and streamline procurement solutions.
Creating Our Solution
Ideation
We began brainstorming and exploring various creative approaches to address the daily challenges customers face when ordering procurement products. Below are some of the early sketches from this ideation phase
Through several rounds of Crazy 8s, our ideas solidified. We focused on the most viable concepts and prioritized essential features using the MoSCoW method to distinguish must-haves, should-haves, could-haves, and won’t-haves.
Through comprehensive research, we identified the essential “Must Have” and desirable “Should Have” features, prioritizing those that could be developed most a within our project’s timeline.
User Flow
Information Architecture
After outlining the scope of our solution, we designed user flow to ensure our users enjoy a smooth and effortless experience.
Paper Wireframes
With a clear vision of our objectives and the requirements for our solution, we started brainstorming and sketching our ideas for specific pages. Here, you can see some of our initial sketches or paper wireframes, where we experimented with different layout options for our product.
Low Fidelity
Building Design System for DealBerg
Component Library
Since the design system is built to ensure consistency across all platforms — Customer Portal, Vendor Panel, and Admin Panel — it includes a set of universal components shared across all three, as well as platform-specific components tailored to the unique needs of each interface, such as those specific to the Customer Portal.
High Fidelity Designs
Welcome to our in-depth case study on the redesign of DealBerg customer portal, platform for our B2B business. Our journey began with a fundamental question: How can we enhance the user experience to to serve our diverse customer base better?
To address this, we embarked on a comprehensive approach:
Understanding the Problem: We conducted an in-depth analysis of DealBerg website, identifying user pain points and areas where the design lagged behind current trends. By collaborating closely with the founder and the entire DealBerg team, we gained a comprehensive understanding of the product, its customers, user experiences, existing user flows, and the competitive landscape.
Customer Insights: We engaged directly with our customers and DealBerg team to understand their needs, preferences, and expectations. This qualitative data gave us with a deeper understanding of the user personas and their unique requirements.
Strategic Redesign: Armed with these insights, we set out to revamp the portal with a focus on usability, accessibility, and aesthetic appeal. We developed wireframes and prototypes, iterating based on continuous feedback from our company and users to ensure we were on the right track.
Please take a seat and be our guest as we streamline DealBerg customer portal, enhancing the procurement experience and setting new standards for B2B platforms.
Business & Project Overview
Old
Design
New
Design
Let me introduce our company, DealBerg — a B2B platform dedicated to providing top-notch procurement solutions. We specialize in meeting the needs of restaurants and offices by offering a diverse selection of essential supplies. Our products include office supplies, warehouse supplies, and restaurant essentials, all available at competitive prices with customization options to feature your brand elements. We directly engaged with the founders and operations team to gain a comprehensive understanding of the product we were about to redesign. This included delving into the following areas:
Product Understanding : We explored the core functionality and unique value propositions of DealBerg customer portal to ensure our redesign would align with the company’s vision and goals.
Customer Insights : We identified the target audience, their needs, preferences, and pain points to ensure the redesign would enhance their overall experience.
Company Operations : We examined how the company functions, including internal processes and workflows, to ensure the new design would support and streamline these operations.
Employee Usage : We looked at how employees utilize the platform for their procurement needs, ensuring the redesign would be intuitive and efficient for internal stakeholders as well.
This thorough understanding of the product, customers, company operations, and employee interactions provided a solid foundation for our design strategy, ensuring the revamped portal would meet the needs of all users and stakeholders effectively.
Our Discovery Phase — Design Process
In our Discovery Phase — the cornerstone of our UI/UX design process — we delve deep into understanding user needs, market dynamics, and project goals. By meticulously researching and empathizing with our users, we lay the groundwork for crafting intuitive and impactful design solutions.
Defining The Problem
Based on the comprehensive data gathered from our research we developed our persona: John. John represents our ideal user, meticulously crafted to embody the key traits, behaviors, and needs we identified through our research. He serves as a vital touchstone in our design process, ensuring that our solutions are consistently aligned with our users’ expectations and experiences
User Journey
To understand the user’s needs and identify opportunities for improvement, John’s user journey was created during his use of the Dealberg website — Customer Portal.
Problem Statement
After conducting thorough research and engaging with our users, we identified a crucial challenge:
'Busy procurement managers and restaurant owners need a more efficient and user-friendly way to manage their procurement needs because they struggle with limited vendor options, tracking orders, and navigating complex desktop systems while balancing their busy schedules.'
This problem statement captures the core issue we aim to address through our redesign of the DealBerg customer portal, guiding our approach to enhance user experience and streamline procurement solutions.
Creating Our Solution
Ideation
We began brainstorming and exploring various creative approaches to address the daily challenges customers face when ordering procurement products. Below are some of the early sketches from this ideation phase
Through several rounds of Crazy 8s, our ideas solidified. We focused on the most viable concepts and prioritized essential features using the MoSCoW method to distinguish must-haves, should-haves, could-haves, and won’t-haves.
Through comprehensive research, we identified the essential “Must Have” and desirable “Should Have” features, prioritizing those that could be developed most a within our project’s timeline.
User Flow
Information Architecture
After outlining the scope of our solution, we designed user flow to ensure our users enjoy a smooth and effortless experience.
Paper Wireframes
With a clear vision of our objectives and the requirements for our solution, we started brainstorming and sketching our ideas for specific pages. Here, you can see some of our initial sketches or paper wireframes, where we experimented with different layout options for our product.
Component Library
Since the design system is built to ensure consistency across all platforms — Customer Portal, Vendor Panel, and Admin Panel — it includes a set of universal components shared across all three, as well as platform-specific components tailored to the unique needs of each interface, such as those specific to the Customer Portal.
Low Fidelity Designs
High Fidelity Designs
