AssistList
Team:
Tricia Pang (Co-founder, senior product manager)
Edison Ko (Lead Designer)
Karan Gill (Customer Service Manager)
Hazel Yiip (Product Manager)
Eduardo Celi (Web Developer)
Tools:
Figma, Hotjar, Notion, Adobe Suite
Timeline:
3 Weeks
Summary
AssistList is a non-profit organization that empowers the community to buy, sell, and donate medical health equipment. I worked with an amazing group of colleagues across diverse disciplines and learned from two experienced mentors (Tricia and Edison). One of my first projects is redesigning the FAQ and the Contact Us page of the Assistlist website. I started the project by conducting research on our users and our direct and indirect competitors. With enough insights about the users, I moved on to ideation with sketches of low-fi prototypes. Then having multiple discussions with my product manager and design lead, I am able to come up with a few versions of prototypes that the team selected as the most suitable ones for the final implementation. This project would not be completed quickly and professionally in just three weeks without the help and support of my product manager, engineers, customer support team, and stakeholders. Currently, the implementation is still in the progress of development, please stay tuned for the launch of the redesign.
Objective
As per the product manager's request, we must reduce the number of questions asked via the Contact Us form, especially when answers are already documented on the FAQ page.
Goals
1. Reduce email inquiries:
Decrease the number of emails sent to the customer support team (currently, we receive about 10 emails per week)
2. Reduce the number of visits to our Contact Us page:
Increase the number of visits to the FAQ page and decrease the number of visits to the Contact Us form
3. Add more FAQs to the list:
Collect email inquiries data from the customer support team and conduct user research using Hotjar. Add 5-10 more frequently asked questions to the page.
User Research
I actively collaborated with the customer support 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 on the FAQ page.
Using Hotjar, a website heatmap and session recording tool, I learned that more than 30% of our users have trouble navigating through the FAQ due to disorganized categories and folded accordions.
Email Inquiry
Hotjar
Competitive Analysis
I looked up other not-for-profit and e-commerce websites to seek design inspirations and techniques on how to properly organize the FAQ page.
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 is helpful for users to browse through the list of questions that are already answered
2. Separate text information and the contact form into two areas and leave some white spaces in between for scanability
3. Adding red asterisks to indicate mandatory fields helps users quickly fill out the form
Ideation
Information Archetecture
After discussing with the customer support manager, I reorganized the IA with our users (buyers, sellers, and visitors) in mind. Then I brainstormed and created 3 versions of initial mockups.
Common questions from our users include:
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?
V1. Sort by Categories
Providing generic categories for users to navigate the FAQs
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
V3. Sticky Menu on the Side
Providing a long list of FAQs and a sticky menu on the side for quick navigation
Prototype
I actively consulted with the engineers as well as my design manager to finalize the design of the FAQ and Contact Us page.
Final Prototype- FAQ
Final Changes:
1. We chose v3 which 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 bottom of the page for users who still need help
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 red asterisks in front of mandatory input fields
Conclusion
Future Implementations:
1. Consider adding a survey to gather insights on the effectiveness of the answers
2. Consider adding media contents to better explain the answer
Survey
Media Content
Reflection
I'm very honored to work on a large-scale revamp project from the very beginning of this job. I was able to complete the design thanks to all the support and trust from all of my teammates at AssistList. Through this work experience, I learned to effectively collaborate and communicate with other designers, product managers, customer support teams, and engineers. I took advantage of user research findings by past designers and customer email inquiries to deeply empathize with our users and their user journey. I also challenged myself to think outside the box to be creative when prototyping and avoid heavily referencing existing interfaces from the competitive analysis. I had the opportunity to present my designs to different teams to gain feedback and practice my presentation delivery skills. The FAQ and Contact Us integrations are close to being launched and I will have the opportunity to conduct usability testing and A/B testing since I am going to continue to stay at AssistList as a freelance UX designer.
You may also like...
