HomeownershipSF: A website redesign to better educate and help low/middle-income San Franciscans become home-owners.
Redesign HomeownershipSF's (HSF) website to better explain their value proposition, plan for future expansion into house brokering, and streamline key user flows when users access the site. HSF is a non-profit that helps low/middle-income San Franciscans find affordable homeownership opportunities.
An overhaul of the information architecture of the site through consolidation of top navigation options and highlighting what HSF does: help you find an affordable or Below Market Rate home and get loan assistance. Testing showed that the redesign gave users had a clearer understanding of what HSF does and less cognitive load. Less important, third-party or peripheral information was moved to a less visible part of the site ("Resources") and users were more confident about what to do from the homepage.
What I did
- Client communication
- Survey of first-time home buyers
- Research synthesis into personas, key user flows, journey map
- Low-fidelity wireframes using Sketch
- Usability testing
Before and After
Project type: Website redesign
Timeline: 2.5 weeks
Tools used: Sketch, Keynote
Client: Carlos Serrano-Quan, Executive Director of HomeownershipSF
Before our initial client meeting, we visited the current HSF website and recorded our knee-jerk reactions (and reasons behind them) to the layout and content to identify some of the immediate problems we could address.
It quickly became clear that one of the site's biggest pain points was information hierarchy; at first glance it is difficult to understand
- what HSF does
- what one can do through the HSF site.
Another big issue we found was outdated, anonymous or redundant content with old/broken links and questionable authorship.
We began our research by speaking with Carlos, our client. Using that interview as our springboard, we began outlining who we needed to speak with to get a better understanding of the user's journey.
We reached out to recent home-buyers through personal connections, classmates, instructor connections. We chose to pursue one-on-one emails, phone calls and interviews to ask them about their general experience buying a home.
To find people who may not be in SF but had recently bought a home, I emailed friends, posted on Facebook and also posted on an alumnae community board asking for volunteer respondents. I interviewed 10 friends and connections, 2 over the phone and 8 through an email (questions below.)
My teammate Steven attended one of the required 6 hour workshops offered by three of the groups HSF is partnered with. Hearing about his experience there and the people he spoke with made the confusion and inefficiency of the home-buying process much more tangible and relatable to us.
We began identifying key pain points and design opportunities, and it became clear that some of the biggest areas for improvement on the website were
- workshop scheduling
- setting expectations
- finding a BMR home one is eligible for.
With lots of tradeoff points, key stakeholders, government red-tape, each step in the home-buying process is important and time-sensitive, especially given the current housing market. To synthesize our research findings into personas and user flows, I drew a journey map to document our hypotheses and consolidate our learnings.
- Repeat BMR home buyer
- First-time home buyer, not BMR-specific
- First-time BMR-specific home buyer.
We validated the accuracy of these personas by speaking again with our client and continuing user interviews.
We used card sorting and several rounds of user testing to decide on the information architecture of the site. We built it with the assumption that future additional categories may need to be added as HSF expands its service offerings.
Paper Prototyping and Usability Testing
I sketched out paper wires for the key screens and tested them on some of our original interviewees and fellow classmates.
Our visual designer Maggie then iterated our paper designs until we felt ready to move forward with digital wires.
Digital Prototyping and Usability Testing
Putting "Sign up for Workshops" front and center is confusing
Avoid having the landing page begin directly with the map of home listings, it's too much information at once
Making the process/program overview portion more interactive allows users to progress at their own pace
Establish clear next steps to take during the map/home listing portion so users know where to go from there
Iterate the filter function's labels and icon
After finalizing our design in greyscale, our visual designer Maggie brought my wireframes to hi-fi mockups.
I'm proud of how far and deep my team went when conducting business and user research, and we accomplished a lot in a short few weeks. Carlos plans to build our website redesign later this year and is in talks with his stakeholders to decide on a budget, so my team has agreed to be available for him once things start moving :)