Beyond Real Estate (BRE)

UI design
The BRE project was formerly a key component of AvenueHQ's product roadmap, representing an expansion beyond traditional real estate services through the creation of the Beyond Real Estate (BRE). This project was executed as part of a company-wide effort utilizing the Area of Focus (AoF), a project delivery framework.

As a member of the BRE Launch team, I played a key role in designing the user interface.

*This project is focused on delivering a web application only.


Overview

Duration
6 Sprints
June - August 2021
Type
Product Design
Roles
UI Designer|UX Researcher (minor)
ux Tools
Wireframes |Prototype
Program Tools
Figma|Mural

Target Audience

Primary target audience:

  • Small business owners

Objectives

  • To define and prioritize features to create a user-friendly MVP for the BRE launch form
  • To implement automated processes to streamline the journey from sign-up to live for the clients & continuously gather feedback for optimization
    How might we build and automate the process from sign up to live for BRE clients?

    Research

    Market Research

    My team and I conducted a thorough market research to identify & analyze the sign-up processes of our potential competitors. We aimed to improve our own sign-up process by identifying areas for improvement and incorporating successful elements from our existing product & our competitors.

    Our goal was to create a seamless & fully self-sufficient sign-up process for our clients.

    Market Research

    Define

    User Flow of Self Sign-up Launch Form

    After conducting a thorough market research, I began to focus on the sign-up flow to gain a deeper understanding of the logic behind the launch form. I extracted key questions from the existing form and created a list of basic starting questions for the MVP.

    My team and I collaborated to design and compare different sign-up flow options, which allowed us to ensure that the launch form is both intuitive and user-friendly, effectively meeting the needs and expectations of our target audience.

    My sign-up logic flow (left) & Our current form for non-BRE clients (right)

    While my responsibility was designing the user interface, my teammates effectively handled the development of the logic flow, allowing me to fully focus on ensuring that the design was visually appealing & intuitive. To ensure that all details were captured, they used a 3rd party tool to create & test a set of questions.

    Developing self-sign up logic flow

    Finalized sign-up logic flow with 3rd party tool

    Internal User Test

    After finalizing the sign-up form, we conducted an internal user test using our peers as the audience. They submitted their questions and provided feedback through a separate form.

    Summary of the feedback form

    What we learned from the user test...

    • The payment section should be placed after the website design questions for a better user experience.
    • Adding tooltips could improve user guidance and reduce anxiety & clutter.

    Ideation

    Wireframes

    To ensure that I was able to receive quick feedback while waiting for the finalized flow of the self-sign-up form, I created low-fidelity wireframes.

    After the team provided their approval, I moved on to developing high-fidelity wireframes.

    The design was based on our existing UI components, with an added touch of navy blue on the status bar to distinguish it from the questionnaires.

    First Iteration

    • Familiarizing myself with the existing UI components.
    • Incorporating a new element in the UI design to differentiate it from our current form.
    First draft: working off of existing UI component + adding new design element

    Second Iteration

    • Enhancing the sign-up flow and adding additional screens to create a more seamless experience.
    Second draft: improving the flow

    High-fidelity Wireframes

    • Completed remaining screens in the sign-up flow
    • Added more tooltips based on user feedback

    Prototype

    After consulting with the Engineering team, it was decided that prototyping collapsible, new components, or any improvements would be the most efficient approach due to time constraints. The remaining portion of the mockup would have a similar interaction as the existing real estate form.

    Features

    Feature #1

    • Introducing a collapsible component to reduce clutter and improve organization.
    Feature 1: Collapsible

    Feature #2

    • One of the most requested features, as many users have expressed confusion with the questions and have requested additional information before answering.
    Feature 2: Hovered Tooltips

    Feature #3

    • Introducing pricing in a card format that aligns with the website's design and layout
    • A new feature, previously not available in the current sign-up form

    Reflection

    What I learned

    • Acquired knowledge and skills in working in sprints
    • Collaborated effectively with cross-functional teams to achieve shared goals.
    • Incorporated existing UI components while making necessary adjustments to align with new design.