Process

Research

To begin, I focused on understanding how users select residential complexes within their budget, as well as their experience with current apartment websites. I explored what “luxury” and “trustworthy” meant to users, what factors are most important when choosing a residence, and how websites can improve the overall apartment-search experience.

Market Research

Market research revealed key insights into why apartment living is on the rise. According to Freddie Mac’s 2019 housing survey, 40% of renters expect never to own a home, and 80% believe renting better fits their lifestyle. Reasons include flexibility, convenience, and services like digital concierge options.

Competitive Analysis

I conducted a competitive analysis to explore how other residential companies use their websites to benefit users and their business, identifying what works and what could be improved.

Provisional Personas

Provisional personas were developed to broadly identify potential users before crafting detailed user personas.

User Interviews

I conducted user interviews to collect qualitative data on how people choose apartments, their values, and their pain points. Participants included individuals aged 20-40 who had recently rented or searched for apartments online.

Affinity Map - User Interview

Following the interviews, I used an affinity map to analyze findings and identify important factors in apartment selection. This process revealed both necessary and unnecessary features for apartment websites.

User Interview Summary

USER GOALS:
• Explore floor plans with a map view.
• Access virtual or video tours.
• See unit availability with detailed descriptions.
• Easily locate information on floor plans, amenities, location, and price.

USER FRUSTRATIONS:
• Hidden fees.
• False reviews or photos.
• Inaccessible pricing, floor plans, or virtual tours.
• Excessive pop-ups.
• Unsafe communities.
• Time-consuming processes.

Research Findings

Personas

Based on research, I developed two personas: Lisa, who values community amenities, and Evan, who prioritizes in-unit amenities and location.

Emotional Journey Map

I created emotional journey maps for Lisa and Evan to visualize their feelings throughout the apartment search process, which helped me better empathize with their needs.

Point of View (POV)/ How Might We (HMW)

POV and HMW statements for Lisa and Evan helped me to reframe the design challenge in a way that incorporates all the information and insight I have uncovered so far. POV statement allowed me to reframes the problem in a way that is simple to understand and insight. HMW statement allowed me to think clearly and concisely as to what the real problem is and how I might solve that problem for Lisa and Evan.

Feature Roadmap

The feature roadmap was developed to outline key website elements based on insights gathered from research and competitive analysis.

Site Map

After the define stage, I’ve created a sitemap for KAI. A sitemap can help users understand how the information is structured on the site. I created a structure of sitemap after collecting the data from user research and other residential complex competitor's websites.

Task Flow

To complete the main task (Schedule a Tour), a task flow path allowed us to create the key set of steps that a user takes to find a product’s real value. This path focused on the ideal default and did not focus on exceptions or errors.

Crazy 8

Once I identified the key pages that I would be designing for, I began sketching the pages of the website by using the crazy 8’s method. Crazy 8’s is a core Design Sprint method. It is a fast sketching exercise that challenges people to sketch eight distinct ideas in eight minutes. The goal is to push beyond my first idea, frequently the least innovative, and to generate a wide variety of solutions.

Low-Fi Wireframe

After sketching the pages of the website, I have translated the sketches into low-fidelity wireframes. I have designed the homepage, category page, subcategory page, and product detail page.

Low-Fi Responsive Wireframe

Low-fidelity responsive wireframes were created to adapt the design to mobile devices.

Usability Testing

I conducted usability testing to observe how easily users navigated the website and completed tasks like scheduling a tour. The tests revealed valuable feedback, such as the importance of adding a "Schedule a Tour" button at the top of the page and integrating a map view with floor plans.

Test Objectives

• Evaluate ease of navigation and task completion.

• Assess the overall design flow.

• Measure task completion time.

• Validate whether the design addresses user needs.
  

Task

• Task 1: Check out “PLAN D” and check other features that are important for you to make the final decision of scheduling a tour. After checking all the features you need, schedule a tour.
  

• Task 2: Check out community amenities and the “PLAN D” virtual tour. After checking all the features you need, schedule a tour.
  

Test Methodology

• In-Person: The participants will be completing the given task on their phones using Figma Mirror

• Remote (Zoom): The participants will be completing the given task on their computer while sharing their screen on Zoom

Participants

• Age Demographic: 20 - 40 Years of Age

• Participants who rented or searched apartments on the website before making the final decisions

Key Takeaways

Affinity Map - Usability Test

After the usability testing, I created an affinity map to sort what worked, needs to be changed, questions from participants, and new ideas. The affinity map helped me to prioritize and rank the user testing feedback.

Priority Revision

Based on the user testing results, the highest priority revision was made including adding “Schedule a tour”, filter options, and “Map” view.

UI Kit

After the priority revision, the UI Kit was created for faster shipping. UI kits are handy tools that allow designers to quickly and efficiently create mockups for handoff. It acts as a predecessor to a design system, which involves both designers and developers, creating an ecosystem that allows for faster shipping.

Hi-Fi Wireframe

After priority revision, I designed high-fidelity wireframe of the website.

Hi-Fi Responsive Wireframe

High Fidelity Prototype

Next Step

• Enhance prototype functionality.

• Conduct further usability testing with high-fidelity prototypes.

• Implement additional refinements based on user feedback.