Case studies / Redesign and development for a vast laboratory equipment marketplace
Illustration

Redesign and development for a vast laboratory equipment marketplace

Science
Marketplace
E-commerce
Data-heavy system
B2B
Duration 1 year

Our team created from scratch the huge platform for a marketplace that covers different user roles, and operates globally, managing over 5 million products

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
    This Website uses cookies

    We use cookies to recognise your device and save the actions you have previously made on the Website, to prevent any malicious actions against the Website and its users, to improve users’ experience as well as to ensure the proper functionality of the Website.

    For these reasons, we may share your usage data with third parties defined in our Cookies Policy. By clicking “Accept all cookies”, you consent to store on your device all the technologies described in our Cookies Policy and Privacy Policy, while by clicking “Decline unnecessary cookies”, you decline to store on your device marketing and analytical cookies. You can change your cookie settings at any time by clicking “Cookies settings”.

    Please click on “Cookies settings” to see further information.

    To find out more about the categories of personal data collected and the purposes for which such data will be used, read our Cookie Policy.

    Cookies settings
    Decline unnecessary cookies
    Accept all cookies
    Cookies settings

    We use different types of cookies to optimise your experience on our Website. Click on the categories below to learn more about their purpose. You may choose which types of cookies to allow and can change your preferences at any time. However, be aware that if you choose to refuse or remove cookies, this could affect the availability and functionality of the Website. You can learn more about how we use cookies by reading our Privacy Policy and Cookie Policy.

    We use cookies in accordance with Article 6 GDPR based on the following grounds:

    a) consent of the user;
    b) legitimate interest of the Company.

    We collect the necessary cookies based on our legitimate interest, namely to ensure the functionality of the Website.

    Categories of cookies:

    First-party cookies are those cookies that are placed on the Website by the host of the domain, in particular Angle2 Agency.

    Third-party cookies are those that are placed on the Website by the domains other than the one the user is visiting. As a variety of features that are necessary to ensure the personalised and convenient experience of the user may not be delivered by the Website itself, the third-party cookies are used. We work with different third-party service providers in order to enhance your user experience and to analyse user behaviour on our Website.

    Third-party service providers may use their cookie files on our Website and you may find the relevant information about the use of cookies by them in their respective privacy documents. The list of the above-mentioned service providers is the following:

    c) Google Analytics;

    We only use cookies for the following purposes:

    Necessary Cookies

    We use these cookies to enable the functionality of our Website. You can choose to block Necessary Cookies in your browser settings. Nevertheless, remember, if you block Necessary Cookies, it may strongly affect the functionality of the Website.

    Statistic Cookies

    We would like to use them to understand how users interact with our Website (number of visits, behaviour) by collecting information anonymously.

    Marketing cookies

    These cookies and other tracking technologies are used to deliver relevant online advertising to you on other websites. These cookies are placed by us and selected third parties and enable adverts to be presented to you on third party websites.

    Necessary
    Statistic
    Marketing
    Confirm my choices
    Decline all
    Allow all
    Cookie Control Icon