HomeownershipSF

HomeownershipSF: A website redesign to better educate and help low/middle-income San Franciscans become home-owners.

Challenge

Redesign HomeownershipSF's (HSF) website to better explain their value propositionplan 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.

Result

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

Initial Design

Proposed Redesign

 

Summary

Project type: Website redesign

Timeline: 2.5 weeks

Tools used: Sketch, Keynote

Client: Carlos Serrano-Quan, Executive Director of HomeownershipSF

Role: UX researcher and designer on team of 4, with Steven TranMaggie Schrepel and Marina Broido

Deliverables: research findings, high fidelity mockups, final presentation, development specifications sheet

 

 

Heuristic Evaluation

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.

Initial evaluation of the current homeownershipsf.org website design.

 

 

Research

Client Interview

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.

Notes from our first interview with Carlos, our client. 

Email Survey

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.)

Email survey template.

Contextual Inquiry

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. 

A packed workshop session of prospective below-market-rate or affordable home buyers.

A packed workshop session of prospective below-market-rate or affordable home buyers.

 

 

Synthesis

Affinity Mapping

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.

Affinity mapping: writing each key takeaway on a post-it note and grouping them by topic.

Journey Mapping

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.

Synthesizing a week's worth of research into personas, key flows, key features and next steps.

Personas

  1. Repeat BMR home buyer
  2. First-time home buyer, not BMR-specific
  3. First-time BMR-specific home buyer. 

We validated the accuracy of these personas by speaking again with our client and continuing user interviews.

 

 

 

Sitemap

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

User feedback:

  • 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

 

 

Final Design

After finalizing our design in greyscale, our visual designer Maggie brought my wireframes to hi-fi mockups.

 

 

Marina, Maggie, Carlos (our client), me, and Steven. Carlos is holding up HSF's goals for the year, one of which was to redesign the website.

Final Thoughts

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 :)