property_info___9.jpg
5cb0633d80f2cf201a4c3253.png
search_list.jpg
5cb0633d80f2cf201a4c3253.png
search_result___2.jpg
5cb0633d80f2cf201a4c3253.png
Timeline

8 weeks

My role

UI Design

UX Design

Interaction Design

Prototyping

Propamap is a mobile search platform that helps people find their ideal places for rent. 

Deliverables

User Journey

Requirements

Information Architecture 

User Stories

User Flow

UI animations

High-Fi Prototypes 

CURRENT SITUATION

Improving from an existing platform

My client owns a 20.4k member's Facebook public group where people post ads and find places to rent. The Propamap mission is to help people find their ideal properties, and it already has a wide range of audiences from both sides of this marketplace- renters and landlords.

PROBLEM

However, apartment hunting is not efficient and effortless on the Facebook group.

BUSINESS OPPORTUNITIES

Building a new powerful product is a great extension of Propamap's mission that manages to leverage its existing audience, increase its value to them and provide Propomap with a revenue stream.

Discover

Competitive analysis

I did some research to see if I can leverage any insights into features and functions for informing my design decisions. I downloaded the four most popular apps in the Middle East and Southeast Asia and compared their key features, flows, and feelings. This chart shows the key features that will greatly affect the user experience.

artboard___1.png

Audience

We divided the audience into two groups: renters and landlords and interviewed them.

For renters apartment hunting is extremely time-consuming and exhausting.

  • Location and price are their priority. In addition, they have many different personal considerations, such as amenities, pet-friendly, neighborhoods. Users cannot effectively filter out places that meet their criteria.

  • 80% of users think the place is not as expected.

  • Most of the rental information comes from agents. Users find it difficult to check availability.

For landlords posting ads on the Facebook group repeatedly is a struggle.

  • The landlord said they have to repost their ads every day to maintain exposure.

  • This process is lengthy and boring.

Define

Pain points

1. Challenging to find the ideal property 

2. Not being aware of the property availability status

3. Overwhelming to post an ad

User goals

1. I can search places based on my needs

2a. I can easily access the availability info

2b. I can easily chat with landlords

3. I can post an ad fast and effortless

Requirements

After uncovering these insights from the research, I decided to incorporate the findings into the product requirement. Based on the user's goals and needs, the app should be:

  • Useful

  • An easy and fast way for landlords to post ads.

  • An easy and fast way for landlords to post ads.

  • A way for renters to find places they need quickly.

  • Reliable

  • A way for renters to report a scam.

  • Be transparent about the property info.

Information Architecture 

IA new.jpg

Design

User Story 1

As a busy adult, I want to use a search app finding a ideal place to rent so that I don't have to  physically walking the streets.

iaa user.jpg

Distill epics into stories

After defining the user story and flow, I used the high level user story to define the high-level task and epics. Then I broke down epics into multiple, smaller user stories and tasks for the key features.

5cb0633d80f2cf201a4c3253.png

FEATURE 1

Search, Filter (user goal 1)

gg.jpg
5cb0633d80f2cf201a4c3253.png

FEATURE 2

Browse, Chat (user goal 2a, 2b)

chat_feature.jpg

User Story 2

As a busy adult, I want to post an ad easily and quickly so that I can save time and have peace of mind.

5cb0633d80f2cf201a4c3253.png

FEATURE 3

Post an ad (user goal 3)

post_feature.jpg

How I got there

DESIGN DECISION 1

Alternative views

Alternative views

I tried to consider different scenarios about how users might act to search the property. Then I found that I cannot accommodate all the scenarios in a single design. So I decided to offer both a map view and a list of the search results.

The default view

Tap"Map" to toggle to the map view

search_result___3.jpg
5cb0633d80f2cf201a4c3253.png
search_list.jpg
5cb0633d80f2cf201a4c3253.png

Scenario 1:  Location as the first priority

Scenario 2:  Rapid scanning as the first priority

The user searches from the perspective of location and want to dive deep into the details such as the nearest street and nearest building.
A map view is appealing to this scenario better.

The user wants to scan the photo and the huge numbers of choices so that the user can pay attention on properties they consider most attractive.
A list representation is better in this scenario.

DESIGN DECISION 2

The search interface

In order to design this interface, I asked myself these questions:

  • What is the primary task of this app?

  • HMW establish a visual hierarchy with the primary content?

Trade-off 1: Size matters

search_map___2.jpg
  • I needed some space for the search box to inform what the user will expect to do when they open the app.

  • I wanted the size of the map to be big enough to show the visual weight and give the user a clue about its importance.

Trade-off 2: Simple task-based design

iteration2.jpg

Task-based interface vs Browsing interface

  • My assumption of the first thing the user is likely to do is to search the address. So I wanted to make it very easy for users to get instant gratification.

  • I decided to use the entire home screen as a search results interface. No promoted content. Because it might block users from finishing their first task quickly.

  • I wanted to guide the user's eyes immediately to the beginning of the most important task rather than having them wandering over the screen in confusion.

Previous Iteration: browsing interface

DESIGN DECISION 3

Wizard-like experience for posting ads (Feature 3)

Key takeaways:

  • Breaking up this complex process into a series of steps can make each step less overwhelming and reduce the pressure.

  • Once they finished the process, we should celebrate this big milestone for the user and make them feel good about finishing the long process. 

  • Once the ad is published, the next natural step for them would be to preview the ad and allow them to promote it - via social networks.

  • This process isn't necessarily linear, so the user should be able to move between different steps.

Advertise – 20.jpg
Advertise – 19.jpg
Advertise – 22.jpg
Advertise – 21.jpg
Advertise – 23.jpg
Advertise – 24.jpg
Advertise – 26.jpg
Check out #2 – 7.jpg
My post – preview – 4.jpg

Key takeaways

How to get more initiative in UX Design

  • Understand the business goal and product strategy 

We did not conduct user interviews at the beginning of the project. I didn't feel the user's problems and needs. So, at the begining, I just drew the wireframe as the client requested. To be honest, I felt very frustrated, and I didn't feel my value. I didn't know what I was doing, the rationale of my design, and who the users were.

So I talked to the client about my thought. I said that I want to know the strategic direction and business goals of this product. Why we make this product? If I understand the goal, I can play a lot of initiative and innovation to help you achieve business goals. 

After the conversation, the client agreed to conduct user interviews. In the following collaboration, I have also worked hard to exchange opinions with the client, push back, and defend my design when necessary.

 

Design system of reusable components

There are about 130 screens in this project. Creating a design system of reusable components can make my work much more efficient and make it easier to develop the app.

Another reflection

Design for Accessibility

Today is a boring day; I came back to this project for no reason and aftertasted my work. And then... "What? It was my design? Let me test the color contrast here."

Screen Shot 2022-09-06 at 4.17.50 PM.png

I knew it! I really didn't have intentionality for accessibility at that time. But this is my first contract work and obviously, I improved a lot since then haha.

OK, I'm just bored...

Not end yet. Let's Connect!

Explore other work

Unauthenticated.png
5cb0633d80f2cf201a4c3253.png
RefreshedFailed.png
5cb0633d80f2cf201a4c3253.png

#UXUI #IA

Vaxicode: Vaccination Passport

MVP - Created an authenticated state of Vaxicode - The user can create an account, declare their rapid test results, and edit their account info.

design system_cover.png

#DESIGN SYSTEM

Design System for Health Portal

Created color theme, typography, reusable components, UI Patterns, and design documentation for our Quebec government projects.

#USER EXPERIENCE 

Coquo

Shipped the design of becoming a member, creating a new user flow and solution.