A BILINGUAL BENEFIT FINDER TOOL
Helping the United States Goverment deliver services to the community.
FULL CASE STUDY COMING UP SOON.
https://www.usa.gov/es/buscador-beneficios/discapacidad
Timeline
1 year
My Role
UX designer, storytelling, visual design, research
PROBLEMKiva center clients have difficulty finding mental health resources on the center’s website
Kiva Centers, located in Massachusetts, needs help creating a new resources portal for their clients, called ZIA. Users are not locating information as easily as they wished, due to the vast amount of information on the website. This sparked a question- how could we help clients easily navigate the site and locate the resources they need?
THE SOLUTIONOffer all resources in a single portal
Clients should be able to find the resources they need with just one click
Offer the top resources on a single page
Build the ZIA resources portal to exist independently of the Kiva Site
Direct users to the service they need
Make the search intuitive by matching icons to resources
Direct the user to the specific service they need
Offer a new information architecture + engagement
Redesign information architecture
Easier connection to support groups
Allow users to navigate the site intuitively
Provide community-related content aligned with the brand
PRODUCT DESIGN PROCESSHaving access to insights from our client made the design process feel very focused from the start, which was vital considering the short amount of time we had to design the product. In addition, insights from our user-testing phase allowed us to quickly pivot our direction when needed.
An insight-driven design process
KICK OFFMeeting the client on day 2 provided context for the product and good insight into the details of what they need. This initial conversation was eye-opening; it allowed us to start our ideation process.Kiva needs a new product to better serve their clients
“We need a product that works well in both, desktop and mobile. We would like something that is easy to use... accessibility is very important to us. Also, we would like it to represent our brand. ”
COMPETITIVE AND COMPARATIVE ANALYSIS We prepared visuals to show the client some examples of easy site navigation. By analyzing other sites and comparing these to the current site, we realized that there was an opportunity for a new solution: a portal with improved navigation and easy-to-find resources.
User-focused products make finding information quick and easy
Click on images to expand
DISCOVERY: KIVA CENTER SITE ANALYSIS We asked users to complete a task over Zoom: find the “Online Youth & Young Adult Support Groups” section.
Clients navigate large amounts of information in order to find resources
Painpoints
Resources are hard to find in the drop-down menu list
Sub-headers are not clear once on the page
No details are provided about the Peer Support Groups (only date and time)
Click below to expand user flow
DISCOVERY: USER RESEARCH / AFFINITY MAPPINGWe conducted 3 live interviews and had 23 users complete 2 surveys. Our questions aimed to discover how users interact with the product, identify pain points, and what resources they are looking for. Then, we analyzed the data through affinity mapping.
Finding resources isn’t easy & simple for users
RESEARCH QUESTIONS
Were you able to find the right section, complete the task?
How long did the task take you?
How easy was the task we asked you to complete?
How do you feel about the navigation of this site?
What did you like about the site?
Do you have any suggestions to improve this site?
MAJOR TRENDS
Through affinity mapping, we identified 4 trends, to consider during the product design stage:
Ease of use is what users value the most
Engagement with the site is important when looking for resources
Look & Feel helps the user trust a website
Feeling of connection with the organization and the community is key
Click on button to see affinity mapping
DISCOVER & EMPHATIZE: PERSONA We designed an archetype of the Kiva Centers’ user based on client feedback. A key demographic for the Kiva Centers are young adults.
DISCOVER & EMPATHIZE : USER JOURNEY Zoey searches for Online Youth & Young Adult Support Groups on the current site.
Empathizing with the user allowed us to find pain points very quickly
DISCOVER & EMPHATIZE: USER PROBLEMZoey needs to find resources and connect with other peers because she wants support in overcoming her struggles.
We needed to find a way to solve Zoey’s issues
How might we make resources more accessible for her?
How might we help create a better experience when navigating the site?
How might we connect users to peer led support groups, services and trainings offered by the community center?
Click on image to enlarge
Click on image to enlarge
IDEATION: NEW INFORMATON ARCHITECTURE We designed a new information architecture focused on access to resources. Due to the large amount of information that the site offers, organization and a clear hierarchy became the main goal. At this stage, we created a new user flow task to user-test the new information architecture.
Click below to see Site Map and User Flow
New landing page focused on resources
DESIGNI hand-sketched, then moved on to low, mid, and high-fidelity digital iterations. This section shows the design evolution of two sample screens: the landing page and the Financial Assistance page (shown in the mobile version only).
Goals: organization, connection with the community, accessibility, and a fully-responsive design
DESKTOP DESIGN PROGRESSION FROM HAND SKETCHES INTO FIGMA
These hand sketches are the foundation of the digital versions to use in prototyping for user-testing.
I sketched two versions of for the home screen and decided to explore the one using icons (below left).
THIS IS HOW THE HOME SCREEN EVOLVED FROM LOW-FIDELITY TO HIGH FIDELITYInitial wireframe
Clickable resources are shown with icon placeholders
Mid-fidelity
Added resources icons, social media links, main logo
Added content suggestions for the Spotlight section
Added hero section copy
High-fidelity
Added Zia logo
Added Search Bar @ top navigation
Images and final copy
THIS IS HOW THE LANDING PAGE AND THE FINANCIAL ASSISTANCE SCREENS EVOLVED FROM LOW-FIDELITY TO HIGH FIDELITYLanding page
From placeholder resources to icons
Lorem ipsum text to final copy
From placeholder to final logos
Spotlight section placeholder content to final copy and images
Hero section: from no-image to final image
Financial Assistance screen
From placeholder resources to icons
Lorem ipsum text to final copy
From placeholder to final logos
Call To Action text and button added at mid-fi and hi-fi stage
Hero section: from no-image to final images
Full Resources Menu added at mid-fi and hi-fi stage
MOBILE RESPONSIVE DESIGN PROGRESSION FROM PAPER SKETCHES INTO FIGMA
I hand-sketched two versions of the home screen and one version of the Financial Assistant page. At this stage, my goal was to achieve the same look & feel as the desktop version on the mobile version.
Click below to see accessibility considerations
Click below to see all initial wireframes
USABILITY TESTINGWe implemented changes & design updates based on user testing feedback. Below are the key design changes from Low-Fidelity through Hi-Fidelity stages.
User feedback let us perfect our product
MOBILE: PEER SUPPORT SCREEN ITERATIONS
Initial screen without filtering results and add to calendar features
Sort by feature added
Add to calendar feature added
Filter results feature added
Calendar icon added
Select filtering criteria sliding screen
MOBILE: ADDED LOCAL NAVIGATION NEXT TO FOOTER TO ALL RESOURCES SCREENS
Initial screens without local navigation
Local navigation added to mid - fi screens
Local navigation in final color added to hi - fi screens
DESKTOP: NAVIGATION IMPROVEMENTS
Initial screen has a search feature by drop-down menu, accessible from the main navigation
Search feature was changed to a clickable search field
As the user clicks on the search field, a pop-up overlay is available, which is useful when scrolling down a long page
Local side navigation added to all resources pages as shown in the Financial Assistance page
MOBILE AND DESKTOP FINAL SCREENS & PROTOTYPESThe final product
MOOD BOARD Working on this mood board early on in the process was a good way to kick off the creative process. It was important to reference the following:
Street art by Worcesters’ artists, where the Kiva Center is located
The Pueblo People, who are linked to the founders of the center
The main turquoise hue used throughout is Kiva’s signature shade
The gold and warm reds hues evoke a feeling of warmth and positivity, will influence the look & feel of the new Zia Portal
STYLE GUIDE
OUTCOMEThe client was impressed by the depth of research & insights presented, as well as the final product.
The client loves the product and looks forward to implementing it
“It looks even better than I had envisioned! There is color, but not too much color... It is so clear, simple and easy to use. I can’t wait to implement it.”
NEXT STEPS
We will keep working on iterations based on user testing.
Continue prototyping and testing features
Test the product with actual users of the Kiva Centers
Expanding filtering options to all other resources pages
Update site map according to stakeholders’ direction
Expand accessibility and inclusion by adding voice commands
The product will keep improving
CONCLUSION + WHAT I LEARNEDCommunication. Understanding stakeholders’ needs early on in the process, and receiving their feedback, was incredibly helpful! It allowed us to pivot direction when needed and made the design process feel very collaborative.
Iteration. Applying user testing feedback to several iterations of the product, was a key factor in the success of the product. I am looking forward to continuing working on the next updates.
Client constraints. Working within the client’s constraints made the design process feel very focused, allowing us to deliver just what the client needed.
Social impact. This project felt incredibly inspiring to work on for me. Utilizing technology to serve the community is one of my personal goals.
Rapid prototyping. Being able to rapidly implement design changes to test with users was fantastic! It made the design process feel dynamic and user-centric.
Timeline. I also wanted to analyze the way we utilized our time during those 18 days of work. In retrospect, I would have loved to start the Design Workshop phase one day earlier.
I really loved working on this product because of its potential social impact. The product will keep on changing and improving, according to the user's needs. Furthermore, knowing that our design will make finding resources easier for people in need, is what feels most rewarding.