s a y l a m b d a
SAYLAMBDA
SayLambda is an online platform that provides prospective homebuyers with the information and community that they need to make better-informed decisions about homeownership.
My Role
UI/UX Designer
Brief
SayLambda needs to redesign a few pages of their website to better display relevant homeownership assistance options to users.
Tools Used
Figma, Photoshop, Miro, Asana
Scope
1.5 months
What I Did
Business Research, User Research, Information Architecture, Usability Testing, Prototyping
The Problem:
How might we remedy the information overload users are experiencing?
The Background
SayLambda is a nonprofit organization dedicated to demystifying homeownership by providing prospective first-time homebuyers with information, financial incentives, counseling services, and community.
The Brief
They are seeking to refine their website’s search results.
The new product will provide SayLambda’s clients with an experience that will enable them to more fully utilize the organization’s website and engage with the SayLambda’s brand, going from curious to committed clients.
The goal of the SayLambda UX Design project is to discover how to display search results so users can easily visualize their options and quickly select the best search result for them.
What could be improved?
Usability and Design Inefficiencies
I kicked off the discovery phase of the design process with a Heuristic Evaluation of the current site to get a better idea of usability and design inefficiencies.
This Heuristics Evaluation was based off of Nelson-Norman Group’s 10 global standards for a website. I went through each standard to make sure the website aligned with these standards, and thus was easy for users to use.
Standards with a severities 3 and 4 were my highest priority standards.
My evaluation focused on the inefficiencies of the search results page. Main observations included severe violations regarding the lack of help documentation, efficient tools, user control, and minimalist design.
What's out there:
Stairs, Zillow, HUD
Before beginning my user research, I conducted a competitive analysis in order to pinpoint gaps in the competition, as well as to pull successful features that I could maintain and build upon.
Through this analysis, I was able to recognize a few areas in which SayLambda was lacking:
• Lack of filters on the homepage to help the user narrow down their options prior to reaching the search results page
• No visible 'Help' CTA
• Difficult to navigate search results page due to poor composition/layout and information overload
• Details of the incentives on the search results page are lengthy and difficult to comprehend at first glance
Understanding what works
We also conducted a plus/delta analysis to understand how features work well for competitors and what can be improved.
User Research:
What would be helpful to know in your search for buying a home?
Alongside the business research, I conducted user research to better understand the pain points of my target audience.
This process kicked off with a screener survey sent out to users on the company's existing mailing list.
This was to narrow down the pool of interview participants and receive the most accurate depiction of the problem space. Questions were formatted to identify prospective homebuyers who were struggling to find incentives or assistance that they qualified for.
Interviews and contextual inquiries were conducted with 6 participants.
After gathering the user data and affinity mapping, I was able to synthesize the information as follows:
Research Analysis:
The Results
The insights gathered through the research phase validated my assumptions and highlighted the following issues:
• The website lacked relevant filters on both the homepage and search results page
• The density of information on the search results page left users frustrated and confused
• Users were unclear which options were best suited to them and they were unsure of how to find out
Empathizing with Homebuyers
As another way to synthesize the information, I used the results of my user research to paint a more comprehensive picture of the average experience with the existing SayLambda platform.
The journey map below is based off of the behaviors observed through my series of contextual inquiries, with the user's feelings validated through the accompanying interviews.
The Problem:
Evaluating Assumptions
Using all of this information while keeping the client's goal in mind, I developed a problem statement.
Users struggle to find suitable homeownership incentives using SayLambda's search feature due to an abundance of information and a lack of relevant filters.
Building With Intention
After identifying the users' pain points and clearly defining a problem statement, I refined my scope further with 2 user personas.
This helped with establishing a clearer idea of the target audience and allowing me to keep the user in mind while developing solutions.
Building With Intention
With these personas in mind, it was easier to begin ideating features that would help improve their experiences.
I started off with user flows in order to visualize how each persona would potentially interact with the redesigned website.
Low-Fidelity:
Sketches to Wireframing
The development phase kicked off with sketches. With these sketches I was able to experiment with different a different layout and composition for the site's main features.
Using those sketches, I was able to create several wireframes which I combined into a low-fidelity prototype.
The purpose of this initial prototype was to test out the new composition of the website.
Usability Testing:
Problems & Solutions
With the goal of remedying users' pain points surrounding the information filtering and hierarchy, the low-fidelity model was put through a round of usability testing.
Completing a round of testing before the development of the hi-fidelity prototype allowed me to spend more time iterating any features before fully building them out.
Shown below were the most glaring issues validated by the usability test, as well as the solutions implemented:
Problem
• Advanced Search was too easily overlooked
Solution
• Have Advanced Search expanded by default
Problem
• Hesitance & confusion with terminology
• Low visibility with Save & Compare features
Solution
• Closable CTA to direct users to a help center
• Swapped placement of tags vs. Save & Compare features to be more intuitive
Problem
• Counselor resource easily overlooked
Solution
• Made the notice more prominent while maintaining consistency with other frames
Presenting the Redesign
After performing rounds of usability testing on both the low-fidelity prototype and first iteration of the hi-fidelity prototype, I gathered my insights and used them to fine-tune the changes made in the redesign.
This redesign was then presented to my client along with a slide deck detailing the design process from start to finish.
My design choices were backed by business and user research, validated through rounds of testing, and my client was very pleased with my ability to create a new user-centered layout while maintaining the brand and staying consistent with the rest of the existing website.
Retrospective:
My Project Takeaways
While working on this project, one of the biggest challenges I ran into was communication with my client.
This issue arose early on in the sprint, and albeit delaying the project timeline by a few days, I was able to mitigate the inconsistencies in communication before reaching the define phase.
Not only was it difficult to establish a reliable form of communication with my client, but it also became apparent that the client did not have a very clear idea of what they wanted from the redesign.
Through this design process I was able to recognize that non-technical individuals often won't know what they want the interface to look like.
To remedy this, I found using an agile approach for this project to be most effective. With agile's focus on incremental iteration, it allowed even those with little design experience to provide valuable feedback once shown an interface.
