E-STACK
A COMMERCIAL REAL ESTATE PLATFORM
PROJECT: E-Stack Website
ROLE: UX Researcher, UIUX Designer
DURATION: July - Dec 2021
Project Vision
E-Stack aims to create a commercial real estate website that promotes the catalog of real estate ads, so that potential customers would see their relevant properties. This website also aims to inform customers about events like Open Houses.
Project Goals
1) Incorporate a way for user to have tight connection.
2) Construct detailed information pages for each properties.
3) Create an interface capable of exploring loan/rent program and other financial features.
User-centered
Design Process
SPECIFY
DESIGN
EVALUATE
Research
Competitive Analysis
To understand the market in different areas, we analyzed the features and data of other real estate websites such as Zillow and Airbnb using Google Sheets and Excel.
Data Analytics
In order to gain insight on commercial real estate market on web, I led the data analysis process using my previous academic research and R (a statistical analysis model.
SPECIFY
DESIGN
EVALUATE
User Journey Map
Our team recorded 12 interviews with potential users when conducting user researchduring phase 1 of the design process.
​
Key result:
mood board, our tasks and goals.
User persona
I built three user personas to obtain better and deeper understanding about our targeted users based on user surveys, user interview, and competitive research.
​
Key result:
pain points and motivations of users.
Information Architecture
After loops of feedback and design critiques from the marketing team and the stakeholders, I created a general user flow, a user flow for finance, and an information architecture with detailed features (below).
​
Key result:
website features, user flow, business goal
SPECIFY
SPECIFY
EVALUATE
Wireframes
We pieces together our research results and design ideas into sketching and wireframing on Figma. It is an efficient way to visualize the features required by the stakeholders so that we will obtain corresponded feedbacks to improve the next iterations.
High-fidelity Design
After testing the wireframes for an iteration, our team designed 25 high-fidelity screens and 20 sub-pages.
Problem 1
User Dashboard
We included user dashboard and chat system on users' profile. This satisfy the Users' needs -- making connections with real estate agents, sellers, buyers and even lawyers. The challenge then became: how to incorporate the business goal to my design?
Challenge 2
Detailed Property Page
The heart and soul of E-Stack: displaying each and every properties possible for users, and essential information for users to read. We wanted to create a detailed and concise area of the screen for users to utilize when browsing the page.
Wireflow
I lead the prototyping to direct the flow of the website from screen to screen.
Challenge 3
Finance Page
Creating a platform for finance is pivotal to our website. It's a stepping stone for users who want to bake E-Stack into a part of their leasing/purchasing process.
Style Guide
We constructed mood board and tabulated the information from user research to determine the style of our website. Using bright colors helped to convey the feeling of happiness and smoothness to our users in E-Stack. Shades of blue and orange are present almost everywhere throughout the design, so it paired well with the feeling of brightness and happiness when purchasing and living in a properties. The main typeface of choice for the app is Open Sans, which would bode well with the rounded edges within our interface.
Blue & Orange
Relax & Energetic
SPECIFY
SPECIFY
DESIGN
Takeaways
Our team worked on different time zone; so It is hard to arrange meetings and promote the design process. Luckily, all the team members dedicate to this project and they all complete the assigned tasks by deadlines. This emphasized the importance of having a well-organized schedule. After this project, I am not worried about changes in team and I learned how to deal with changing while keeping up with the plan.