Estack
Commercial Real Estate Platform
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 Timeline
3 Month
Team
Alina (Me)
Lucas (Designer)
Adil (PM)
My Role
Market Research
UX Design
UI Design
Tools
Figma
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
Understand
Specify
Design
Evaluate
Understand
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
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
Design
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.
Challenge 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
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 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.
User Flow
I lead the prototyping to direct the flow of the website from screen to screen.
Main Feature: upgrade your plan
Flow 1: upgrade on profile page
Flow 2: upgrade on messages inbox & payments
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.
Evaluate - 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.
Thank you.