E-commerce Feature

Project Overview

EVOLVE is a growing company that uses AI technology for the development of therapeutic antibodies. The goal was to design the e-commerce feature on their current website that would help researchers purchase antibodies.

Project Duration

3 Weeks

My Role

UX/UI Designer
The challenge was to design an ecommerce feature on the EVOLVE website so that their users are able to search, compare and buy antibodies from different vendors.


EVOLVE uses a patented AI to design and develop diverse, fully-human antibodies for university researchers, pharmaceutical and biotech companies. They work with partners at the discovery stage to accelerate the speed of antibody discovery.


In our interview with the CEO, we were able to learn more about Evolve, its customers, its competitors, and how the research process is done.

Competitive Analysis

Feature Competitive Analysis

After talking to our client, we were able to perform a feature competitive analysis that allowed us to compare different features from a variety of websites including both direct and indirect competitors.

Some of these websites have similar features but none of the direct competitors have an e-Commerce platform. We saw this as an opportunity for our design. From Indirect competitors, we saw that all of them have a pdf datasheets in their websites.


Next, we developed a market positioning map to understand where the gaps are in the market and where our product stands vs our competitors. Currently, we are more on the traditional side, but in the future, we would like to position ourselves as a modern and 100% trustworthy company.

User Interviews

After understanding the business and the market, we moved to user research. Since our target group is very specific we were able to interview a Chief scientific officer and get valuable insights from him.

Affinity Diagram

After the interview, we proceeded to organize our data using an affinity diagram in order to find patterns and themes.
"Some reagent websites were very confusing and some of them were cluttered."
~Chief Scientific Officer.

User Persona

Based on all the data we collected so far, we constructed a user persona to understand who we are empathizing with, what are their goals, needs, pains, and gains when looking for antibodies online and browsing these websites.

Meet Samuel, who is a University antibody researcher. His specialization is in oncology and wants to discover new treatments and drugs.

One of his goals is to advance his antibodies research with validated materials. He is frustrated when he sees cluttered information when searching for specific antibodies. And finds the whole process to be slow and tedious.

Information Architecture

After prioritizing the features of the ecommerce platform we started thinking about the information architecture.


One of the tools is the site map where we used the current website that EVOLVE has and added the ecommerce part that is called antibodies.

User Flow

We created this user flow so we can visualize Samuel’s navigating through the Website, which we will present later in our final high-fidelity prototype.

E-commerce Path

Low-Fidelity Wireframes

Next, we start building our screens and putting together our low-fidelity wireframes. We tested the prototype with 5 people, and gathered some valuable insights:

Usability Findings

  • A category page was needed before users decide to either search for a specific antibody or see the different types.
  • Users wanted to see more payment methods like Paypal.
  • Contact information after checkout was important to be added for users in case they had any questions.

Mid-Fidelity Wireframes

We made some adjustments based on the feedback we received from our users and developed our mid-fidelity wireframes.

We then again tested our prototype with 5 users, and here are the insights:

Usability Findings

  • Users need a CTA to add a product and get to the cart directly from the categories page.
  • “Cart” is a more relevant ecommerce term than “Basket”.
  • Order by purchase order was needed at the moment of the checkout for users who would like to buy antibodies through their company.
  • Upon placing an order users would like to see the order details.

Mood Board

Next, we defined our brand attributes and created the mood board. Our brand attributes are: Futuristic, Trustworthy, Transcendence, Exploration, and Intelligence.

Style Guide

To help us speed up the process of developing our high-fidelity prototype, we created all the components and other user interface elements and put them together into a Style Guide to make sure we keep a consistent look and feel of our product.

We use Open Sans in our typography due to its clean look and use high contrast colors between sections using blue teal and white colors. Teal is a calm color that represents open communication and clarity of thought which match the brand attributes we were aiming for.

High-Fidelity Wireframes

With the feedback received we created our high-fidelity wireframes. These are some of the most important screens.


We applied the new brand attributes to the homepage. We kept the same sections that the original website has but added the antibodies link on the navigation bar and a CTA that will take users to the shop page.


Each antibody has a lot of specifications and information that is important for researchers. In order to avoid a cluttered layout we use drop-down menus to hide information that users can expand.


Users have 3 options. They can either sign into their account, create an account or sign in as guests.


We added multiple payment options like Paypal and Order by Purchase Order which were suggested by users.


The order details and EVOLVE's contact information were added as the users suggested.


Welcome to check EVOLVE's prototype here.



This project helped me to remind me that UX designers can work in completely different fields with each project.


This was a challenging subject since we were not familiar with this industry but as designers, we were able to come up with ideas and solutions using all the different UX tools. The fundamentals of designing for people are the same across all fields since people keep the same.


This project was a good reminder of how the design thinking process should work. It’s a non-linear approach and allows us to iterate.


study case



Smoked Meeting Express

UX/ UI Study Case