Case studies / Marketplace for Labs
Illustration

Marketplace for Labs

E-Commerce
B2C
Complex Design System
Complex Design System
Marketplace
Duration 1 year

We have redesigned a team-centric marketplace for scientists and made it easier for labs to shop scientific supplies and equipment.

Illustration

Project Roadmap

1
UX Research
UX Research
Interview
Competitors Research
Informational Architecture
User Flow
2
UX Prototyping
UX Prototyping
Brainstorming
Figma prototyping
3
UI Design
UI Design
Moodboard
Figma Prototyping
Branding
4
Development
Development
Stage 1
Stage 2
Design Review

UX Research

Our client had an ongoing business in supplying laboratories with equipment and chemicals. The initial shopping experience was slow.

5 million products in a database made browsers lag, and the client’s order confirmation had an iteration of successive calls with the support team. As a result, the marketplace had a low conversion rate, and an excessive load on the support team.

Project Challenges

Accessible information
Accessible information
Create interface that would be able to provide a lot of information about lab products in an intuitive way
Fluid shopping experience
Fluid shopping experience
Create user flows for different users that would not only meet their objectives, but also be clear and understandable
Automative Orders
Automative Orders
Shift users from orders by phone to orders by the checkout process without the participation of the support team

Identifying Users

We clarified who are our users and what is their problems. It was two main groups of users revealed

Users Users

Problems Statement

We identified the problems to formulate solutions afterwards. This allowed us to identify features that have a big impact on the user experience and that we need to focus on

Users Users

User tasks for each user type

After initial requirements clarification, we understood that it remains unclear how users usually buy the equipment, which steps they undertake to reach their goals, and how enormous amounts of product data relate to each other. To tackle these uknowns, we created a task flow for every user type.

Understanding the way users usually do their job helped us develop a system that support them in their actions. Bearing in mind that we have two user roles that interact in the system while having separate tasks, we created the flow of actions done in the system by these types of users. It helped us organize the navigation and layout of the screens to support each user type.

Illustration Illustration

Solution Statements

After we figured out how users interact with our system and which tasks they try to solve, we took the problem statement list and added solutions to each of them

Onboarding
Olivia, Laboratory member
Problems
  • Which product to select?
  • Speed of work
  • How to find particular product features?
  • How to get approval from the lab manager and team members?
  • How not buy the same product as other team members did?
  • Problems
  • Solutions
  • Which product to select?
  • Speed of work
  • How to find particular product features?
  • How to get approval from the lab manager and team members?
  • How not buy the same product as other team members did?
  • Fast, intuitive, easy way to navigate system
  • Create a great database and uploading tool
  • Better product data organization
  • Incoming CCDA core summaries that contain 30 pages of information and only one paragraph of clinically relevant data that the EHR cannot find
  • Improved user interactivity to enhance questions/answers, reviews
  • Create shared Carts for group shopping
  • Create laboratory groups for easy review and manage shared orders
Solutions
  • Fast, intuitive, easy way to navigate system
  • Create a great database and uploading tool
  • Better product data organization
  • Incoming CCDA core summaries that contain 30 pages of information and only one paragraph of clinically relevant data that the EHR cannot find
  • Improved user interactivity to enhance questions/answers, reviews
  • Create shared Carts for group shopping
  • Create laboratory groups for easy review and manage shared orders

Information Architecture

To build an easy-to-use and clean system with a big amount of features and modules, we had to prioritize and structure the information. This allowed us to place pieces of information on every page in a meaningful way.

Product Map

UX Prototyping

After we made it clear what, how, and in which way we need to create, we started creating a black-and-white clickable prototype.

Product prototypes allowed us to approve business logic and confirm that we organized flows in the best possible way

We created the ability to search for an item in the navigation list, and also added the ability to customize this navigation. The reason for that is due to the fact that different hospitals may use different modules in the patient card.

Wireframes
Wireframes
Wireframes
Wireframes
Wireframes

Product Listing

This is a page where we introduced filters and product card preview. It was a challenge to put on one screen several user actions (like the ability to change the configuration of the product, change supplier), and information blocks (reviews, certifications, configurations)
As a result
Product Page

It required a lot of clicks to explore the product page and due to the huge amount of information, it was hard to find particular information on it. We organized all information in tabs while keeping it all on the same page. In this way, a user could scroll and read or just from tab to tab to quickly navigate through the content. Also, we put all configurations on the top that decrease the number of clicks for the user

Product Page

UI Design

On the basis of a UX research, we have created a UI Kit that contains examples of all repeatable elements in the system. Its creation leveraged future additions of the new features and keeps the the overall system consistent and optimized.

Illustration

UI Styles

We have built the design language starting from the Product Page. After a number of iterations with the client, we very able to find a key to a visual consistent interface that is very informative but easy to use

Fonts
Fonts Fonts
Colors
Primary
@Blue
#3360ad
rgb(51, 96, 73)
@Orange
#f28520
rgb(244, 132, 173)
Secondary
@Error
#ea1763
rgb(207, 21, 45)
@Success
#208c72
rgb(0, 161, 222)
Shades of Gray

As a result

As a result
As a result As a result
As a result
As a result As a result
Implemented best online shopping practises
Implemented best online shopping practises
The checkout process became intuitive, providing a lot of information about labs products in a clear way
Created a consistent modular interface
Created a consistent modular interface
Being confident in the solid design foundations, our client is able to concentrate now on growing his business
Achieved orders automation
Achieved orders automation
We have shifted users from orders by phone to orders by the checkout process without the participation of support team

Project Team

https://angle2.agency/wp-content/uploads/1-3.jpg

Yevheniia Klysha

Lead UX Designer

https://angle2.agency/wp-content/uploads/2-7.jpg

Viktoria Lozova

UX Designer

https://angle2.agency/wp-content/uploads/3-5.jpg

Eugene Yaroshenko

UI Designer

https://angle2.agency/wp-content/uploads/4-2.jpg

Eugeniya Zhuravlyova

UI Designer

https://angle2.agency/wp-content/uploads/5-3.jpg

Dmitry Oborsky

Lead Front-End developer

https://angle2.agency/wp-content/uploads/6-7.jpg

Oleksandr Pietushkov

CTO

https://angle2.agency/wp-content/uploads/7-3.jpg

Bohdan Chernovol

Front-End Developer

https://angle2.agency/wp-content/uploads/8.jpg

Vitalii Shkolin

Back-End Developer

https://angle2.agency/wp-content/uploads/9.jpg

Yuliia Alloucha

QA Engineer

https://angle2.agency/wp-content/uploads/10.jpg

Oleksandr Belkin

Project Manager

We're
all ears

Fill out the form to start the conversation — we’ll get right back to you

    Amazing!
    Thank you so much!
    See you soon
    We value your privacy
    We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies. Read More
    Accept all cookies