Mobile Native App Design on iOS & Android for Real Estate Investment

‍

The Challenge

Traditional real estate application, acquisition processes are lengthy and complicated (lots of back and forth on paper documentation, email and phone calls). The goal of the app is to leverage cutting-edge mobile technology to simply the buyer application process and acquisition expense, shorten the application time, provide instant updates, and provide up-to-date investment portfolio.

‍

‍

My Role

I was wearing multiple hats as the UX Designer, Business Analyst, Product and Project Manager in an agile team for this new innovative product line. I identified and translated business goals and end-user needs into innovative design solutions that are engaging, valuable, and user friendly. We built the solution from concept to release via the process of Discover, Define, Design, and Implement.

‍

‍

‍

‍

The Process

‍

Phase 1: Discover & Research

1.1. Observation & Interviews

I did extensive research on real estate industry observed how the traditional process was done and interviewed all the related stakeholders, business users, and SMEs (Subject Matter Experts) on affected areas; consequently, including marketing, agents, customer solutions, operations, and end-users. I evaluated the pros and cons of the process, understanding the trade-off and reasoning of each steps and methods.

A lot of pain points on the lengthy, complicated process also means lots of opportunities for improvements.

‍

‍

1.2. Research & Brainstorming & Design Strategy

I created flow charts of the process. I documented the details of steps, dependencies, and limitations for different approaches. I also documented the complaints and difficulties on handling certain issues and identified the key solutions which reformed the process.

• Utilize mobile location service to search and display nearby properties.
• Integration with mobile camera to upload inspection photos.
• Upload/download documents and electronic signature by DocuSign.
• Push notification or SMS notice for application status.

‍

‍

‍

Phase 2: Define the Scope & Design

‍

‍

2.1. Personas And User Journey

We defined the primary personas, their user journeys and pain points.

‍

‍

‍

‍

2.2. Flow Chart & Wireframes

Once we had a solid direction for the design, I began to produce multiple different variations of wireframes. I listed pros and cons of different designs, did feasibility analysis with IT, and reviewed with internal stakeholders.

Prioritization of new features are based on scores of strategic alignment, business impact, business readiness, and technical complexity.

‍

‍

2.3. Create A Design System With Figma

We created a Design System in Figma with a set of standards, reusable components and patterns to create visual consistency throughout pages and projects across different systems an sub-brands.

Use component and tokens to apply design cross branding themes.

‍

‍

2.4. Interactive Prototype & User Testing

I created an interactive prototype to demonstrate not only the interface, but also the interaction and the navigation flow. I then put the prototype in front of users and stakeholders for testing and feedback and refined the design.

‍

‍

‍

‍

‍

2.5. Final UI & Visual

‍

I created key frames of mockups from scratch. Multiple alternate designs were presented to compare pros and cons, then refined the final approach.

‍

It was a lot fun on designing interface for the mobile apps; so many beautiful screens. :))

‍

‍

‍

2.6. Data Visualization

‍

I designed visual elements of charts, graphs, maps, and diagrams which tie to user portfolio to present complex data sets in a more intuitive and understandable way. The goal of data visualization is to help our users analyze, interpret, and communicate insights from data more effectively.

‍

‍

‍

‍

‍

2.5. Dashboard Design

‍

I designed dashboards for users convenience to have overview and focus on important things.

‍

‍

‍

‍

2.6. Consistent and cohesive branding, look and feel across mobile, desktop, social media channels

‍

‍

‍

2.6. Holistic View Of A User's Life Cycle

With a holistic view of every lifecycle touchpoint, The app makes it easy to seamlessly measure and connect insights across the entire user life cycle – from onboarding to exit.

‍

‍

‍

Phase 3: Coding & Development

I worked with developers in the Agile team on day-to-day bases to code the design into iOS and Android apps.

‍

‍

Phase 4: Release

We released the mobile app to iOS App Store and Android Google Play in time. Also designed the roll-out plan/materials  to the end users, which include training to the real estate agents, training to the customer services representatives, print-out for mobile app introduction, Email campaign to residents introducing the mobile app.

‍

‍

The Achievements

Amazing Productivity

Months-long processes are now being done in a few weeks!

‍

Good Rating and Reviews

3.8 stars App reviews on the 1st version and lots of good reviews.

‍

Appreciation from Agents

Appreciation from Agents put a big smile on my face. :)

‍

Plus significantly increased the App downloads

‍

‍