KC Designs

Streamlining Buying & Selling Homes

Solo Product Designer | 2021-2022

Summary

Offer1 is a real estate platform that simplifies the mortgage and offer process by consolidating contracts, listings, and communication into a single space.

I led the redesign from branding to product flow, reducing a 100+ hour process into a 10-minute streamlined experience.

How it Started

Phase 1: Design Challenge with a limit of 2 hours

I was initially brought on to refresh the landing page. The original design lacked hierarchy, lacked contrast, and jargon heavy.

I reimagined the brand with a modern, clean look—earning the team’s trust and landing the role to redesign Offer1.

See examples below of previous design:

Landing Page Vs After

Long Sign Ups

Too Wordy

No Onboarding Help

Core Obstacles:

• Confusing, outdated UI

• High user drop-off after first use

• I knew nothing of home selling

• No onboarding or user guidance

• Long tedious painful sign ups

• Heavy Legal Jargon

Research & Discovery

• I started by doing a competitive analysis of other real estate platforms.
• Many Stakeholder interviews to align with goals.
• Defining our users & their pain points
• We did qualitative usability testing of 4 agents per sprint
• Making user flows of current house buying/selling process, this was for me to better understand the steps.

Navigation for Seller

Personas

Initial Discussions of User flow Process

Ideation & Design Validation

•Prioritized visual hierarchy and simplified copy around clarity and speed

•Overcame the pain point of visual clutter by showing the user only the information that was important to them in pieces.

•Simplified copy by providing a progress bar & structuring information into smaller bits

•I designed micro interactions to help bring delight to the user after completing a task. Gamifying the experience.

Figma Files Prototyping Flow

Early Project Planning

Wireframes Vs Final Iteration

•Designed a Mascot that became the friendly assistant to our users, guiding them when onboarding

Jerry the Agent

Jerry Helping Users

User Testing

• Conducted user tests with 4 agents per sprint
(about 5-6 sprints)

•We had a rough first round. We learned our CTA was not clear enough. We created marketing campaigns and tested different landing pages to see how users responded.

•Results refined navigation, feedback loops, reduced clicks to enter app, and CTA placement changed

Landing Pages We Tested

Final: Brought it Back to Simplicity & focused on marketing funnels

Yay More Iterations We Tested

Building a System

• Developed components library
• Design System Library on Figma

• New Iconography
• Dialogue boxes for mobile and Desktop

• Color & Typography hierarchy
• Marketing Material

• Gifs for interactive motion flows for user engagement
• Email Templates for updates

Project Planning Helped Keep Us Organized - Click Up App

Dialogue Boxes

Color System

Icons

Highlights & Outcomes

80%

Reduction in steps taken to submitt listing

10+

Agent Hours saved to reach contract

60%

What Shipped

• Redesign of logo
• Rebranded website
• 4 Individual user focused marketing campaigns
• Full redesign of desktop & mobile app
• UI Design system, with components, icons, typography, cards, & buttons

Mascots Agents

Micro interactions for contracts being sent out

Desktop & Mobile App

Design System & Components

Reflection

What I learned:

• Ask early and often, this helped me dive into Real Estate process

• Find and list all pain point to create goals as a north star to the project & find markers of success

• How to advocate for bold visual changes while staying grounded in function

• Prioritize functions that are needed first to achieve first launch

• Identifying what truly needs solving upfront, & design with stronger intention, build smarter hierarchies of solutions, and create products that delivers & measures success.

What I learned:

• Ask early and often, this helped me dive into Real Estate process

• Find and list all pain point to create goals as a north star to the project & define markers of success

• How to advocate for bold visual changes while staying grounded in function

• Prioritize functions that are needed first to achieve first launch

• Identifying what truly needs solving upfront, & design with stronger intention, build smarter hierarchies of solutions, and create products that delivers & measures success.

What I learned:

• Ask early and often, this helped me dive into Real Estate process

• Find and list all pain point to create goals as a north star to the project & define markers of success

• How to advocate for bold visual changes while staying grounded in function

• Prioritize functions that are needed first to achieve first launch

• Identifying what truly needs solving upfront, & design with stronger intention, build smarter hierarchies of solutions, and create products that delivers & measures success.

How I grew:

• This was a turning point in my confidence as a solo product designer.

• Learned how to lead a product vision & test often

• Defend design decisions with clarity & detailed reasoning backed by user testing and adapt my process to business needs

• Using micro interactions to create joy and story telling to aide the user along the way

• Design a my first Mascot that helped our agents with onboarding!

How I grew:

• This was a turning point in my confidence as a solo product designer.

• Learned how to lead a product vision & test often

• Defend design decisions with clarity & detailed reasoning backed by user testing and adapt my process to business needs

• Using micro interactions to create joy and story telling to aide the user
along the way

• Design a my first Mascot that helped our agents with onboarding!

How I grew:

• This was a turning point in my confidence as a solo product designer.

• Learned how to lead a product vision & test often

• Defend design decisions with clarity & detailed reasoning backed by user testing and adapt my process to business needs

• Using micro interactions to create joy and story telling to aide the user
along the way

• Design a my first Mascot that helped our agents with onboarding!

What I could have improved:

• Started with low-fi wireframes to quickly define the functionality and tested early.

• Not rush into design layouts without testing previous finding that were passed

• I wish this had started with a 1. Design Audit, 2. Proposed structure on findings (user flows & wireframes) 3. Tested low wireframes & moved onto high fidelity designs, then the rest…