Redesign and development for a vast laboratory equipment marketplace
Our team created from scratch the huge platform for a marketplace that covers different user roles, and operates globally, managing over 5 million products
Project Roadmap
1
UX Research
2
UX Prototyping
3
UI Design
4
Development
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
Create interface that would be able to provide a lot of information about lab products in an intuitive way
Fluid shopping experience
Create user flows for different users that would not only meet their objectives, but also be clear and understandable
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
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
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.
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
- 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
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.
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.
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)
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
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.
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
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
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
Being confident in the solid design foundations, our client is able to concentrate now on growing his business
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
Yevheniia Klysha
Lead UX Designer
Viktoria Lozova
UX Designer
Eugene Yaroshenko
UI Designer
Eugeniya Zhuravlyova
UI Designer
Dmitry Oborsky
Lead Front-End developer
Oleksandr Pietushkov
CTO
Bohdan Chernovol
Front-End Developer
Vitalii Shkolin
Back-End Developer
Yuliia Alloucha
QA Engineer
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