AminoChain Empty States
AminoChain streamlines biosample procurement, safeguards data, and accelerates ethical breakthroughs in healthcare. Our primary application, the Specimen Center, serves as an e-marketplace for biosamples, hosting over 400,000 specimens from reputable biobanks worldwide. Through the Specimen Center, researchers can send inquiries to biobanks to procure the samples they need for research.
I designed empty states for the Specimen Center.
Role
Product Design
Timeline
2 months | April - May '25
Team
1 designer
Problem
How can we design for empty states on the Specimen Center?
Outcome
I designed animations and CTAs for empty states and defined multiple use cases for each. I worked with the engineering team to determine which states were feasible, then shipped those that were. 4 out of 8 empty states were shipped— the empty cart, no sample, connectivity issues, and loading states.
Problem #1
Users aren’t incentivized to add samples to their cart on the SC
Standard UX practices involve designing empty cart states with actionable CTAs to motivate users to browse products and add items to their cart. What currently exists as the empty cart state on the inquiries page of the Specimen Center is a blank space. Users are thus less likely to add samples to their cart unless an empty state is designed for it.
State #1
an empty cart state
I created an empty test tube rack animation that accompanies an “Add to Inquiry” call-to-action that, when clicked, guides users back to the Specimen Center table. See it here.
Problem #2
Users don’t know when the Specimen Center is processing a search request
Standard UX practices involve designing loading states that display useful information to indicate when content is being loaded, prevent user frustration, and maintain engagement during wait times. When a user searches for a sample on the SC, they don’t see a loading state.
State #2
a loading state
I created a loading animation that accompanies phrases like “Clearing search” and “Updating filters” to communicate to users that their search is being processed. To see it, try searching on the SC here.
Problem #3
Users don’t know when their search results yield no results
When a user searches for a sample on the SC that yields no results, they aren't provided with steps that can either help them find an alternative or communicate with biobanks to see if they might have it in the future.
State #3
a no sample found state
I created no sample found animation that provides two CTAs to a) clear their search or b) submit an inquiry to a biobank to communicate to users that if the Specimen Center doesn't have their sample, then there are alternate routes they can take to acquire that sample. To see it, try searching on the SC here.
Defining use cases
for all empty states
I created a design brief that defined all the use cases for each empty state, whether used or unused, to make discussions and handoffs with the engineering team easy.
Unused "no file found" state
Designing and prototyping
from scratch
These animations were designed and prototyped from scratch in Figma, all on one page. Once each frame was created, I uploaded them through LottieFiles and exported them as .json or dotLottie files, depending on the request of the engineers. This process took around 40 hours, minus meeting hours.
