Category
Web Design
Freelance UX Project
Team
UX Designer (Me)
Director of CIFWI
Illustrator
Web Developer
CIFWI Volunteers
Context
Jan - Jul 2022
(7 months)
Tools Used
Figma, Loom, Google Analytics,
WordPress, Notion, GSuite
Launched in 2020, CIFWI’s outdated website hindered user access to its essential resources and did not accurately reflect the organization’s current branding, prompting a need for a redesign.
As a nonprofit, CIFWI addressed language barriers, cultural stigma, and limited mental health resource access for Asian immigrant families in Philadelphia. As such, a key focus during the redesign was highlighting their available programming opportunities.
Overview
Over the course of 7 months, I collaborated with a team of 5 and worked closely with the Director of CIFWI to execute this project from user research to design implementation.
The redesigned website prioritized improved navigation and effective mission and values representation.
In the project’s initial planning phase, I established a UX plan and timeline after accessing CIFWI’s resources, goals, and projected project timeframe. Due to resource constraints as a non-profit, the redesign scope was narrowed to focus on the homepage.
This ensured alignment with realistic expectations amongst the team, and guided our approach, encompassing a heuristic analysis, website analytics, user interviews, ideation, wireframing, and finally WordPress implementation.
The 3 Primary Goals for the Redesign:
To improve the overall UX of the website by making information more accessible, and increasing the visual appeal to better represent CIFWI's mission and values.
For this Project, there were 4 Initial Design Constraints & Requirements:
Due to limited time and capacity, the redesign will primarily be focused on the home page of CIFWI's website.
To make maintenance easier post-revamp, the WordPress template of CIFWI should not be changed.
The website should embody diversity, a sense of community, and should not feel corporate.
The main design color candidates are yellow, red, and blue, reflective of CIFWI's current branding.
An initial heuristic assessment revealed initial concerns about the site’s current layout, site navigation, spacing, and UI.
This assessment improved my understanding of CIFWI and its services while also aligning the Director with my initial design concerns, as I evaluated the website against established design principles.
Heuristic Assessment
To validate the assumption that the site's target audience consisted of older millennials, I conducted an analysis of CIFWI's Google and WordPress Analytics. Surprisingly, insights revealed a predominantly younger user demographic.
This pivotal moment in our design process challenged the initial assumption of an older immigrant Millennial audience and a bias for an "Eastern" web design style, which had been preferred by the Director until then. The emerging data enabled me to propose a fresh design direction tailored to a younger demographic.
Other Key Analytics Insights:
Average Engagement Time was 33 seconds, which is low.
[Follow-Up Ques]: What causes the low engagement? Are users finding what they need on the website?
The Home Page, Team Page, and The Wellness Leadership Program took up majority of user views.
[Follow-Up Ques]: The Wellness Program attracts a lot of traffic. Should it be highlighted on the home page?
English was the predominant user language, contrary to our initial assumption of equal split with Chinese.
[Follow-up Ques]: Is it still optimal to maintain duplicate web pages in both Chinese and English?
While the analytics data provided valuable insights, I sought direct user feedback to gain a deeper understanding of how CIFWI's current users engage with and navigate the website.
I conducted interviews with four active members of the CIFWI community to capture their experiences and impressions.
Their Input Revealed 3 Key Themes to Improve On:
Links to different pages that are provided in various sections of the home page seem random and unintuitive.
Stylistically, the home page looks outdated and lacks enough media (pictures, etc.) to balance out the text.
Based on the key frustrations highlighted by CIFWI’s users, I then focused the redesign into three key areas: 1) Web copy, 2) Nav menu restructuring, and 3) Home page layout.
Addressing web copy proved to be a meticulous process, involving a comprehensive review with the Director to ensure its alignment with the updated branding. The emphasis was on crafting clear, concise, and reader-friendly copy.
Following the web copy overhaul, the final phase involved a usability test on the updated resources, leading to the inclusion of user-friendly instructions for easier accessibility.
The AAPI Therapist List was a vital resource offered by CIFWI, and its enhancement was a focal point. Testing with the Director revealed initial user confusion when navigating the Excel spreadsheet. Consequently, clear instructions were added to assist less tech-savvy users.
Next, in the absence of a style guide at CIFWI, I redesigned the UI (while following the initial constraints of either blue, yellow, or red) and collected community feedback, culminating in a welcoming, friendly, and diverse branding approach.
Incorporating CIFWI members' perspectives to align with their identity, we selected a color scheme featuring blue and yellow, while excluding red from the initial options due to concerns of it being perceived as overly "feminine" in light shades and too intense in dark shades.
In the process of creating UI assets, CIFWI lacked illustrations that precisely conveyed the issue they were addressing. Thus, I collaborated with a local artist to bring CIFWI’s vision to life visually.
The collaboration with Justine Kelley extended over a month, encompassing discussions on conceptual ideas, and multiple draft feedback rounds, leading to the final product featured on the homepage.
While building out the website in WordPress, I encountered some unexpected constraints from CIFWI's existing WordPress template, which resulted in 4 key design changes.
CIFWI's website was hosted on a basic WordPress template, constraining design customization options. During this phase, I collaborated with CIFWI's volunteer web developer to seek guidance on overcoming these limitations and explore alternative solutions.
Want to check out the redesigned CIFWI website yourself?
"Shirly helped revamp our organization's website (www.CIFWI.com). She is creative, detail-oriented, responsible, collaborative, and truly a joy to work with. Throughout the 6-month project, Shirly conducted a comprehensive website assessment, developed a timeline with realistic goals and target dates, organized meetings with multiple project partners including the illustrator, web developer, program participants, and supporters. She created and implemented the new design of our website. We cannot be more happy with the final product, as the website accurately reflects the culture of our organization."
Esther Hio-Tong Castillo
Director of CIFWI
3 things that I learned and/or would do differently next time…
Get input from and involve the engineers early on in the design process - I wished I had consulted with the volunteer WordPress web developer earlier in the design process, as I realized later on that some aspects of my design cannot be implemented due to WordPress template constraints. I realized that discussing feasibility at different points of the design process is important in order to prevent roadblocks later on.
Everyone has assumptions, so it's always important to advocate for the user - Sometimes when working with clients, disagreements on different design directions are normal. I learned that it's important to advocate for user research and strive to back up design decisions through data to make sure that the user's needs are being met.
If I had more time, I would do additional user testing to gather feedback on the redesign - While we did not have time to gather user feedback on the redesign, doing so would be beneficial to further benchmark the success of the revamp.
MOBILE DESIGN
Connectic
[2023 Indigo Design Award Winner] Improving access to mentorship opportunities for early career professionals
USABILITY TESTING | CASE STUDY
HireScoutr
Refreshing the job applicant experience for a recruitment software start-up
OTHER | FREELANCE
Miscellaneous
A gallery of other side projects I've worked on in the past, including freelance client work and design sprints.