Sunny Day Fund Website Design
Explaining the value of a complex financial product
Project Overview
DURATION:
Three weeks
TEAM MEMBERS:
Michael, Iman, Jin and I
MY ROLES:
User Interviews
Contextual Inquiry
Comparative Analysis
Persona
Sketching and Wireframes
Design system, logo and illustration
Interactive Prototype
Usability Testing
High Fidelity Mockups
METHODS:
Affinity Mapping
Feature Inventory
Heuristic Analysis
Journey Map
Design Studio with Client
Wireflows
Voice and Tone Guide
Annotated Wireframes
TOOLS:
Figma
Miro
Adobe CC
Zoom
Slack
Sunny Day Fund is a fintech startup that provides economic relief to lower wage employees in the form of employer-sponsored emergency savings funds. They partner with businesses to deliver employer-matched funds that workers can access at any time to help cover short-term emergencies. My team and I worked with Sunny Day Fund to redesign their website experience to better explain the value of their product to employers and increase the rate of users who request a software demo.
Two Problems
The challenge they encountered was how to explain the value of this complex financial benefit so that users become interested and request a demo.
Before: Users had a difficult time understanding the large blocks of text and app screenshots
After: Users found a simplified, more visual approach more useful and understandable
RESEARCH
Interviewing both Employees and Employers
Although Sunny Day Fund had already done market research, we went deeper into the needs and goals of our primary user by interviewing business owners and HR representatives responsible for their company’s benefits packages. We also interviewed employees who make less than $75 annually and work in healthcare, service or supply chain sectors.
“Our workers are financially stressed. Their needs are immediate than what a 401K might offer.”
Key insights from interviews with employers and HR reps:
“I need benefits packages that make financial sense for both our employees and for the company.”
“I trust benefits carriers with a proven track record.”
“I need carriers to present their benefits clearly so that both my employees and I can understand them.”
“I’m uncertain about my finances and need to be frugal about how I spend money.”
Key insights from interviews with employees:
“My job doesn’t currently provide financial benefits that are a good fit for me.”
“When I am financially stressed, I feel weighed down and have a hard time sleeping.”
“During the pandemic I have unexpectedly saved more money because I’m not spending as much as usual.”
Assessing the current website with contextual inquiries
We asked four participants to go over the home page, request a software demo and share any general feedback.
Users had difficulty understanding and connecting with dense blocks of text on home page
“Employer Match” was not clearly understood to all users
Users were hesitant to give their information on the demo request form and didn’t wanted to be signed up for a newsletter
One HR representative feared how her email address might be used.
Primary persona: Judy, an HR Director
“It’s my job to look out for the well-being of workers so they can focus on their jobs”
HR Director, 43 years old, living in Greater DC area
Has been noticing a rise in employee stress and PTO requests
Wants to be an advocate for the wellbeing of struggling employees
Doesn’t want her time wasted by being cold called by benefits companies
Judy’s problem
Judy needs a way to quickly assess a benefits carrier so she can feel confident about providing trustworthy benefits to employees that are affordable for the company.
Secondary persona: Gary, a forklift operator
“It would take a huge weight off my shoulders if my employer provided financial benefits”
Forklift operator, 38 years old, living in Pittsburgh
Works overtime when he can to earn extra money
Needs his short term future to feel secure before he can think about his long term goals
Wants to fulfill more than just his basic needs and have fun once in a while
Gary’s problem
Gary needs a better way to manage his finances so that he can feel secure about handling unexpected financial emergencies.
Analyzing financial calculators from competitors
To help users understand how Sunny Day Fund could benefit them, we planned to implement a financial calculator. We looked at how a few of their competitors designed these interactive elements.
We borrowed from PayActiv’s model, using sliders in our final design
Businessolver adopted a questionnaire format in their calculator
DESIGN AND TESTING
A split experience for employers and employees
We hypothesized that the needs and goals of these two groups were different enough to warrant designing a separate experience for each persona starting at the home page.
The user flow is separate for employers and culminates in a demo request form
From sketches to interactive prototype
Sketches for the home page, the employer page and an information graphic.
Prototype Testing and Iteration: Fine-tuning the financial calculator
For the first round of testing, six users (five HR reps and one employee) requested a demo on our interactive prototype.
50% wanted to see more specific information about the app before clicking “Request a Demo”
66% preferred to see larger screenshots of the app for more detail about how it worked
50% felt that the financial calculator data was too general and wanted more specific labeling
33% were emotionally affected by the map graphic that illustrates the financial plight of American workers
I iterated on the prototype by:
redesigning the financial calculator with better data inputs that match the needs of employers
writing and formatting more descriptive text that users better understand the app functionality
choosing new app screenshots that illustrate the capabilities of the app more clearly
Before: The wording of the labels was confusing to some users
After: “Average Salary” was a more useful input for our users
Before: Users wanted a clearer understanding of how the app worked
After: New images and captions clarified the app’s functionality
Prototype Testing and Iteration: Adding a link to a new feature
In the second round of usability testing with five participants:
60% enjoyed the flow of information on the website
80% could verbalize the main benefits of Sunny Day Fund
20% mistakenly thought that the app was mobile only, expected a “download” button
After this round of testing, the client wanted to add a link to a financial wellness evaluation that they are developing.
Final Mockups
The desktop version of Sunny Day Fund’s website features a new color palette, design system, illustrations and logo design
The mobile versions of designed screens viewed in situ
CONCLUSION
Next steps
Test the usability of the placement and naming of the Financial Wellness Evaluation
Create a variation of the branding colors and A/B test them
Test the usability and iterate on the authenticated part of the website
Create and test a video that more easily explains the details of the various financial plans available to business partners
What I learned
Frequent communication with the developer proved tremendously beneficial to the end result. In our meetings we were able to explain the research that drove our design decisions and he responded with feedback, particularly on the feasibility of our financial calculator design. As a result, Sunny Day Fund developed and implemented the new design in only three weeks.
When my team members play to their strengths and interests, the team can operate smoothly and with a higher quality end result. I am a generalist and participated in aspects of user research, visual design and prototyping. But one team member had a background in interior design and her refined sense of color proved invaluable to redefining the branding of Sunny Day Fund.
One member of my team has a background as an academic researcher and taught me the importance of ethically obtaining informed consent and guarding the privacy of all participants.