Manr
Manr is a real estate company under the mission ‘better house for less’. In this project, I redesigned the landing page UI/UX and the BI.
🖌️ Currently, documenting this project is in progress. Thank you for understanding!
Role
User Research
UI/UX design
Branding
Company
Manr
Team
3 UI/UX designers
1 Developer
Tools used Figma
Figjam
Pen & papers
Google Workspace (Google Docs, Sheets, Forms)
User Research
UI/UX design
Branding
Company
Manr
Team
3 UI/UX designers
1 Developer
Tools used Figma
Figjam
Pen & papers
Google Workspace (Google Docs, Sheets, Forms)
Nov 2022
- Feb 2023
- Feb 2023
📌 To see the project briefly, please take a look at the images below.
Project Outline
Manr is an early-stage start-up. Manr’s BM is to let clients process property transactions with only a flat fee instead of prorated fees.
The website structure and design were rough and the visual language was confusing. We spotted the issues and then we planned to run UX studies in order.
A. UX audit & studies
B. Set goals
C. Brand reshaping
D. Create personas and set targeted demographics
E. Wireframing and lo-fi mockup
F. Hi-fi mockup and finalize
G. Build the ground design system
Manr is an early-stage start-up. Manr’s BM is to let clients process property transactions with only a flat fee instead of prorated fees.
The website structure and design were rough and the visual language was confusing. We spotted the issues and then we planned to run UX studies in order.
A. UX audit & studies
B. Set goals
C. Brand reshaping
D. Create personas and set targeted demographics
E. Wireframing and lo-fi mockup
F. Hi-fi mockup and finalize
G. Build the ground design system
Project Goals
The goals of the landing page redesign were the following:
01 To build credibility
02 Product/service introduction
03 Service walkthrough
04 Ultimate goal: to entice the user
a. Listings
b. Service fee
c. Contact us
The goals of the landing page redesign were the following:
01 To build credibility
02 Product/service introduction
03 Service walkthrough
04 Ultimate goal: to entice the user
a. Listings
b. Service fee
c. Contact us
Old Design
![]()
⬆︎ Previous design, November 2022
⬆︎ Previous design, November 2022
UX Audits and Studies
UX Audits
As the first task, we ran brief first UX audits. The design team ran this initial UX audit since we could see how we felt as cold users. As a result, we caught usability issues and development issues. The images below are my UX audit report.
![]()
![]()
![]()
![]()
![]()
![]()
![]()
As the first task, we ran brief first UX audits. The design team ran this initial UX audit since we could see how we felt as cold users. As a result, we caught usability issues and development issues. The images below are my UX audit report.
Task Analysis
Secondly, we listed key functions in the service and tasks accordingly to gauge the current usability. We managed to recruit four subjects.
![]()
What we learned from task analysis
- The website did not lead cold users to take the next steps or give enough information on Manr’s service.
- Act to trigger the filter may seem redundant
- Pricing, FAQs and Contact Manr should be shown in the nav bar or more visible so users can find them easily. Particularly, FAQs and Pricing didn’t seem easy for most of our subjects.
Secondly, we listed key functions in the service and tasks accordingly to gauge the current usability. We managed to recruit four subjects.
What we learned from task analysis
- The website did not lead cold users to take the next steps or give enough information on Manr’s service.
- Act to trigger the filter may seem redundant
- Pricing, FAQs and Contact Manr should be shown in the nav bar or more visible so users can find them easily. Particularly, FAQs and Pricing didn’t seem easy for most of our subjects.
Survey
Lastly, we created a set of questionnaires to see how users feel about the general property transaction process.
![]()
![]()
Results from 11 individuals in a survey responded showed:
Lastly, we created a set of questionnaires to see how users feel about the general property transaction process.
Results from 11 individuals in a survey responded showed:
- Most people in the current market are interested in buying rather than selling property
- These individuals fall between 25-34 years old
- Most of these individuals are inexperienced (i.e. first-time home buyers)
- Primary reason to purchase property is for personal use (i.e. their own home)
- Biggest concern is affordability
- Worries lie within mortgages, budgets and making large impact decisions (i.e. if poorly made, will have long term repercussions)
- Generally, people don’t find it too difficult to find information about the property that lies within their criteria
Personas
Why built personas
Manr was still uncertain about the targeted demographics. It was hard for them set demographics given that there are two roles in the service: sellers and buyers and the age group could be very wide. By building personas, I wanted to elaborate on the targeted demographics for the product, understand needs and set problems to solve.
Manr was still uncertain about the targeted demographics. It was hard for them set demographics given that there are two roles in the service: sellers and buyers and the age group could be very wide. By building personas, I wanted to elaborate on the targeted demographics for the product, understand needs and set problems to solve.
Buyer Persona
Jessica Kim29 / Toronto, ON / Marketing Coordinator
Bio
Jessica is a tech-savvy young professional who is looking to buy her first home. She's inexperienced in the home purchasing process but is eager to learn. She values transparency and is looking for a trusted partner to guide her through the process.
Wants & Goals
- First-time home buyer seeking personal use property
- Wants streamlined, easy-to-use platform
- Values trust in the platform and the people involved in the purchasing process
Jessica is a tech-savvy young professional who is looking to buy her first home. She's inexperienced in the home purchasing process but is eager to learn. She values transparency and is looking for a trusted partner to guide her through the process.
Wants & Goals
- First-time home buyer seeking personal use property
- Wants streamlined, easy-to-use platform
- Values trust in the platform and the people involved in the purchasing process
Behaviours
- Tech-savvy, uses technology for research and information gathering
- Cautious, seeks information before making decisions
- Values transparency and honesty
Needs & Painpoints
- Feels anxious about the purchasing process as she is an inexperienced buyer
- She wants clear and accessible information to make an informed decision.
- Wants to avoid any potential roadblocks during the purchase process.
- Tech-savvy, uses technology for research and information gathering
- Cautious, seeks information before making decisions
- Values transparency and honesty
Needs & Painpoints
- Feels anxious about the purchasing process as she is an inexperienced buyer
- She wants clear and accessible information to make an informed decision.
- Wants to avoid any potential roadblocks during the purchase process.
Seller Persona
Andre Ibrahim38 / St. Catharines / Sales Manager
Bio
Andre is a busy homeowner seeking an efficient and stress-free property sale. He prefers to handle the sale himself to minimize costs and avoid hassles, and prioritizes getting the best outcome.
Wants & Goals
- To sell his property quickly and efficiently
- To get the best possible price for his property
- To have a stress-free and profitable property selling experience
Andre is a busy homeowner seeking an efficient and stress-free property sale. He prefers to handle the sale himself to minimize costs and avoid hassles, and prioritizes getting the best outcome.
Wants & Goals
- To sell his property quickly and efficiently
- To get the best possible price for his property
- To have a stress-free and profitable property selling experience
Behaviours
- Focused on maximizing his profits and minimizing fees
- Prioritizes convenience and efficiency in the property selling process
- Interested in using technology to enhance the property selling process
Needs & Pain points
- High costs associated with listing and advertising his property, as well as paying real estate agents and closing fees
- Needs reassurance that property is being marketed effectively to reach potential buyers
- Lack of control over the sale process if using a real estate agent
- Focused on maximizing his profits and minimizing fees
- Prioritizes convenience and efficiency in the property selling process
- Interested in using technology to enhance the property selling process
Needs & Pain points
- High costs associated with listing and advertising his property, as well as paying real estate agents and closing fees
- Needs reassurance that property is being marketed effectively to reach potential buyers
- Lack of control over the sale process if using a real estate agent
Targeted demographics
🧑 Buyer - 25-34 age group, first buyer, prioritizes affordability
🧑 Seller - 35-44 age group, prioritize efficiency and transparency
🧑 Buyer - 25-34 age group, first buyer, prioritizes affordability
🧑 Seller - 35-44 age group, prioritize efficiency and transparency
Solutions to the pain points
✓ Transparency in property transactions - all process is at your finger tips, see all the progress and process on the website.
✓ Affordability - flat fee at once, no prorated/additional commission.
✓ Simplicity - hassle-free, easy transaction with a walk-through
✓ Efficiency - virtual process
✓ Transparency in property transactions - all process is at your finger tips, see all the progress and process on the website.
✓ Affordability - flat fee at once, no prorated/additional commission.
✓ Simplicity - hassle-free, easy transaction with a walk-through
✓ Efficiency - virtual process
Brand Reshaping
1. Brand Personality
✦ Playful
✦ Transparency
✦ Simplicity
✦ Supportive
✦ Playful
✦ Transparency
✦ Simplicity
✦ Supportive
2. Moodboard
![]()
3. Typography
![]()
![]()
4. Colour Exploration
![]()
![]()
![]()
5. Logo Exploration
![]()
![]()
![]()
Previous
![]()
New
![]()
Sketch & Wireframing
To begin with, we started sketching and brainstorming to find the best way to deliver the key information while meeting the project goals;
- building credibility
- providing quick & easy service introduction and walk-through
- ultimately leading the user to take the next steps (sign-up, contact, looking up or listing properties)
Mid-fi & Iterations
Among the sections on the landing page, what we prioritized was a) the hero section and b) a brief service walk-through. In the mid-fi mockup process, we paid attention to the two parts the most.
a) Importance of hero
Hero is the very first part the user sees when they land on a website. In the old design, two big buttons were juxtaposed and the head copy was placed below the buttons. The visual hierarchy was not designed properly and the hero section without any visual hierarchy was confusing to the users.
![]()
Previous design
In the hero section, we needed to show the catchphrase to entice the potential customers (users) and what Manr would help you with.
Hero is the very first part the user sees when they land on a website. In the old design, two big buttons were juxtaposed and the head copy was placed below the buttons. The visual hierarchy was not designed properly and the hero section without any visual hierarchy was confusing to the users.
Previous design
In the hero section, we needed to show the catchphrase to entice the potential customers (users) and what Manr would help you with.
At first, we made hero designs that could let users search listings. However, there weren’t many listings to show and filter by parameters. For now, we decided to get rid of a search bar and a filter to reduce confusion. This is because when the user sees a result that they did not expect to see, it eventually brings a bad impression and user experience to users.
![]()
![]()
![]()
![]()
⬆︎ Hero iterations.
⬆︎ Hero iterations.
b) Service walk-through
Since what Manr offers is different from the traditional way, there should be a service walk-through and value propositions. Our team was trying the most engaging and effective way to deliver this.
![]()
![]()
⬆︎ Design 01 | These designs were good options, however, they did not pass the contrast test and it was redundantly taking up too much room; which may make the journey boring and long for the user.
![]()
![]()
⬆︎ Design 02 | The iterations above were lacking impact and they did not give any information about the service.
Then, we tried to give the user a more engaging and interactive experience while delivering the proper amount of information about the service. At the same time, I did not miss delivering the information through the roles; of buyer and seller.
Since what Manr offers is different from the traditional way, there should be a service walk-through and value propositions. Our team was trying the most engaging and effective way to deliver this.
⬆︎ Design 01 | These designs were good options, however, they did not pass the contrast test and it was redundantly taking up too much room; which may make the journey boring and long for the user.
⬆︎ Design 02 | The iterations above were lacking impact and they did not give any information about the service.
Then, we tried to give the user a more engaging and interactive experience while delivering the proper amount of information about the service. At the same time, I did not miss delivering the information through the roles; of buyer and seller.
⬆︎ Design 03 | The buyer’s guide CTA was slightly put off because it did not follow the reading pattern, unlike the value proposition text inside the three components.
⬆︎ Design 04 | Finally, we settled on the design above. There were a few reasons why we chose this design:-
Showing value propositions with a small title and short supporting text
-
By having visual assets that give a hint of the value props, the user can have a better grasp.
-
By using a .json file in the right CTA, the user can be led better to the next action
- This design follows the reading pattern, which is likely to lead the user to the planned step, Explore buyer’s guide.
Hi-Fi
Design System Fundamentals
Article
Nightcap
Nightcap is a service where the user can have timely medical access for their sleep disorders. I directed from branding to the final hi-fi for this project. To see the design journey, please check the articles below.
Article 01 - Nightcap: Better Sleep, Better LifeArticle 02 - Nightcap: Mobile App Design Project
Article 01 - Nightcap: Better Sleep, Better LifeArticle 02 - Nightcap: Mobile App Design Project
SUJIN SUSIE CHOI UI/UX & PRODUCT DESIGNER
TORONTO, ON, CANADA
TORONTO, ON, CANADA