openopen

Project overview

Connecting homeowners with buyers

OpenOpen is the future of Real Estate. It is a tech-based property brand set to transform the marketplace by exposing the pitfalls of outdated buying and selling methods of today’s real estate industry and its agents.

On OpenOpen, buyers and sellers directly connect in a new, tech-enabled way that helps everyone save time, stress, and money.

My responsibilities
- UI/UX feedback and design iterations
- Design systems (typography/color/icon/UI components)
- Handoff
- UI bug tracking
- Graphic design

Problems

High marketing fees and agent costs

" Man, my auction failed again and there is so much efforts to sell a house in Australia. Expensive marketing costs, untrustworthy agents.. Isn’t there a place where I can reach qualified buyers by myself?

⭕️ Design challenge

In Australia, Properties sold without an agent account for less than one percent of all property sales.

😠 Middlemen in the Real Estate Industry
With middlemen in the selling process, things become opaque and complicated and each of them takes their cut. The timeline of a sale could be at least 3 months and something could go wrong in the process.

Over the last decade, consumers experienced the shift to direct models across multiple industries. It’s not just time and money consumers are saving today, but we are more empowered and more informed than ever before.

The key message behind OpenOpen is that a house can be sold for much cheaper and less stressful than when using a traditional real estate agent.

KEY ISSUES

Massive money and time costs to sell a property with agents.

Limited real estate transparency in local market.

High risk of unsuccessful deal will make costs paid a waste

Risk of untrustworthy agents making fake promises.

Solutions

Let's build a place where buyers and sellers should drive the system

We think buyers and sellers should be able to involve themselves in the process as much or as little as they choose, as their home is the family’s most significant financial and emotional asset.

OpenOpen aims to change the way of traditional real estate market by empowering sellers to transact directly.

- For sellers

We aim to create a more a transparent selling experience for sellers.

Create listings quickly and easily within 5 minutes

Direct communication between sellers and buyers

Monitor buyer activity and know how popular their home is

Tracking selling process & manage offers

- For buyers

We aim to create a buying experience with more homes coming faster on OpenOpen.

More homes come faster on OpenOpen

Full transparency thanks to Seller Q&A

Better property searching experience

Final design

01 Create a listing

An easy and fast listing uploading process is the key to getting vast listings, especially at the early stage of the business.

‍

Usability Testing

A usability study was conducted to determine where improvements could be made to create a fast, clear and smooth process that enables users to create listings in an easy way.

❌ Pain points

Price selector with prest prices couldn't satisfy users when they are very sensitive to the price.

Steps that are optional are not clearly marked out.

Users can't save the progress if they jump out of the uploading process.

💡New ideas

We empowered the price selector to also be an input field that enables users can fill in a more accurate price if they are very sensitive to price.

We marked steps as "Optional" clearly if they are not the essential data the service team would like to know.

We aim to save the progress within 30 days and users can restart the uploading process where they stopped from their last attempt.

Final design

02 Dashboard

The dashboard provides a snapshot of the sellers' selling progress with OpenOpen. For buyers, it is a place where they can check their saved properties, notifications and set preference.

Final design

03 Referral System

The referral system is designed to attract more listings. Users can check statistics including referees, their properties, total earnings and more.

⭕️ Design challenge

Design a referral dashboard that is visually interesting as it is intellectually informative. The referral rule is quite new and also a bit complex to the real estate market. How the design can help to inteprete the concept and let people understand the rule is vey important.

👀 Design thinking

1. Present the most basic and fundamental business concept at the top:
Earnings are gained from sold properties uploaded by referees.

2. Clearly display the status of each of the 3 data fields. I used colours to differentiate different earning/property/referee status. Subtle cues are used for different badge types.

3. Break down the complexity of information architecture. There is a "View more" action button on the right top of the information card. Clicking it will let the page scroll down to the table section down below accordingly if users want to check details.

4. Tooltips are used for users to understand the meaning or calculation methods of some data fields.

Referral landing page -> Refer a friend -> Accept invitation -> Property successfully uploaded

Final design

04 Marketplace

We aim to create an easy and smoother browsing experience for the property list page.

⭕️ Design challenge

I explored a variety of different ways to display filter groups here. Most popular real estate websites display part of the most important filters and hide some in the pop-up dialogue. Based on my personal intuition and understanding of best practices when browsing different marketplace websites. Such design has the following defects：

Hiding some filters in the pop-up dialogue interrupts the browsing when repetitively opening and closing pop-ups, scrolling within pop-ups to find the filters if the filter context exceeds the maximum height of the dialogue and pressing "Confirm" or other action buttons.

Filters selected not clearly marked out could lead to wrong searching results.

The disorganization of filters and buttons makes the filter section looks heavy and unclean. BTW, filters come with a searching box in a lot of scenarios.

The searching results page doesn't automatically refresh per filter selected. (Needs more engineering effort)

🌝 Design thinking & Collaboration with engineers

After gathering feedback from my team and showing Michael (Front-end developer in the team) my views and options. Also, I made competitive research on content pages that solved similar problems. In the end, we decided to embrace a way that combines searching box and filters more elegantly, efficiently and clean.

Adding a filter side panel to the right and making the whole marketplace page 100% of the page width, giving more space and breath to contain multiple filters and selector groups.
->Smooth & no pop-ups experience

Incorporating dropdown list into the searching box. Added filters are displayed as badges in the search box. Some most prioritised filters are displayed in the dropdown list for users to quickly select.
-> A full look of filters added

Thanks to collapse and expand function of the side panel. When the filter panel is hidden, the card content will reach a fulid viewport width.
->A cleaner and more well-organised UI

The result page automatically refreshes when users add/remove a filter.
-> Smooth experience with no interruptions

Showcase on test server

Final design

05 Property detail page

Buyers can check property information, register interest, ask a question, unlock more information, claim a tour, make an offer and more here to interact with the seller.

Final design

06 Marketing campaign

I designed vouchers (Printing work), and illustrations for the marketing campaign both online and offline.

Final design

Mobile designs

I also designed mobile versions for all the pages based on a 375*812 base mobile size and designed iPad/tablet size if necessary. Working and communicating closely with Front-end developers regarding any responsive design issues.

Design system

Colors / Typography
& More

Once we have completed the initial flow, I started to think and create mainscreen of the platform and defining typography, colour, grid and other general components.

Graphic design

Printings & day-to-day collaterals

I also designed bags, brochures, business cards, pull-up banners and walls for OpenOpen's marketing purposes.

- Bag
- Business cards
- Voucher
- Brochure
- Pull-up banners
- Wall design

Summary & my reflections

Grew as a designer with more passion

OpenOpen is a group of passionate entrepreneurs and developers building the next generation of homeowner marketplace. Our team is continually growing, inventing and disrupting conventions. We’re driven by a simple objective: Happier sellers and buyers. I participated in the team at its initial planning stage and watched it go live and I grew as a designer and walked away with a few takeaways:

🌝 Ability to work under high pressure and tight schedule scenarios like a start-up

I designed the interface for the whole project and also defined key user flows with the product manager. The whole schedule was very tight and the workload was massive, which has greatly trained my ability to work under high pressure. Such a tight schedule has also trained my ability to design and think in a more flexible mindset because I have to figure out and evaluate by myself where ae the parts might need future modification and how should I design it with minimum engineering effort.

😎 It was a great opportunity to train my multi-tasking ability

I was also responsible for part of the graphic design work through which I have greatly improved my ability to take briefs and bring them to life visually in inspiring and creative ways. There was a lot of time I have to do them simultaneously, shifting design logic and mindset between graphic design and UX/UI design could be painful sometimes, but I survived with a stronger heart. The work I've done has greatly fired my passion for different design fields.

❇️ Things can be improved

- Prompt more accessibility audits to the whole design to comply with WCAG colour contrast guidelines.
‍
- Increase workflow efficiency and minimise bugs through more thoroughly considered UI design notes when handoff.
‍
- More consistency across design components
‍
- More usability testing for key processes

NEXT PROJECT ->