top of page
AssistList Social Meetup.JPG

AssistList Internship

Team:

Tricia Pang (Co-founder, senior product manager)

Edison Ko (Lead Designer)

Karan Gill (Customer Service Manager)

Hazel Yiip (Product Manager- Intern)

Eduardo Celi (Web Developer-Intern)

Tools:

Figma

Timeline:

8 weeks, summer 2022

Summary

In the summer of 2022, I found my first job as a UX Designer at AssistList, a charitable organization that empowers the community to buy, sell, and donate medical health equipment. I worked with an amazing group of interns across diverse disciplines and learned from two experienced mentors (Tricia and Edison). During my summer internship at Assistlist, I redesigned the FAQ and the Contact Us page of the Assistlist website. I started with research and sketches to high-fi mockups and prototypes. I worked closely with this project's product managers, customer service managers, and engineers. 

Summary

Objective

Reduce the number of questions asked via the Contact Us form, especially when documentation already published on the FAQ

Goals

1. On the Contact Us Form, in place of the contact fields, the user is prompted to first select a topic from drop-down
2. Based on the topic, display some sub-questions
3. If you still can’t find what is needed, reach us through live chat
4. Only display the contact form if unable to find an answer to their questions

Before v After- FAQ
 

current flow.png
after design.png

Before v After- Contact Us
 

before.png
after.png

User Research

I actively collaborated with the customer service manager to investigate the pain points and frustrations of our users while navigating through our current Contact Us and FAQ pages. 

I discovered through access to customer service emails that users are repetitively asking questions that are already answered in the FAQ. 

Using Hotjar, a website heatmap, and recording tool, I learned that users also have trouble navigating through the FAQ due to abundant categories and folded accordions.

Email Inquiry

Gmail51.jpg

Hotjar

Hotjar.jpg
Resarch

Competitive Analysis

I looked at some competitors' FAQs pages and Contact Us forms to find inspiration.

My takeaways for FAQ pages include:

1. Top 5 Questions or Popular Questions is a useful category to place at the top

2. Include a survey at the bottom (e.g., Was this answer helpful?) to help gather user feedback

3. Having a search bar can help to find the answer quickly where there are too many FAQs

My takeaways for Contact Forms include:

1. Link to the FAQ page so users can browse through the list of existing questions answered

2. Separate information and form into two areas and leave some spaces in between.

3. Labels for the input fields should be clear to inform users of mandatory and optional fields

Ideation

Information Archetecture

After discussing with the customer service manager, I reorganized the IA with our users (buyers, sellers, and visitors) in mind. Then I designed 3 versions of the initial mockup.

Common questions from our:

Buyers- How do I connect with the seller when there is an issue with the product?

Sellers- How do I list an item?

Site visitor/ first-time user: How do I sign up?

IA.png

V1. Sort by Categories

Providing broad categories for users to navigate the FAQs

resources_v1.png

V2. List FAQ with Horizontal Menu

Providing the FAQs in a long list and having a menu at the top to anchor to specific categories

resources_v2.png

V3. Sticky Menu on the Side

Providing a long list of FAQs and a sticky menu at the side for quick navigation

resources_v3.png
Ideation

Prototype

I actively consulted with the engineers as well as my design manager and product manager to finalize the design of the FAQ and Contact Us page.

Final Prototype- FAQ

Final Changes:

1. Chose v3 that has the simplest design for users to have a clear view of the FAQs

2. Implemented a search bar to help users to enter keywords to find their question

3. Inserted a link to the Contact Us form at the end of the page if the user didn't find their answer

FAQ.png
Expanded FAQ.jpg

Final Prototype- Contact Us

Final Changes:

1. Linked the FAQ for users to find answered questions

2. Centered all content and made text left-aligned for legibility

3. Added asterisk to mandatory input fields

Contact Us_Desktop.png
Prototype

Conclusion

Future Implementations:

1. Survey to gather insights on the effectiveness of the answer

2. Media content to better explain the answer

Survey

Survey.png

Media Content

Media.png

Reflection

I'm very honored to work on a large-scale revamp project from the very beginning. I was able to complete the design thanks to all the support and trust from all of my teammates at AssistList. I learned to collaborate with other designers, product managers, customer support staff, and engineers. I took advantage of user research findings by past designers and contact us emails to deeply understand our users. I also challenged myself to think outside the box when iterating with the initial mockup aside from the references I searched from other websites. I had the opportunity to present my designs to different teams to gain feedback and practice my delivery skills. The FAQ and Contact Us page were not implemented at the end of my internship. However, I am now a permanent designer at AssitList as a volunteer like most of my other colleagues. Therefore, I will have the opportunity to continue to enhance the designs and conduct user tests for this project in the future. 

Conclusion

You may also like...

Shopy.jpg
Ezzz.jpg
LV.jpg
bottom of page