stephchung.


displaysweet.



A SAAS & HARDWARE SOLUTION FOR SELLING OFF-THE-PLAN PROPERTIES



THE BASICS



COMPANY: DisplaySweet, property tech agency ROLE: UX/UI designer
WEBSITE: displaysweet.com PROTOTYPE: coming soon! TIME: 6 months





THE CHALLENGE



As the only designer on the development, I worked closely with the product owner and lead developers to establish next steps in the roadmap to continue improving the core product. My main work centered around bringing a major new feature (house & land properties) into the platform while giving the UI a refresh to allow for better scaleablility as the product grew.


Defining the problem:

  1. Sales agents, who sell house & land off-the-plan properties and have limited technology to paint the vision of the home, feel unconfident they can sell properties to prospective buyers when they only have access to paper brochures and wish to have a tool that would aid in moving the buyers closer to signing a deal.
  2. First time home buyers, who want an easy solution to purchasing a new home and want guidence on what to look for in buying an off-the-plan house & land property, feel overwhelmed by the options for homes and are looking to get detailed advice from sales agents on what's available.


Success metrics:

  1. Gain $1mil of sales within 18 months of launching this feature (figure based on amount of sales lost from not having feature in current tech).
  2. Transfer 50% of current clients from old tech stack to new tech stack (not having this feature was a major blocker for transitioning).


The main challenges were:

1 Update user flows to include house & land developments

2 Redesign UI for better scalability based on findings

3 Identify areas for further improvement & aid in setting development schedules


Here's how I took on these challenges.



viewing & searching properties - before



viewing & searching properties - after





CHALLENGE #1: UPDATE USER FLOWS TO INCLUDE HOUSE & LAND DEVELOPMENTS



The software was able to account for selling off-the-plan apartment and townhouse properties but the process becomes more complicated with house & land developments. As such, I set out to understand those nuances through user research and analyzing the current user flows to make suggestions on how to improve.


SOLUTION

  1. Interview sales agents who sell house & land off-the-plan properties
    Working with the product owner and mymain stakeholder, I drafted up a series of questions to dig deeper into the complexities around selling house & land developments. The two biggest insights gained were the importance of a move in date when searching with a potential buyer on available plots and showcasing a taste of all the customisationable options to wet the appetite of the buyers..
  2. Use insights to reexamine current user flow & make suggestions for change
    Based on the data gathered, I realised the current flow's user goal to get an immediate reservation for a specific property from a buyer wasn't adding value to the agents' sales process. Instead, I suggested to my stakeholders that generating better, more viable leads for the agents and creating more solid integrations with common CRMs would be more worthwhile.
  3. Sketch out updated user flows to use for lo-fi wireframe progression
    With my stakeholders on board, I drew simple user flows to further illustrate the new path users would undergo. I used these flows to also help me tackle the next challenge, modernising the user interface to account for feature scalability.


old/current USER FLOW



New USER FLOW based on research





CHALLENGE #2: REDESIGN UI FOR BETTER scalability based on findings



A major concern for users and clients was how the results and search filters were shown in the side bar of the screen. There were also several elements that weren't completely friendly on different sized devices. I set out to incorporate the updated user flow into a redesigned UI to accomodate concerns from various angles while setting up the design system for best industry practices.


SOLUTION

  1. Comparison research against competitors across several device sizes​
    Armed with a list of some known competitors, I began taking screenshots and compared the merits of different design choices to get inspiration on where I could take the current user interface. By the end, I researched more than 10 real estate specific organisations from around the world and saw other examples from current tech leaders such as AirBnB to inform my designs.
  2. Mockup lo-fi designs based on comparison & updated user flow
    I've taken on the habit of producing lo-fi designs that start off as pen & paper sketches then once I get some initial feedback, I'll translate them into a single colour palette lo-fi wireframe in Figma (currently experimenting with purples). Based on previous experience, I found this has helped to focus the feedback on the UX rather than the colour of headings or body text styling. I utilised this process while I was creating the lo-fi wireframes for this feature.
  3. Gather feedback to iterate towards a hi-fi wireframe
    After several rounds of feedback from the product owner and the development team, we were able to settle on a base starting point of the wireframes to start development.




CHALLENGE #3: IDENTIFY AREAS FOR FURTHER IMPROVEMENT & AID IN SETTING DEVELOPMENT SCHEDULE



Right before I joined, the tech stack was being completely redone and there was a gap from when the last UX specific updates happened to when I started with the company. As such, I tried to identify any high value quick wins for the product while taking on this overall challenge.


SOLUTION

  1. Discuss & plan with engineer leads on upcoming work pipeline & workloads
    Since it was going to take some time for me to research and design out any improvements to the main product, I recognised that the engineering teams needed things to work on in the mean time. After discussing with the front-end and back-end leads, I did rough designs for 2 minor features and worked with them to set up testing & success metrics to further improve those features once my time was freed up more.
  2. Collaborate with developers to bring the wireframes to life
    Once the feature was at a good MVP state, I participated in development scheduling and sprint planning to help in developer handoff and setting goals for the next major feature I would work on while the teams programmed the house & land feature designs. Occassionally when a developer was unclear about an aspect of the designs, I would change components or add clearer state changes in the design to make the wireframes even more useful to the development team.




conclusion



Working closely with the development team and the product owner was great in building out the designs of this massive feature for the product. I would've loved to work with the product owner more on better roadmap scheduling to work in better timelines so usability testing could've taken place. While in the end, the scope of the feature also began to bloat out a bit, I'm glad I was able to bring in actual user feedback to make improvements to the overall user experience and interface designs.


Next steps: Check back on the success metrics to assess how well this feature performed in reality and identify other specific areas of improvement within this feature.



New Interface to search & view properties



New Interface to view property details


steph chung - UX/UI/PRODUCT DESIGNER


MELBOURNE, AU | WHATSUP@STEPHCHUNG.COM