Category /
selected work
Addgene Mobile Design
A mobile-friendly experience for lab members to order materials
Tags:
Mobile / High-fidelity / User testing
Role:
Primary designer / User researcher
Impact:
Enhanced usability for growing number of mobile users
Timeline:
5 months
step 1:
context
What were the redesign goals?
We observed that the percentage of users who access the site on mobile were increasing day by day so we sought to make the site more mobile-friendly.
Our target users were principal investigators or lab assistants who search through our catalog to order lab materials and/or visit our site to learn more about science resources. We sought to save time for them in their busy workdays by simplifying the user experience and make the site responsive.
step 2:
USABILITY TESTING
What did we want to test?
Usability Testing Objectives:
1. Validating whether the redesign met the needs of users by chatting with internal stakeholders
2. Showcase and test the new design system for the first time
My team and I used a lo-fi prototype I designed to conduct usability tests with 15 different users. I ran most of the calls in partnership with the product manager on our team.
33% of interviewees work in the lab, 13% work in customer/sci support and then 7% in tech transfer, C-suite, facilities, recruiting
Almost half of respondents rated the experience a 4.5 while 33% rated it a 5 and 20% rated it a 4
“I think it's ordered well by what I'm most interested in probably as a customer. which is what is going on with me, what am I buying and how do I get to buy more stuff in the catalog.”
Interviewee
Employee at Addgene
step 3:
Final experience
Final Design
1. Viewing your cart
2. Finding your AAV page
2. Logging out
Viewing Your Cart:
27% of respondents thought it was unclear that the dot means you have something in the cart. People thought they were notifications. We changed this to a more obvious cart in the menu with the specific number of items in the cart as well.
Finding AAV Page:
In order to find the AAV page, the user had to click on buttons before. We added dropdown menus to simplify the number of clicks. One user remarked how they “liked that the [menu] sections are viewable without scrolling.”
Logging Out:
27% of interviewees found it hard to find the “log out” button, which was at the bottom of the "Profile" section upon clicking the "My Account" button. We subsequently moved the "log out" button up a level for greater visibility.
step 4:
reflection
Reflection
I’m glad we tested our designs with a lo-fi prototype first so we could focus on the main flows instead of jumping to the hi-fi designs immediately. Although I would have liked to work with developer to see this launch, I was proud to present this to our internal team with the product manager.
Stakeholder Quotes:
"Shoutout to Angela for being an awesome user testing collaborator and helping me plan user testing for the mobile responsive homepage design. She did a great job conducting many user tests and had insightful ideas for how to improve them as we went along. She also helped me create a very clear and organized presentation of the User Testing results for the Global Header Mobile Design."
Justine Petrillo
Product Manager at Addgene
"Angela and Justine did an amazing show-and-tell of the usability testing results of the Mobile Global Header prototype. Great job!"
Heather Zirkle
Director of Product at Addgene
