Addgene Mobile Redesign

A mobile-friendly experience for lab members to order materials

TIMELINE

5 months

ROLE

As the primary designer on this project, I helped the product manager facilitate 15 user tests to inform the redesign of our website

TEAM

Senior designer, product manager

TOOLS

Figma, Miro, Zoom, Google Sheets

IMPACT

Increased usability of website on mobile for our increasing amount of mobile users

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

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.

Usability Testing Objectives:

Validate whether the redesign meets the needs of users by chatting with internal stakeholders
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

Interviewee Quote:

“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.”

STEP 3: FINAL EXPERIENCE

After gathering feedback from our usability tests, I synced with our product team to narrow down the most relevant takeaways for our designs. The following videos depict the changes we made to the experience including a new feature and fresh design components. You can see the original lo-fi prototype on the left with the refreshed hi-fi experience on the right. The main changes we had are listed below:

1. Viewing your cart

2. Finding your AAV page

3. 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

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. "
- Product Manager

" Angela and [product manager] did an amazing show-and-tell of the usability testing results of the Mobile Global Header prototype. Great job!"
- Director of Product