FAQ Page Design
Role Freelance Designer, 2023
Client Wontonface
Scope Website Design
Collaborators
Nicole Garcia — Product Designer
Noorain Manekia — Developer
Nicole is a 3D artist, designer, and educator with a large social media following. From the content she’s created and shared on social media, she receives a lot of frequently asked questions and she wanted a dedicated resource for users to get answers quickly.
Because most of the site traffic will be mobile, we wanted to optimize for
Responsiveness performance
Design
Accessibility
In the future, we’ll want to expand the design and include additional questions, resources, and a product section showcasing some of Nicole’s favorite design-related products.
Final Design
Process
Discovery
After our initial meeting to discuss the project, we established our goals, objectives, and the problem we were seeking to solve.
Then I did some research on FAQ pages from companies ranging in size to understand how their questions and resources are organized and what components are used on the page. I also kept a log of questions that Nicole gets frequently asked from her followers on social media, specifically Instagram and TikTok.
We organized the page into three different sections:
Questions
Resources
Links
But in the future, we’ll want to expand the design and include additional questions, resources, and a product section that’ll showcase some of Nicole’s favorite design-related products.
FAQ page sections
Organizing the questions into sections
Iteration
The FAQ page was a mobile-first design since most of the site traffic will be mobile — we wanted to prioritize building solutions for mobile devices over desktops to provide the best user experience. To optimize for small screens and touch-based interactions, the design involved:
Simple layouts
Clear and legible typography
Easy-to-use navigation
The mobile design involved multiple iterations
Once the design for mobile was finalized, we started to design for desktop. The iteration process for desktop wasn’t as time intensive since we were able to finalize the page layout and components used.
Desktop iterations
Design System
To ensure consistency and agility as the site evolves, a design system was established starting with an icon library. In the future, we’ll want to expand the design and create additional pages such as an ‘about me’.
We used icons from Phosphor Icons because it’s an open-source icon library with a wide range of options and styles that align with the brand’s visual identity.
Local components in Figma
Handoff
Once the design was finalized we met with the developer, Noorain Manekia, to start the product development process. Before our kickoff meeting, I created documentation for the page that included:
Design intention
Specs
Content
Assets
A suggested schedule for check-ins to support and answer any questions that may come up during the development process
Since the designs were created in Figma, I organized the documentation and the design system within the same file to ensure a smooth and successful handoff process.
Documentation in Figma
Page Content + Copy