Building FOID's Design system and website to reflect its community
FOID is a nonprofit Arts Collective focused on tackling mental health issues through performance and creative arts, having done community engagement throughout Canada and Northern America.
ROLE
UI/UX Designer
Web Designer
Illustrator
DISCIPLINES
Interaction design
Prototyping
Graphic design
TOOLS
Figma
Illustrator
Framer
Procreate
TIMELINE
3 months
THE PROBLEM
Art-led advocacy wasn't reflected to users
Mental health conversation, particularly surrounding Bipolar disorder are often clinical and uninviting. While FOID creates a space to approach difficult conversations through arts as an entry point, its existing branding and social media marketing didn't fully reflect its advocacy. Ineffective communication limits the visibility of the mission and reduces its impact.
Inconsistent typographic style and margins within organizational branding material
Imagery style doesn't fully convey artistic nature of organisation
Inconsistent margins and padding within informational and marketing material
Research insight through Five Second Test to ascertain user thoughts and opinions
Due to time and budgetary constraints from an organizational standpoint extensive UX research was avoided. Instead I focused on implementing simple, quick, and impactful method to gain more insight into areas of improvement.
Image shown for five second test
Organizational Identity
Users understand the brand is about mental health and advocacy, however on average they didn't identify an association with artistic endeavours.
Stand out elements
Bird motif was highly noticeable to users.
Different fonts used to represent the brand.
Potential changes
Smaller text is difficult to read/identify.
The wave motif frames the logo in a square shape, harder to adapt/represent in circular icons.
FINDINGS
Current branding doesn't highlight/identify art as part of the NGO, its signature.
HOW MIGHT WE
Create a website with a cohesive design system that highlights art-led mental health advocacy?
The solution, a website reflects FOID's brand value, identity, and unique value proposition in the space of mental health awareness in Canada.
IDEATION
Interviewing Stakeholders to uncover insights, needs, and constraints
Conversations with Ishaa the founder highlighted information that should be included in the website, as well as design constraints to prioritize FOID's identity as an organization.
Insight
Needs
Identity (constraints)
FOID has participated in events, conferences, and panel discussions all around the world.
Social media channels including a Youtube channel, Spotify podcast, and instagram page.
Art based advocacy to share and highlight works from community members
As part of engaging with the community, dance videos, screenings, and more that should be included.
The work Ishaa is doing is rooted in academic studies and publications
Nuanced takes on different experiences and narratives, all are welcome
Highlighting the members that shape and built the organization to what it currently is.
FOID is based on a memoire of the same name by the founder
Safe conversations surrounding mental health and daily life.
Exploring visual identity through benchmarking & moodboarding
Creating a concise site Map and simple navigation
Further developing imagery to strengthen mental health advocacy communication with users
The bird is a key signifier for the organization's identity. Its cultural association with peace, calmness and gentle emotions are redesigned and reinforced by a sketch style to highlight FOID's artistic ties.
Sketching different bird positions
Developing background imagery
Reimagining wave imagery
Adding tree imagery to maintain theme
Second iteration bird imagery
Third iteration bird imagery
Reimagining wave imagery
Adding tree imagery to maintain theme
Modifying UI style guides
The solution being proposed consist of a simplified version of the current Transit app design that enlarges text, removes buttons within banners, and utilizes clearer instructions to reduce user cognitive load. General design was done in Figma utilizing frames, auto layout, and spacing which is later imported into ProtoPie.
FINAL DESIGN
A website reflecting FOID's core mission: nuanced narratives through art
The final design includes several illustrations adapted from FOID's branding which subconsciously help user associate the organization with art. Additionally, cards were used to contain text to introduce colloquial language and a more interesting design while maintaining the minimalistic style.
OUTCOME
Positive feedback from the community
The website has been shared during mental health advocacy events throughout America and Canada, with many sharing positive feedback regarding the design, navigation, and layout of the website. In particular many have shared they've gained a clearer understanding of FOID's purpose and identity.
Currently, the website is still being continuously improved as the organization expands its activities and engagement with the community. We are also continuously receiving feedback and iterating to make improvements.
REFLECTION
Communication is key
Creating this website and branding elements with Ishaa expanded my knowledge of communicating through visuals. Simple adjustments helped group content together or separate different categories which improved feedback received from the community.
Back
Product design
Rethinking Transit Accessibility for Older Adults
Redesigning the Transit app with accessibility features to reduce user cognitive load while maintaining usability for older adults and everyone in between.