Birds of Eve: Shopify E-Commerce Store & Polaris Design System
UX research for sustainable swimwear brand and UI design for Shopify e-commerce store and design system library
Project Overview
Challenge
Austin, Dallas and Houston, Texas are some of the most argueably hottest real estate markets. The markup price in the Austin area for a home is almost over 30% on average above list price. Access to affordable homeownership has become a concern for many. This is due to many home prices increasing with dwindling inventory, lost and labor shortages and rising building costs.
However, many economic experts are saying that there is a housing bubble that is brought on by the Federal Reserve’s Covid pandemic policies. First-time homebuyers are most vulnerable to dramatic losses because they have already paid elevated prices.
Best Cash Deals, TX is an online fill-out form website and app that will allow for highly-motivated real estate sellers to gain instant-access to wholesalers to negotiate their best cash offer.
Problem Statement
However, many economic experts are saying that there is a housing bubble that is brought on by the Federal Reserve’s Covid pandemic policies. First-time homebuyers are most vulnerable to dramatic losses because they have already paid elevated prices.
Objectives
- Design a responsive user experience that gives highly-motivated sellers instant cash offers from wholesalers
- Give users the convenience of instant cash offers that gives highly-motivated sellers instant cash offers from wholesalers
- Prevent foreclosure on their homes and save them the agony that comes with it
- Provide the opportunity to expand the network of wholesalers so that users have the freedom to choose the best cash offer
Project Scope
- User experience & market research
- Responsive Shopify e-commerce store design
- UI design system with tokenized components
Tools
Team
Product Designer – Allison Kuehn
Visual Designer & Illustrator –
Steffanie van Twuijver
Product Design Process
Define the Scope
The product design for Best Cash Deals, Texas will be divided into 3 parts:- Online and app-based fill-out form for highly motivated sellers
- Buying opportunities for local buyers that include lists of homes for sale and an auction feature to submit their best cash deal
- Dashboard for calculating best cash deals according to specific criteria pertaining to the condition and parameters of the property
- Design of a simple squeeze page for sellers to enter their information
- Make the process of offering your house for a cash offer less stressful
- Gain the trust of highly-motivated sellers with empathy
- Seamlessly submit their information to real estate appraisers
Discover User Needs
The market for highly-motivated home sellers is unique compared to other aspects in the real estate market. Highly-motivated sellers have a need to sell quicker than average home sellers because they want to avoid foreclosure and other unfortunate consequences. This discovery phase requires:- Clearly defined user personas for first-home buyers
- Mapped out userflow journeys that define what information they need for the form
- Finding a trustworthy source for a best cash deal on their home quickly and conveniently
- Research competition for other sites that offer cash deals without going through a realtor
Design User Experience & Product
Designing the visuals for the first part of the product design should be simple compared to the proceeding steps. However, this will involve developing the visual direction for the entire brand for the first time. The landing page and app requires a single-page fill-out form, which will include:- Wireframes and lo-fidelity mockups illustrating useable components
- Medium-fidelity and hi-fidelity mockups with clear and concise user experience definition
- Branding and UI style kits that develop a feeling of trustworthiness and empathy for the user
Develop the Prototype
This fill-out form is responsive for mobile, tablet and desktop, and I wanted to design the first prototype with a “mobile-first” approach since this is intended to be an app. This process takes the user through an easy-to-follow fill-out form. Although it is in the interest of appraisers to gain as much information as possible, the sellers have the option to skip past parts of the form that are optional. When the date about the home for sale is submitted, a real estate appraiser contacts the seller within 24 hours for a cash deal calculated by the database.1. Define the Scope
The Scope of the User Experience
The first part of product design for Best Cash Deals, Texas will provide a simple fill-out form for highly-motivated sellers. Once their information is submitted, a database will populate their inputs and a wholesaler will be alerted. A wholesaler will then contact the seller within 24 hours.
The user experience for the seller will include:
- A simple fill-out form
- A scheduling feature to make an appraisal appointment or phone call from a representative
- A confirmation page that notifies the user when an appraiser will reach out
Sitemap / Information Architecture (IA)
Product Goals
2. Discover User Needs
Highly Motivated Sellers
- Willing to sell the property at a very favorable price: usually this means 10-30% below market value
- Willing to sell the property on very favorable terms: this includes things like no money down, 0% interest, financing, etc.
- Code Violations – each city has their own code department that provides a list of properties. Common code violations in Texas include:
- Lot grading and drainage
- Insufficient window installation
- Improper electrical installation
- Flagrant wall and framing
- Foundation formwork and reinforcement
- Delinquent Taxes – records can be obtained from a local tax office
- Distressed or Abandoned Properties – junky houses that are easy to spot. Common signs of distressed properties are:
- Properties that don’t seem to be kept up with the neighbors
- House with newspaper crammed into mailbox or piling up on the doorway
- Vacant notices posted on the door
- Boarded up or broken windows
- Burnt out landlords – these individuals are also known as “absentee owners.” They may not be able to afford the expenses or they have enough properties in their portfolio that are not much value to them.
- Probates – By definition, these properties are of older construction and thus higher equity. It usually has split interest amongst heirs. To be highly motivated, probates must have other indicators that can include:
- Pre-foreclosures
- Short sales
- Notice of default
- Judgements
Market Research
First time Texas homebuyers
According to the 2021 Texas Homebuyers and Sellers Report:- The majority of Texas homebuyers (68%) were married couples, followed by single females (15%), single males (9%) and unmarried couples (6%)
- The median household income for Texas homebuyers was $112,500
- $20,500 is the median amount of student debt among Texas homebuyers
- Of all Texas homebuyers, 31% were first time homebuyers
Foreclosure Statistics
According to Attom Data:- Texas has the second highest foreclosure in the nation in 2021 with an average of 1,060 per month, proceeded only by California
- In August 2021, the government’s moratorium on mortgages ended and lenders began the foreclosure process on many properties with an increase by 49% since 2020
- If there is a housing bubble, first time homebuyers will be hurt the most
Federal Reserve’s Role in the Real Estate Market
- Many experts have warned of a housing bubble developing due to the Fed’s long run on bond purchases and lowered interest rates that have fueled home prices to rise (New York Times)
- Federal interest rates dropped from 1.58% in February 2020 to near zero in April 2020, causing a dramatic increase in many Americans taking out mortgages for their first time home purchase (Fred Economic Data)
- Home-building prices have gone up 13% from June 2019 to June 2021 for single-family homes (US Census Pricing Index)
- Building material costs soared 26.1% on average from June 2020 to June 2021 (National Association of Home Builders)
Competitive Research
Cash Offers vs. Realtors
Pros ✅
- Speed – Typically close 7-10 days, compared to 103 days with a traditional realtor.
- Certainty – Individual buyers often request contingencies or cause financing complications. When selling with a cash offer company, there is less risk.
- Less hassle – Companies will buy as-is or handle repairs themselves. Home sellers don’t have to deal with fixing up their property or negotiate repairs with buyers.
Cons 🚫
- Lower price – Traditional MLS listings will attract multiple competitive offers. Companies that buy houses typically offer 50-70% of market rate value.
- Predatory tactics – Some cash buyers will prey on vulnerable people with distressed properties or difficult situations. Sellers must be aware of aggressive sales tactics.
Cash Offer Company Competitors
We Buy Ugly Houses
- Trusted, nationally recognized brand
- No need to worry about repairs
- Minimum closing time: 3 weeks
- Quality of service may vary between franchises
- Pays far less than fair market value
- Can’t close as quickly as some other cash buyer companies
Market Pro Homebuyers
- Free moving service
- No need to prep or repair home
- Minimum closing time: 7 days
- Pays less than fair market value
- Only available in a handful of markets
We Buy Houses
- Cash offer in 24-48 hours
- Vetted, reputable real estate investors
- No need to worry about repairs
- Minimum closing time: 7 days
- Little to no room for negotiation
- Individual investors have different strategies, so they may value your home differently
- Licenses are exclusive, so there is only one option in your area
iBuyer Competitors
Opendoor
- Low service fee compared to competitors (3.5-5%)
- Additional in-house services, including Opendoor Home loans & OD title
- Highly-rated online reviews
- Pays fair market value at most
- Limited ability to negotiate
- Buyers may find Opendoor’s repairs insufficient
Offerpad
- Generous closing window compared to other competitors (10-90 days)
- Late checkout option gives sellers up to 3 days to move out after closing
- Access to additional services, such as free local moves within 50 miles
- You’ll have to sign a binding contract before knowing the final offer price
- You might face a 1% cancellation fee
- Offerpad reserves the right to back out at any time
Zillow Offers
- Extra time to decide: initial cash offers valid for 5 business days
- Generous closing window compared to competitors (7-90 days)
- Offers are typically within 1-2% of fair market value
- Fees could total up to 13.9% (6% selling fees + up to 7.9% in-service fees)
- Upselling: Zillow will try to get you to work with a premier agent, even if you decide its a cash offer
- No option to do repairs yourself
User Persona - Research
How the pandemic increased housing demand for first-time homebuyers
According to the Genworth MI first time homebuyer market report:- Working from home measures have forced homes to become the end-all, be-all resulting in an increase in home’s value
- While the unemployment rate has increased overall, it has increased less for higher-income earners who are more likely to become potential homebuyers
- Potential homebuyers may have benefited from pandemic-related forbearance programs on student loans, credit cards, and auto loans, temporarily reducing debt for some
Demographic trends of homebuyers & homesellers
According to the 2020 Homebuyer & Seller Generational Trends Report:- An average of 75% of homebuyers in 2020 found their home through a mobile application
- 15% of homebuyers aged between 40-54 years previously sold a distressed property via short sale or foreclosure
- 46% of homebuyers aged 22-29 have student debt and 38% of homebuyers 30-39 have student debt
- Sellers aged 40-54 years old made up one of the largest shares of home sellers at 23%, had a median age of 48 years, and the highest median income at $128,800
- Sellers 65-73 made up the other largest share at 23%, with a median age of 68 years
- 72% of sellers were married couples
User Persona
After we have gathered knowledge from research on highly motivated sellers, as well (as their goals and needs), then the user persona is created. This is based on demographic research to decipher who exactly the highly motivated sellers are.
Userflow Journey
How Might We...?
The “How Might We” method creates an atmosphere for solutions by reframing known challenges around our product. After identifying user challenges and exploring subject matter, I asked more questions about how Best Cash Deals can better serve users:
- How might we give sellers the freedom to better negotiate their cash offer?
- How might we help sellers avoid foreclosure and other negative repercussions from losing their home?
- How might we feel comfortable with someone coming into their home for an evaluation?
- How might we help users decide their own price for a cash offer?
- How might we calculate the exact value of their home?
Product Roadmap
Release 1
- Splash screen
- Onboarding – Account Signup
- Form fillout
- Appointment scheduling feature
- Account Page
- About Us Page
- Customer Service/FAQs
Release 2
- Privacy Policy
- Chatbot feature
- Buyer profiles
- Home value calculator
Release 3
- Auction feature for cash offer (dashboard)
- Video walkthrough feature
- Apartment listings
- Legal services
3. Design the Product
Mobile-first approach
As a designer, it is always important to use a mobile-first approach. This way, it switches the workflow from upgrading to a desktop from small screens to larger screens. It is easier to scale up than scale down.
Wireframes (Lo-Fidelity)
For the first round of sketching out wireframes, I like to kick it old school and hand-draw them. Although I’ve used Balsamiq, hand-drawing is less restrictive and allows for more visualization and precision.
Med-Fidelity Mockups
After I draw out the wireframes, I move onto medium-fidelity mockups. This is the part where I develop the layout with laser precision. At this stage, the look and feel of the product is deciphered. Before color, imagery and other refined details are decided upon, the content and layout are created first.
Branding & Style Guides
For branding and style guides, I hired a visual designer to create the Best Cash Deals logo. From there, I created variations of the logo according to screen sizes, app icons and night mode.
Before any UI components are designed, the color scheme and typography guide is developed to provide a pallette for the next step in creating the design system.
Design System
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
This design system was designed while I was also designing the medium-fidelity mockups simultaneously. Using Brad Frost’s method Atomic Design, I categorized the features in the design system based on atoms, molecules, and organisms. Â
Having an established design system solidifies the template for future product and UI upgrades and add-on features.
Hi-Fidelity App Mockups
After the color, typography, and components have been designed, the hi-fidelity mockups are created.
Hi-fidelity mockups have the highly-detailed versions of what the final product will look like. In the case of the Best Cash Deals app, the user downloads the app and fills out the appraisal form. Then, our representatives give them a call to schedule an appointment.
Hi-Fidelity Mobile Mockups
The hi-fidelity mobile mockups are a crucial part of the design process. Unlike the app, the mobile web mockups represent how the actual website will look on a mobile phone.
From there, this serves as a starting point for designing larger screen sizes on tablet and mobile.
Tablet version
Med-Fidelity Mockups
Tablet medium-fidelity mockups are an extension of the mobile app and website.
As a continuation, tablet designs will be an easy transition into the layout for the desktop version.
Hi-Fidelity Mockups
Since only tablet and mobile design will include the app version, the form-fill out remains in a future iteration.
The hi-fidelity tablet designs are detailed versions of the tablet web version.
Desktop version
Med-Fidelity Mockups
As screen sizes keep expanding, there is more space to communicate your message to the user.
The desktop medium-fidelity mockups create the blueprint for where to include more components and content.
Hi-Fidelity Mockups
For the desktop version, there is much more real estate to incorporate a story-telling element. This is why the layout for the web landing pages and fill-out form incorporates more stock photos and isometric illustrations.
The hi-fidelity mockups for desktop include a more elaborate user interface (UI) that gives more of a visual experience rather than a straightforward task-based experience on smaller screen sizes.
Best Cash Deals - iOS App Prototype
Best Cash Deals - Website Prototype
Birds of Eve: Shopify E-Commerce Store & Polaris Design System
A responsive, real estate user experience that connects sellers to
local Texan buyers
Project Overview
Challenge
Austin, Dallas and Houston, Texas are some of the most arguably hottest real estate markets. The markup price in the Austin area for a home is almost over 30% on average above list price. Access to affordable homeownership has become a concern for many. This is due to many home prices but with dwindling inventory, lost and labor shortages and rising building costs.
However, many economic experts are saying that there is a housing bubble that is brought on by the Federal Reserve’s Covid pandemic policies. First-time homebuyers are most vulnerable to dramatic losses because they have already paid elevated prices.
Best Cash Deals, TX is an online fill-out form website and app that will allow for highly-motivated real estate sellers to gain instant-access to wholesalers to negotiate their best cash offer.
Objectives
-
- Design a responsive user experience that gives highly-motivated sellers instant cash offers from wholesalers
- Give users the convenience of instant cash offers that gives highly-motivated sellers instant cash offers from wholesalers
- Prevent foreclosure on their homes and save them the agony that comes with it
- Provide the opportunity to expand the network of wholesalers so that users have the freedom to choose the best cash offer
Project App
Tools
Team
Product Design Lead – Allison Kuehn
Logo Designer – Ivan Hubenko
Icon Designer – Rauf Nohani
Illustration Designer – Era Madaz
Product Design Process
Define the Scope
The product design for Best Cash Deals, Texas will be divided into 3 parts:- Online and app-based fill-out form for highly motivated sellers
- Buying opportunities for local buyers that include lists of homes for sale and an auction feature to submit their best cash deal
- Dashboard for calculating best cash deals according to specific criteria pertaining to the condition and parameters of the property
- Design of a simple squeeze page for sellers to enter their information
- Make the process of offering your house for a cash offer less stressful
- Gain the trust of highly-motivated sellers with empathy
- Seamlessly submit their information to real estate appraisers
Discover User Needs
The market for highly-motivated home sellers is unique compared to other aspects in the real estate market. Highly-motivated sellers have a need to sell quicker than average home sellers because they want to avoid foreclosure and other unfortunate consequences. This discovery phase requires:- Clearly defined user personas for first-home buyers
- Mapped out userflow journeys that define what information they need for the form
- Finding a trustworthy source for a best cash deal on their home quickly and conveniently
- Research competition for other sites that offer cash deals without going through a realtor
Design User Experience & Product
Designing the visuals for the first part of the product design should be simple compared to the proceeding steps. However, this will involve developing the visual direction for the entire brand for the first time.The landing page and app requires a single-page fill-out form, which will include:
- Wireframes and lo-fidelity mockups illustrating useable components
- Medium-fidelity and hi-fidelity mockups with clear and concise user experience definition
- Branding and UI style kits that develop a feeling of trustworthiness and empathy for the user
Develop the Prototype
This fill-out form is responsive for mobile, tablet and desktop, and I wanted to design the first prototype with a “mobile-first” approach since this is intended to be an app. This process takes the user through an easy-to-follow fill-out form. Although it is in the interest of appraisers to gain as much information as possible, the sellers have the option to skip past parts of the form that are optional. When the date about the home for sale is submitted, a real estate appraiser contacts the seller within 24 hours for a cash deal calculated by the database.1. Define the Scope
The Scope of the User Experience
The first part of product design for Best Cash Deals, Texas will provide a simple fill-out form for highly-motivated sellers. Once their information is submitted, a database will populate their inputs and a wholesaler will be alerted. A wholesaler will then contact the seller within 24 hours.
The user experience for the seller will include:
- A simple fill-out form
- A scheduling feature to make an appraisal appointment or phone call from a representative
- A confirmation page that notifies the user when an appraiser will reach out
Sitemap / Information Architecture (IA)
Product Goals
2. Discover User Needs
Highly Motivated Sellers
Best Cash Deals, Texas is designed specifically for highly motivated sellers. If the seller is not highly motivated, then the chances of them using this service are slim to none. Therefore, wholesalers will use tis service targeted towards that specific niche.
A highly motivated seller is a property owner who will meet at least one of the following conditions:
- Willing to sell the property at a very favorable price: usually this means 10-30% below market value
- Willing to sell the property on very favorable terms: this includes things like no money down, 0% interest, financing, etc.
According to Bigger Pockets, here are the signs that indicate that a seller is highly motivated:
- Code Violations – each city has their own code department that provides a list of properties. Common code violations in Texas include:
- Lot grading and drainage
- Insufficient window installation
- Improper electrical installation
- Flagrant wall and framing
- Foundation formwork and reinforcement
- Delinquent Taxes – records can be obtained from a local tax office
- Distressed or Abandoned Properties – junky houses that are easy to spot. Common signs of distressed properties are:
- Properties that don’t seem to be kept up with the neighbors
- House with newspaper crammed into mailbox or piling up on the doorway
- Vacant notices posted on the door
- Boarded up or broken windows
- Burnt out landlords – these individuals are also known as “absentee owners.” They may not be able to afford the expenses or they have enough properties in their portfolio that are not much value to them.
- Probates – By definition, these properties are of older construction and thus higher equity. It usually has split interest amongst heirs. To be highly motivated, probates must have other indicators that can include:
- Pre-foreclosures
- Short sales
- Notice of default
- Judgements
Market Research
First time Texas homebuyers
According to the 2021 Texas Homebuyers and Sellers Report:- The majority of Texas homebuyers (68%) were married couples, followed by single females (15%), single males (9%) and unmarried couples (6%)
- The median household income for Texas homebuyers was $112,500
- $20,500 is the median amount of student debt among Texas homebuyers
- Of all Texas homebuyers, 31% were first time homebuyers
Foreclosure Statistics
According to the Attom Data:- Texas has the second highest foreclosure in the nation in 2021 with an average of 1,060 per month, proceeded only by California
- In August 2021, the government’s moratorium on mortgages ended and lenders began the foreclosure process on many properties with an increase by 49% since 2020
- If there is a housing bubble, first time homebuyers will be hurt the most
Federal Reserve’s Role in the Real Estate Market
- Many experts have warned of a housing bubble developing due to the Fed’s long run on bond purchases and lowered interest rates that have fueled home prices to rise (New York Times)
- Federal interest rates dropped from 1.58% in February 2020 to near zero in April 2020, causing a dramatic increase in many Americans taking out mortgages for their first time home purchase (Fred Economic Data)
- Home-building prices have gone up 13% from June 2019 to June 2021 for single-family homes (US Census Pricing Index)
- Building material costs soared 26.1% on average from June 2020 to June 2021 (National Association of Home Builders)
Competitive Research
The analysis first entailed a breakdown of the cash buying process vs. realtors for context. Highly motivated sellers typically don’t sell their homes through traditional methods. After that, I analyzed 3 different competitors for cash buying companies as well as 3 different competitors for iBuyers. These are two different categories of competitors but they are both attracting highly motivated sellers.
Cash Offers vs. Realtors
Pros ✅
- Speed – Typically close 7-10 days, compared to 103 days with a traditional realtor.
- Certainty – Individual buyers often request contingencies or cause financing complications. When selling with a cash offer company, there is less risk.
- Less hassle – Companies will buy as-is or handle repairs themselves. Home sellers don’t have to deal with fixing up their property or negotiate repairs with buyers.
Cons 🚫
- Lower price – Traditional MLS listings will attract multiple competitive offers. Companies that buy houses typically offer 50-70% of market rate value.
- Predatory tactics – Some cash buyers will prey on vulnerable people with distressed properties or difficult situations. Sellers must be aware of aggressive sales tactics.
Cash Offer Company Competitors
We Buy Ugly Houses
- Trusted, nationally recognized brand
- No need to worry about repairs
- Minimum closing time: 3 weeks
- Quality of service may vary between franchises
- Pays far less than fair market value
- Can’t close as quickly as some other cash buyer companies
Market Pro Homebuyers
- Free moving service
- No need to prep or repair home
- Minimum closing time: 7 days
- Pays less than fair market value
- Only available in a handful of markets
We Buy Houses
- Cash offer in 24-48 hours
- Vetted, reputable real estate investors
- No need to worry about repairs
- Minimum closing time: 7 days
- Little to no room for negotiation
- Individual investors have different strategies, so they may value your home differently
- Licenses are exclusive, so there is only one option in your area
iBuyer Competitors
Opendoor
- Low service fee compared to competitors (3.5-5%)
- Additional in-house services, including Opendoor Home loans & OD title
- Highly-rated online reviews
- Pays fair market value at most
- Limited ability to negotiate
- Buyers may find Opendoor’s repairs insufficient
Market Pro Homebuyers
- Free moving service
- No need to prep or repair home
- Minimum closing time: 7 days
- Pays less than fair market value
- Only available in a handful of markets
We Buy Houses
- Cash offer in 24-48 hours
- Vetted, reputable real estate investors
- No need to worry about repairs
- Minimum closing time: 7 days
- Little to no room for negotiation
- Individual investors have different strategies, so they may value your home differently
- Licenses are exclusive, so there is only one option in your area
User Persona - Research
How the pandemic increased housing demand for first-time homebuyers
According to the Genworth MI first time homebuyer market report:- Working from home measures have forced homes to become the end-all, be-all resulting in an increase in home’s value
- While the unemployment rate has increased overall, it has increased less for higher-income earners who are more likely to become potential homebuyers
- Potential homebuyers may have benefited from pandemic-related forbearance programs on student loans, credit cards, and auto loans, temporarily reducing debt for some
Demographic trends of homebuyers & homesellers
According to the 2020 Homebuyer & Seller Generational Trends Report:- An average of 75% of homebuyers in 2020 found their home through a mobile application
- 15% of homebuyers aged between 40-54 years previously sold a distressed property via short sale or foreclosure
- 46% of homebuyers aged 22-29 have student debt and 38% of homebuyers 30-39 have student debt
- Sellers aged 40-54 years old made up one of the largest shares of home sellers at 23%, had a median age of 48 years, and the highest median income at $128,800
- Sellers 65-73 made up the other largest share at 23%, with a median age of 68 years
- 72% of sellers were married couples
User Persona
Userflow Journey
How Might We...?
The “How Might We” method creates an atmosphere for solutions by reframing known challenges around our product. After identifying user challenges and exploring subject matter, I asked more questions about how Best Cash Deals can better serve users:
- How might we give sellers the freedom to better negotiate their cash offer?
- How might we help sellers avoid foreclosure and other negative repercussions from losing their home?
- How might we feel comfortable with someone coming into their home for an evaluation?
- How might we help users decide their own price for a cash offer?
- How might we calculate the exact value of their home?
Product Roadmap
Release 1
- Splash screen
- Onboarding – Account Signup
- Form fillout
- Appointment scheduling feature
- Account Page
- About Us Page
- Customer Service/FAQs
Release 2
- Privacy Policy
- Chatbot feature
- Buyer profiles
- Home value calculator
Release 3
- Auction feature for cash offer (dashboard)
- Video walkthrough feature
- Apartment listings
- Legal services
3. Design the Product
Mobile-first approach
Wireframes (Lo-Fidelity)
Med-Fidelity Mockups
Branding & Style Guides
Before any UI components are designed, the color scheme and typography guide is developed to provide a pallette for the next step in creating the design system.
Design System
This design system was designed while I was also designing the medium-fidelity mockups simultaneously. Using Brad Frost’s method Atomic Design, I categorized the features in the design system based on atoms, molecules, and organisms.
Having an established design system solidifies the template for future product and UI upgrades and add-on features.
Hi-Fidelity Mockups
Hi-fidelity mockups have the highly-detailed versions of what the final product will look like. In the case of the Best Cash Deals app, the user downloads the app and fills out the appraisal form. Then, our representatives give them a call to schedule an appointment.
Hi-Fidelity Mobile Mockups
From there, this serves as a starting point for designing larger screen sizes on tablets and mobile.
Tablet version
Med-Fidelity Mockups
As a continuation, tablet designs will be an easy transition into the layout for the desktop version.
Hi-Fidelity Mockups
The hi-fidelity tablet designs are detailed versions of the tablet web version.
Desktop version
Med-Fidelity Mockups
The desktop medium-fidelity mockups create the blueprint for where to include more components and content.
Hi-Fidelity Mockups
The hi-fidelity mockups for desktop include a more elaborate user interface (UI) that gives more of a visual experience rather than a straightforward task-based experience on smaller screen sizes.
Best Cash Deals - iOS App Prototype
Best Cash Deals - Website Prototype
Birds of Eve: Shopify
E-Commerce Store & Polaris Design System
Project Overview
Challenge
Best Cash Deals, TX is an online fill-out form website and app that will allow for highly-motivated real estate sellers to gain instant-access to wholesalers to negotiate their best cash offer.
Objectives
- Design a responsive user experience that gives highly-motivated sellers instant cash offers from wholesalers
- Give users the convenience of instant cash offers that gives highly-motivated sellers instant cash offers from wholesalers
- Prevent foreclosure on their homes and save them the agony that comes with it
- Provide the opportunity to expand the network of wholesalers so that users have the freedom to choose the best cash offer
Project Scope
Tools
Team
Product Design Lead – Allison Kuehn
Logo Designer – Ivan Hubenko
Icon Designer – Rauf Nohani
Illustration Designer – Era Madaz
Product Design Process
Define the Scope
The product design for Best Cash Deals, Texas will be divided into 3 parts:- Online and app-based fill-out form for highly motivated sellers
- Buying opportunities for local buyers that include lists of homes for sale and an auction feature to submit their best cash deal
- Dashboard for calculating best cash deals according to specific criteria pertaining to the condition and parameters of the property
- Design of a simple squeeze page for sellers to enter their information
- Make the process of offering your house for a cash offer less stressful
- Gain the trust of highly-motivated sellers with empathy
- Seamlessly submit their information to real estate appraisers
Discover User Needs
Highly-motivated sellers have a need to sell quicker than average home sellers because they want to avoid foreclosure and other unfortunate consequences. This discovery phase requires:- Clearly defined user personas for first-home buyers
- Mapped out userflow journeys that define what information they need for the form
- Finding a trustworthy source for a best cash deal on their home quickly and conveniently
- Research competition for other sites that offer cash deals without going through a realtor
Develop the Prototype
The landing page and app requires a single-page fill-out form, which will include- Wireframes and lo-fidelity mockups illustrating useable components
- Medium-fidelity and hi-fidelity mockups with clear and concise user experience definition
- Branding and UI style kits that develop a feeling of trustworthiness and empathy for the user
Develop the Prototype
This fill-out form is responsive for mobile, tablet and desktop, and I wanted to design the first prototype with a “mobile-first” approach since this is intended to be an app. This process takes the user through an easy-to-follow fill-out form. Although it is in the interest of appraisers to gain as much information as possible, the sellers have the option to skip past parts of the form that are optional. When the date about the home for sale is submitted, a real estate appraiser contacts the seller within 24 hours for a cash deal calculated by the database.1. Define the Scope
The Scope of the User Experience
The user experience for the home seller will include:
- A simple fill-out form
- A scheduling feature to make an appraisal appointment or phone call from a representativeÂ
- A confirmation page that notifies the user when an appraiser will reach out
Sitemap / Information Architecture (IA)
Product Goals
2. Discover User Needs
Highly Motivated Sellers
- Willing to sell the property at a very favorable price: usually this means 10-30% below market value
- Willing to sell the property on very favorable terms: this includes things like no money down, 0% interest, financing, etc.
- Code Violations
- Delinquent Taxes
- Distressed or Abandoned Properties
- Burnt out landlords
- Probates
Market Research
- The majority of Texas homebuyers (68%) were married couples, followed by single females (15%), single males (9%) and unmarried couples (6%)
- The median household income for Texas homebuyers was $112,500
- $20,500 is the median amount of student debt among Texas homebuyers
- Of all Texas homebuyers, 31% were first time homebuyers
- Texas has the second highest foreclosure in the nation in 2021 with an average of 1,060 per month, proceeded only by California
- In August 2021, the government’s moratorium on mortgages ended and lenders began the foreclosure process on many properties with an increase by 49% since 2020
- If there is a housing bubble, first time homebuyers will be hurt the most
- Many experts have warned of a housing bubble developing due to the Fed’s long run on bond purchases and lowered interest rates that have fueled home prices to rise (New York Times)
- Federal interest rates dropped from 1.58% in February 2020 to near zero in April 2020, causing a dramatic increase in many Americans taking out mortgages for their first time home purchase (Fred Economic Data)
- Home-building prices have gone up 13% from June 2019 to June 2021 for single-family homes (US Census Pricing Index)
- Building material costs soared 26.1% on average from June 2020 to June 2021 (National Association of Home Builders)
Competitive Research
Their solutions to similar problems will help me gather insight about their strengths and weaknesses. These insights also help me identify any gaps in features that Best Cash Deals, Texas might address.
Cash Offers vs. Realtors
Pros and cons for using companies that buy houses for cash offers rather than going through a traditional realtor.
- Speed – Typically close 7-10 days, compared to 103 days with a traditional realtor.
- Certainty – Individual buyers often request contingencies or cause financing complications. When selling with a cash offer company, there is less risk.
- Less hassle – Companies will buy as-is or handle repairs themselves. Home sellers don’t have to deal with fixing up their property or negotiate repairs with buyers.
- Lower price – Traditional MLS listings will attract multiple competitive offers. Companies that buy houses typically offer 50-70% of market rate value.
- Predatory tactics – Some cash buyers will prey on vulnerable people with distressed properties or difficult situations. Sellers must be aware of aggressive sales tactics.
Cash Offer Company Competitors
- Trusted, nationally recognized brand
- No need to worry about repairs
- Minimum closing time: 3 weeks
- Quality of service may vary between franchises
- Pays far less than fair market value
- Can’t close as quickly as some other cash buyer companies
- Free moving service
- No need to prep or repair home
- Minimum closing time: 7 days
- Pays less than fair market value
- Only available in a handful of markets
- Cash offer in 24-48 hours
- Vetted, reputable real estate investors
- No need to worry about repairs
- Minimum closing time: 7 days
- Little to no room for negotiation
- Individual investors have different strategies, so they may value your home differently
- Licenses are exclusive, so there is only one option in your area
iBuyer Competitors
Unlike a cash buying company, an iBuyer is a company that uses technology to make an offer on your home instantly.
If the seller accepts, the iBuyer assumes the risks and holding costs of finding a buyer so the seller can have a simpler, more convenient and more certain sale.
- Low service fee compared to competitors (3.5-5%)
- Additional in-house services, including Opendoor Home loans & OD title
- Highly-rated online reviews
- Pays fair market value at most
- Limited ability to negotiate
- Buyers may find Opendoor’s repairs insufficient
- Free moving service
- No need to prep or repair home
- Minimum closing time: 7 days
- Pays less than fair market value
- Only available in a handful of markets
- Cash offer in 24-48 hours
- Vetted, reputable real estate investors
- No need to worry about repairs
- Minimum closing time: 7 days
- Little to no room for negotiation
- Individual investors have different strategies, so they may value your home differently
- Licenses are exclusive, so there is only one option in your area
User Persona - Research
How the pandemic increased housing demand for first-time homebuyers
- Working from home measures have forced homes to become the end-all, be-all resulting in an increase in home’s value
- While the unemployment rate has increased overall, it has increased less for higher-income earners who are more likely to become potential homebuyers
- Potential homebuyers may have benefited from pandemic-related forbearance programs on student loans, credit cards, and auto loans, temporarily reducing debt for some
- An average of 75% of homebuyers in 2020 found their home through a mobile application
- 15% of homebuyers aged between 40-54 years previously sold a distressed property via short sale or foreclosure
- 46% of homebuyers aged 22-29 have student debt and 38% of homebuyers 30-39 have student debt
- Sellers aged 40-54 years old made up one of the largest shares of home sellers at 23%, had a median age of 48 years, and the highest median income at $128,800
- Sellers 65-73 made up the other largest share at 23%, with a median age of 68 years
- 72% of sellers were married couples
User Persona
Userflow Journeys
How Might We...?
- How might we give sellers the freedom to better negotiate their cash offer?
- How might we help sellers avoid foreclosure and other negative repercussions from losing their home?
- How might we feel comfortable with someone coming into their home for an evaluation?
- How might we help users decide their own price for a cash offer?
- How might we calculate the exact value of their home?
Product Roadmap
- Splash screen
- Onboarding – Account Signup
- Form fillout
- Appointment scheduling feature
- Account Page
- About Us Page
- Customer Service/FAQs
- Privacy Policy
- Chatbot feature
- Buyer profiles
- Home value calculator
- Auction feature for cash offer (dashboard)
- Video walkthrough feature
- Apartment listings
- Legal services
3. Design the Product
Mobile-first approach
Wireframes (Lo-Fidelity)
Med-Fidelity Mockups
At this stage, the look and feel of the product is deciphered. Before color, imagery and other refined details are decided upon, the content and layout are created first.
Branding & Style Guides
Before any UI components are designed, the color scheme and typography guide is developed to provide a pallette for the next step in creating the design system.
Design System
This design system was designed while I was also designing the medium-fidelity mockups simultaneously. Using Brad Frost’s method Atomic Design, I categorized the features in the design system based on atoms, molecules, and organisms.
Having an established design system solidifies the template for future product and UI upgrades and add-on features.
Hi-Fidelity App Mockups
Hi-fidelity mockups have the highly-detailed versions of what the final product will look like. In the case of the Best Cash Deals app, the user downloads the app and fills out the appraisal form. Then, our representatives give them a call to schedule an appointment.
Hi-Fidelity Mobile Mockups
From there, this serves as a starting point for designing larger screen sizes on tablet and mobile.