1) Overview
Project Timeline: 1 month
Role & Responsibilities: Principal designer responsible for all aspects of website re-design process start to finish.
RockStar Real Estate is a company owned by a local landlord that helps prospective and existing tenants navigate various parts of the renting process. Keeping users involved is important so they feel valued and prepared for what is next, whether it’s maintenance, moving in, or continuing their search for a property to rent.
User
🎯 Find a unit to rent, or be put on wait list.
🎯 Fill out application or maintenance request.
🎯 Find answers to questions quickly and without communicating with another person.
🎯 Contact landlord/team.
Business
🎯 Display business info and available units.
🎯 Access to rental application and tenant portal.
🎯 Display expectations and answer questions for tenants or applicants (financial, applying, etc.)
🎯Connect team and tenants efficiently.
2) Research
Learning about renters and tenants.
Research Process:
- Interview with business owner
- Design audit
- User surveys
- Competitive analysis
The interview revealed the most common form of contact was via phone number and email. The design audit revealed that through the display of several contact methods.
User surveys asked users about their renting experience and concluded response times and communication being a pain point.
My competitive analysis showed me weaknesses in the current web design and common features that were missing, like saving properties and requesting tours directly on the site.
The most important insights were lack of proper communication and failure to keep users updated. There are so many steps and questions through the experience of renting, I empathize with both the users and employees as this can easily become stressful and frustrating.
Affinity Maps
Competitive Analysis
Key Findings in competitive analysis:
- Ability to save properties.
- Searching by visual map, neighborhood, etc.
- Links within FAQ.
- Pop-up modal for looking at specific properties, easily exit and keep browsing.
- Compare properties feature.
- Resources tab for local schools, utility companies, etc.
If communication is such a critical part for users and employees, there should be a way to stay updated automatically with minimal effort for both parties.
3) Define
Getting to the root of the problem for users.
I knew I would have at least 2 distinct user-groups from the context in which the website was being used.
1. current renters
2. prospective tenants
I also wanted to include elements that might be true for users on a case-by-case basis like being unable to physically view a property.
Personas
POV & HMW
-
How might we connect the users and maintenance team efficiently?
-
How can we keep users involved and notified through the maintenance process start to finish?
-
How might we help users stay updated when new rentals that meet their criteria are available (or will be available soon) since moving and the market can be extremely time-sensitive?
4) Ideate
What can be made possible?
The most important features were:
- A ‘notify me’ feature that updates prospective tenants about the availability of a rental without needing to go back to the site and search for it.
- A ‘notify me’ feature for the applications and maintenance requests to update users via text when progress is made regarding their application/request.
- Being able to request a tour on the site directly, and each party can respond when it is convenient for them.
Task Flows
5) Design
Identifying opportunities for change.
Design Audit
Key findings from design audit
- Visual design consistency.
- Leverage the white space and increase photo sizes.
- Rethink search function to be more specific with progressive disclosure.
- Contact and unit information is clearly displayed.
Branding
I kept the color palette very similar to the original because I felt other UI, IA, and user solutions needed to be focused on. I chose the blue logo and kept all blue elements consistent with this color. I chose one simple font and made sure all numbers were easy to differentiate because they would be used often for prices, addresses, contact numbers, etc.
Sketches
6) Test
The real user experience.
Testing:
- User will submit application.
- User makes a maintenance request.
- User navigating as current tenant and prospective tenant to find answer from FAQ.
Method:
- 6 participants (3 moderated, 3 unmoderated using Maze).
Success Metrics
- Submitting application (2 possible paths).
- Submitting maintenance request (1 path).
- Efficiently navigating FAQ.
Results:
- 100% moderated.
- Compromised results for unmoderated (~60%).
Feedback Grid
Prioritized list
(High to Low)
1. Tenant, applicants, and FAQ in dropdown under ‘contact’.
2. Combining of pages and moving placement of some elements.
3. Resolving and organizing FAQ better.
4. Refine text descriptions, change weights and sizes.
5. Consider the power of the CTA. Many people were drawn to that first. Maybe add a second one?
Iterations
Before
(left)
After
(right)
Prototype
7) Reflect
An honest examination.
What I learned:
Users want to feel included and updated. Without proper communication, users and employees can feel lost, anxious, and stressed. A business with a small team also communicates with several other parties like employers, past landlords, contractors, etc. Finding a balance between users and the business became a major point of consideration.
What went well:
When conducting the design audit, I had a pretty clear idea of what could be improved through the lens of design standards and information architecture. I gained a different type of insight from the heat maps feature on Maze. Overall, I feel I accounted for phases of the design process that might encounter delays and structured my timeline accordingly.
What I would do differently:
I wish I had done video calls with testers and been more thorough in my instructions. Being more detailed in prototypes would have prevented issues with quantitative data. I would’ve liked to see how users interacted with the original site, and gotten more information about the tenant portal, but my access to that was limited.
Next Steps:
Testing iterations, and giving unmoderated testing another try. Leveraging the power of the CTA button. Adding features that didn’t make the first cut. Possibly redesigning logo.