Senior Citizens' Legal Services
Senior Citizen’s Legal Services (SCLS) is a non-profit organization based in the Santa Cruz area that provides free legal services for seniors over the age of 60 years. This was an actual client project where our team was asked to redesign the SCLS website to be more simple and user-friendly that clearly communicates their service and lead to more donations.
Timeline
Three Week Sprint
Team
Client Project with a Team of Five People
My Role
I was responsible for interview synthesis, sketching, wireframing, creating style guide, design library, accessibility consideration, visual design, prototyping, and design annotations for the final handoff to our client.
Methods
Client Management, Heuristics Evaluation, User Interview, Journey Mapping, Affinity Mapping, Persona Creation, SUS Score, Google Analytics, Competitive and Comparative Analysis, Card Sort, Feature Prioritization, Content Writing, User Flow, Wireframing, Prototyping, Usability Testing, Style Guide
Tools
Figma, FigJam, Google Workspace, Canva, Flipcause
Sneak Peek at Our Design
We were able to handoff a simple yet visually engaging design to SCLS with an improved SUS score from 43.25 to 92.49. Most importantly, our client was more than satisfied with our design and decided to implement our design by hiring a team of engineers.
​
How the SUS Score Improved Over Time
Beginning the Research
Understanding the Current Issue
We began our journey by conducting a usability test of the current website with five people over the age of 60 (primary persona) and five people who have donated in the past (secondary persona) to observe their reactions and feelings towards the current site. The test results in a SUS score of 43.25 or an F grade.
Screenshot of the current SCLS homepage
To further understand what users were struggling with, we carried out a heuristics evaluation of the current website.
Button Inconsistency
Two buttons are labeled the same but lead to different places
Unclickable Texts
This text appears clickable but cannot be clicked
Hidden Navigation
Important navigation items like “Contact Us” are hidden in the “More…” section
Donate Button
Donate button blocks the navigation and is distracting
Understanding Our Users
We also interviewed the same ten people we tested in order to understand their general donation behavior and how seniors used the technology and internet.
We then developed two personas that reflected the key takeaways from this research.
Meet Wendy
Primary Persona​
Values
-
Likes things that are familiar to them
-
Wants sites to be simple
-
Mainly use the internet to search for what she wants
Pain Points
-
Seeing cluttered websites with too many options
-
Finds it difficult to read small texts on screen
Wendy's Problem Statement
Wendy seeking legal aid needs a clear way to find information on services and eligibility so that they can get the help they need.
Meet Elizabeth
Secondary Persona​
Values
-
Wants to contribute to something impactful
-
Wants to have different payment options
-
Research about the organization before donating
Pain Points
-
Not knowing how her donation will impact the organization
-
Not having enough information about the organization she’s donating to
Elizabeth's Problem Statement
Elizabeth needs to empathize with the organization’s mission so that she feels inspired to financially support their cause.
Kicking Off the Design Process
Design Decisions
Based on our findings, we narrowed down our area of focus for our mid-fidelity prototype
-
A focus on communicating the SCLS story and mission that is simple yet inspires users to donate to the organization
-
Easy to understand navigation and information architecture
-
Accessibility
-
Making contact forms and donations a simple process
We tested our mid-fidelity design to four primary personas and three secondary personas to test the general usability of the prototype.
​
Users’ satisfaction improved tremendously to a SUS score of 80.8 but we still had some feedbacks we needed to implement in our iterations.
Testing Our Design
We tested our mid-fidelity design to four primary personas and three secondary personas to test the general usability of the prototype.
​
Users’ satisfaction improved tremendously to a SUS score of 80.8 but we still had some feedbacks we needed to implement in our iterations.
Iterations
Onboarding Overlay
We initially had an onboarding popup for users to easily navigate to a page they needed to visit. However, this was confusing for all users when they landed on the homepage, so we stored it into a button saying “Am I Eligible” to allow users to easily access the information when they needed it.
Before
After
Navigation Bar
Since 75% of the primary personas expressed they had difficulty reading small texts in the navigation, we bolded the text to provide better contrast and legibility.
Before
After
Indicating Pages are Scrollable
Since 57% of users didn’t notice that some pages were scrollable, we showed segments of next content above the fold by reducing the spacing between header and H1.
Before
After
Style Guide
It was crucial for us to have a style guide that we could all follow to polish our design into a high-fidelity prototype. I was responsible for deciding text styles, color styles, and overall UI guidelines.
Grid System
I created a 12-column grid system to make sure all elements in the site were aligned and look consistent.
Text and Color Styles
Texts and colors were based from the original branding guide in the Canva file provided by SCLS.
Text Style
While I kept the same H1 typeface from the branding guide for brand consistency, I changed the rest of the typeface to Inter and set the smallest text size at 20px for better legibility.
#25397B
#4FC3C7
#B9E7E9
Color Style
I kept the dark blue (#25397B) and the turquoise (#4FC3C7) in the SCLS logo as the main colors in our design to reflect the image of Santa Cruz where SCLS is located.
The turquoise was also put at 40% opacity to provide contrast from the darker shade of blue, making the overall site calming and relaxing yet trustworthy.
Final Color Palette
Main background color (60%) of the site was set at #FDFDFD, the dark blue was set as the main text colors (30%), and the turquoises were set as the CTA colors (10%).
Color Contrast
I also made sure these color combinations were accessible to our users. I created three different color combination patterns and all of them passed the WCAG AAA standard.
Text Spacing
I set the line height for paragraphs at 170% of font size to decrease user’s cognitive load and better legibility.
Design Library
I created a design library that includes components like header, footer, buttons, and images to ensure consistency for all element sizes and to streamline team iteration process.
Other Accessibility Considerations
Since primary personas had difficulty reading small texts, I added a text resizing feature at the top.
​
I also added a Spanish translation feature since SCLS services a handful of Spanish speaking primary personas.
I suggested SCLS to add an alt text for all images throughout the site for users using a screen reader tool.
Folder Like Navigation Bar
Since 66% of primary personas we initially interviewed expressed they like what’s familiar for them, I designed the navigation bar to look like folder tabs, creating an engaging interaction that’s also reminiscent of an experience going through folders to find a document.
Testing the Hi-Fidelity Solution
We conducted another round of usability tests to three primary personas and three secondary personas and further improved the SUS score to 92.49.
Second Iterations
Before
After
Emphasizing Links
We underlined and bolded the “Read more” hyperlink since users had a hard time differentiating the text and the button itself.
Simplifying Texts
We further condensed information and stored the full detail in a separate page with “Learn More” hyperlink since users felt the Tenant Rights page was overwhelming.
Before
After
User Friendly Instructions
Although the message box in the “Contact Us” form gives an instruction, users wanted an example sentence to have an idea of what to write. So we included an example message allowing users to easily express their particular needs in the form.
Before
After
Time for the Handoff
I created a separate Figma file with annotations to our design, explaining design decisions and style guides for developers to refer to upon the handoff. I also highlighted which part of an element is clickable and what happens once an element is clicked to ensure all interactions from the prototype are translated into the development.
Next Steps
We communicated recommended next steps to SCLS upon design handoff
-
Deciding how the design will be implemented
-
Gather and create contents like images and videos highlighting real client cases
-
Short and concise writings
-
Adding alt tags on images to include not only a clear explanation of an image but also important keywords for better SEO.
Learnings
Working on a project with users over the age of 60 truly opened my eyes to accessibility in UX design. I was constantly using a contrast checker to make sure the colors and texts I was using had enough contrast ratio to be accessible, which I wouldn’t have been so aware of if it wasn’t for this project and interviewing senior users. Through this experience, I was able to develop a habit of making my design accessible before finalizing on my colors and texts.