Problem
Empowering the Masses is a Dallas-based nonprofit that provides job training programs, ongoing community outreach and workshops, and a food pantry. They currently have a website, but it suffers from several issues that impede usability, including:
-
severe issues with legibility throughout
-
inconsistent design patterns
-
a color palette that obstructs usability
-
a clunky site architecture
-
an overall lack of consideration of the user experience and task flows of the organization's target users
Markup of Existing Landing Page
Solution
Revamp Empowering the Masses' website so that it's both fully responsive and user-friendly. To do this I researched the organization's values and core services, the needs of the users and people it serves, and used this to drive the development of a coherent design system.
Overview
Timeframe
Team
80 hours
Solo Project
(Coordinated with Client)
Role
Product Revamp
Research
Interaction Design
Tools
Wix
Figma
Adobe Photoshop
Empathize
Background
Empowering the Masses (ETM) is inspired by the motto, Education + Advocacy = Empowerment. They offer programs in Phlebotomy Training, Community Health Worker Training, and Community Training. They also help run a weekly food pantry as well as ongoing workshops and events on topics ranging from community health to financial literacy.
Currently, most students enrolled in their job training programs heard of the programs through word of mouth, often via either as a recipient or volunteer in their workshops or food pantry. While ETM's job training courses and events are well attended, there is likely a greater reach within the community that it could achieve with a website that is user-friendly. A user-friendly site could boost its ability to serve those in need via better connecting with both people seeking assistance online and with prospective donors.
Project Goal
Using the CMS platform Wix I will create a prototype for a new website that is more user-friendly and responsive to the needs of ETM's target users. I will collect feedback from the organization and its members and use that along with my own user research to guide the site redesign. My redesign will provide a prototype that builds out pages related to specific task flows that reflect ETM's core target users. I will conduct user testing on my prototype to inform necessary revisions. This prototype will then provide a general framework for ETM to build out the complete site.
Research Methodologies
-
Survey with people enrolled in one of Empowering the Masses programs; the survey covers their background and experience, what brought them to the organization, how they navigated the organization’s available programs, and what the experience of onboarding was like for them via Empowering the Masses’ existing website
-
User interviews with 3-5 people who are given a scenario that they are a grocery store clerk in Dallas seeking to level up their career and interested in how Empowering the Masses might help them
Who I Talked To
-
3 participants, all women, ranging in age from 24-38, 2 self-identifying Asian people, and 1 hite person
-
1 former teacher turned product designer, 1 former architect turned product designer, and 1 software engineer/ accessibility specialist
-
Survey participant: former domestic engineer, aged 52, African American.
Assumptions and Risks
Synthesize
I assumed that testing the onboarding process for signing up for one of ETM's training programs, Community Health Worker Training (CHWT) would also serve as a barometer for how user-friendly the site is for other users, such as those interested in donating or volunteering. I also assumed that issues found in the CHWT would be shared across its other programs (Phlebotomy and Community Training).
-
Because the training programs make up the bulk of ETM's services I assumed the clarity of the onboarding and description of ETM's core work would inform whether the less complex task flows of donating and volunteering felt user-friendly.
-
This latter assumption was also the product of tight time constraints where I strategically planned for a more in depth user testing process for my forthcoming prototype/site redesign.
-
My research interview participants did not reflect the target demographic for those interested in ETM's training programs.
Key Takeaways
-
My research interviews indicated the ETM site is not providing a smooth onboarding process for those interested in ETM’s training programs.
-
3/3 shared the site felt cluttered, difficult to navigate, and not catered toward a user interested in ETM’s training programs.
-
3/3 found the mood of the website and its general visual appearance did not reflect what ETM does.
-
Descriptions of the mood included: corporate, geared toward donors, and too overwhelming in its use of color and arrangement of text.
-
The response from my one survey participant and information from my ETM contact person, Ayumi, indicated that the current website is not how the majority of program participants learn about ETM’s programs. They instead tend to rely on direct contact with ETM staff, word of mouth, and learning of program offerings via in-person events and workshops held by ETM.
Define
Project Goals Revisited
After conducting user testing on the existing site I realized my prototype would need to be grounded in a thorough understanding of ETM's target users and the priority level of these users. I also realized the order and structure of information on the landing page needed to not only succinctly describe the organization, but also reflect the priorities and mental models of each of the target users. These include prospective donors and volunteers, someone in need of food and interested in ETM's food pantry, and prospective students for ETM's training programs.
Information Architecture
To better understand why my research participants had such a difficult time navigating the site I outlined the existing site's Information Architecture Flow.
I identified the following issues:
-
the navigation bar is unnecessarily long and uses an inaccessible font size of 12px.
-
the services menu includes things such as Soft & Life Skills, Phlebotomy Certificate Prep, and Social Determinants of Health, which are really workshops or initiatives that are included within larger umbrella programs; as such it is very difficult to discern what ETM's core programs actually are.
Landing Page Information Flow
Beyond obvious issues with legibility with distracting images set behind text with little contrast, my research participants noted the structure of Information on the landing page felt confusing and disorienting as evidenced by this information flow diagram. While my participants were testing out the training program flow and I did not test flows for donors, volunteers, and those seeking assistance from ETM's food pantry, the feedback I received clearly indicated users from any perspective could not easily discern what ETM does and the importance of its programs and services.
Issues noted
-
Very little regard for how the information is structured along the prospective fold points
-
Areas with sparse text and information where the CTAs feel randomly placed followed by a bombardment of text that is sometimes repetitious, such as the two mission statements
-
Section immediately following the hero image shows how to donate along with one upcoming workshop, a pairing that feels random and lacking in information that might motivate a donor
-
May be a future need to highlight more than the one upcoming workshop, which the current design pattern does not easily support
Ideate
Mood Board
& Precedents
Design Pattern Explorations
Brand Values
educate
advocate
empower
My research participants testing the existing ETM site desired a clear user interface that is grounded in the organization's values and an awareness of the people it serves. To help my efforts in building a new graphic language of design patterns I explored some of the images drawn from ETM's Instagram, as well as some precedent sites from nonprofits and schools.
Ideate
Design Patterns & Style Tile
After some back and forth with ETM's Research Specialist and Communications Coordinator where we explored options for font and color pairings, we decided we liked the pairing of Libre Baskerville with Open Sans. This combination meshed well with ETM's brand values (Educate, Advocate, and Empower), while also conveying a sense of openness and ease for the user.
Wireframing
Mid-Fidelity Desktop Wireframe from ETM
I received the following wireframe from ETM as a starting point for the redesign. One central problem I encountered when I tested this wireframe in ETM's preferred CMS platform, Wix, was that the navigation bar, even if simplified from the original, could not fit comfortably one line with the logo and Donate CTA. Even with the small 12px font size for the navigation bar shown below, the elements would fall outside of the gridlines that ensure the site is fully responsive and the logo text also became illegible.
![Pages from ETM website feedback 01 [2022.08.26].jpg](https://static.wixstatic.com/media/3bf2e8_e92e030e201e4fea928d99825044362b~mv2.jpg/v1/crop/x_0,y_0,w_1432,h_1131/fill/w_672,h_531,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Pages%20from%20ETM%20website%20feedback%2001%20%5B2022_08_26%5D.jpg)
Landing Page Options
I explored options for the landing page using more accessible font sizes and which fit within responsive gridlines. Since ETM is very active on social media and most users allegedly use that more than its website I considered placing these links on the header. This seemed advisable given ETM's goal is to connect with as many people in need of its services as possible.
-
I ultimately advised against placing social media links in the header out of concern for navigating potential donors off of the landing page.
-
My contact person at ETM and I both did not see the need to add additional color such as the dark maroon shown in ALT 3. We preferred a simplified blue color palette with some light warm grays as neutrals.
-
ETM enjoyed the two-tone navigation bar shown in ALT 2, however, this UI pattern would work well only if I could have the top section fade away completely and only the navigation section fade and re-appear as needed. This was not a functionality supported by Wix's editor and to ensure the site could be easily managed and updated by ETM we did not want to add design features that require coding and work beyond Wix's basic editor.
Mobile
_Page_9.jpg)
To make design patterns consistent across mobile, desktop, and tablet devices I realized I needed to explore the use of content cards for events and training. These content cards can be stacked horizontally or vertically. I also realized that utilizing a carousel would not be an advisable option given Wix's basic editor platform does not support such a pattern.
Prototype & Test
Information Architecture Flow Chart
In preparation for my prototype, I created this information architecture flow chart to help organize my proposed site structure. This also helped me identify the parts of the design are crucial to ETM's core target users and which I would then focus all my efforts on in building the prototype.
Prototype
Task Flows & Wireframing
I focused my prototype and testing on 3 task flows that reflect ETM's primary target users. Due to time constraints, I did not include a flow for a user seeking food assistance as I assumed this user's needs would be met if I successfully designed my volunteer task flow, which describes the food pantry and how to volunteer.
In my User Testing, I questioned my participants on what their mental model was for each of these archetypes and whether the landing page informational flow and navigational flows were matching each of these mental models.
User Testing
User testing on my high-fidelity prototype was conducted on mobile as the majority of users access the site via mobile. That said, I still needed to ensure my design patterns were consistently translating across desktop and mobile, especially as ETM noted prospective donors and other nonprofits seeking to collaborate do not always use mobile to visit the site.
Who I Talked to
-
5 Participants included 1 white man aged 32, 1 Asian woman aged 24, 1 Asian woman aged 28, 1 self identifying mixed race woman aged 29, and 1 white woman aged 38
-
5/5 participants were generally all well suited toward the volunteer target user, but did not fit the prospective student or donor demographic background
-
5/5 participants were product designers, 2 with a background in education, 1 in fashion, 1 in architecture, and 1 in communications
Assumptions & Hypotheses
-
Users will find the site much easier to navigate and far more clear as to what the organization actually does
-
Users will find the site’s structure matches their mental model per each scenario
-
Users will identify what ETM’s top priorities are, what the range of users visiting might be, and what ETM’s target audience/ who priority users are
Synthesizing Results
Affinity Map
I organized the results of my user testing using along the following categories and themes.
At a Glance Summaries
-
Participants generally found the site design very legible, enjoyed the visual hierarchy and use of colors
-
2/5 had issues with the amount of text within the CHWT page
-
5/5 had some issues with some of my terminologies for CTAs or headings
Definitions of Success
-
Completion: 5/5 succeeded in completing the three tasks with no major issues
-
Completion Time: this was not measurable since I was moderating and soliciting feedback, but generally, the tasks were completed with ease and any moments of confusion were not severe enough to impact the task flows
Recommendations for Next Steps
Header CTA terminology need to be revised as necessary for clarity. The intermediary donation page should be eliminated to streamline the donation task flow. The “Who We Are” section should come first
instead of the mission and the events should go before the training program as they are more likely to need a marketing push. The CHWT page should be synthesized more perhaps with the use of an accordion UI pattern if the CMS Wix allows. The Donate CTA is shown on the navigation bar in desktop
but does not fit on the mobile side; to retain its priority status on the mobile end it should be added to the hamburger menu.
Prioritizing Revisions
I used the following Frequency to Severity Map to sort the problems uncovered in my user testing in terms of severity and frequency. In the end, I addressed every one of these items except for reducing mobile text sizes. Additionally, I worked extensively on ensuring the pages were more consistent and also more responsive to device fold points across desktop, tablet, and mobile.
Reflections & Next Steps
I hope that my prototype will provide a robust framework for the full build of Empowering the Masses' new site and also make it easier for them to update the site over time. Given additional time I would have loved to connect with more students enrolled in ETM's program to hear about their experiences and also to recruit far more survey participants. My next steps will be reconnecting with ETM after my coursework to help build additional pages so they can publish the newly revamped site.
I want to thank Ayumi Tamaru at ETM for providing me with this amazing opportunity to work with her on revamping ETM's site so that it's user-friendly and better promotes ETM's impressive community work and initiatives.
