Overview
Redesigned and developed a Toronto Bioscience e-commerce website to provide accurate diagnostic and research products tailored to customer needs. Through the website reconstruction, the company aims for customers to find targeted products more easily and to improve the overall design theme as well.
My Role: UX/UI designer, Web designer using ‘WordPress’ to create website
Target Audience: Businesses and customers interested in purchasing bioscience products that can be used for diagnosis and research
Client: Toronto BioScience
Duration: 10 weeks
My accomplishment
I worked as a solo UX/UI web designer for a project and was responsible for redesigning the website and revising it using WordPress. Additionally, I improved the product display functionality, making it easier for users to find their desired products quickly among many similar options. I also collaborated with the product manager to determine the project’s requirements and roadmap more efficiently by proposing short-term and long-term designs. Implementing these enhancements led to a successful improvement in the user experience, resulting in a 36% increase in engagement.
01 Define
Problem Statements
After looking at the previous website design, I found several issues with the layout and branding. Below is a summary of the issues I found.
Research & Discovery
I analyzed competitors to understand how they displayed numerous products in similar category section. In the health and bio industry sector, usually there are so many products that it is not easy to distinguish them from one another, and it can be some inconvenience for the customers regarding finding target product.
After researching competitive companies, I found some efficient methods they used from 4 companies.
- List product names in alphabetical order
- Arrange products in card design format
- Using a connected page to view all product categories
Hypotheses
Solution for displaying many similar products on the website.
- What if we remove product photos from each product because all the photos are similar?
- What if we use a connected page to show the main categories?
- What if we display the listed items or black items instead of using an image carousel?
- There needs to add each section title and more other efficient sections on the home page
02 Ideate
Wireframe
After analyzing competitive research, I believe we can incorporate some effective features from competitors into our website. I have created three versions of low-fi and mid-fi wireframes based on this research. I think the mid-fi wireframes will help clients choose more easily and intuitively.
- Low-fi wireframe
From the wireframes, we realized that the block items were not effective if we removed the photos for each product. And we chose version 3 because we found it highlighted each product category title effectively.
- Mid-fi wireframe
03 Design
Style guide
Design Reiteration
Before & After
1. Arranging over 300 similar products
- Because of the nature of pharmaceutical products, there is little uniqueness in the product design, so product photos are not important
- Organize products into categories to make them easier to find
- Use Accordion Design to highlight category titles and save vertical space on your page
2. Reducing vertical space & Enhancing layout
- Reduced vertical space by dividing sections of a web page from one column to two columns.
- To maintain consistency in the layout, the sections are divided into two columns and the reduced video size is displayed as a pop-up window when played
3. UI Design Improvement
- Utilized designated brand colors and typography to ensure consistency in UI design
- Used header images related to the company’s main products to enable people to see the company’s character at a glance
What I Learned
During this website redesign project, I gained valuable insights through competitor research and analysis. Each company had its own approach to showcasing products, and I was able to identify the best method for our needs based on reliable data from user testing and continuous meetings with managers. This project was a great opportunity for me to deepen my understanding of the health and bio industries as a product designer.