top of page
Townhall
Townhall is a resident portal, which allows apartment residents pay their bills, get updates on community events, and report problems to management so that they can be resolved quickly.
The UX flow below focuses on how residents can report issues and track their resolution. I've also included some detail on my process for designing Townhall’s user experience.
Duration: 2 weeks
Role
Solo Project
Research
UX Design
Visual Design
Problem
According to the data from the U.S. census, more than 100 million Americans rent. The renter demographic skews young. People in their 20s are more likely to own than rent. And Americans are increasingly continuing to rent into their early 30s.
People in their 20s and early 30s tend to be students or young professionals who are out during the day for class or work. When they run into issues with their apartment, they have to go out of their way to make time to stop by the leasing office or contact the manager during the office hours (9am-5pm). This results in delays getting their issues reported and resolved in a timely manner.
Solution
Design an experience that will help apartment residents report their problems to management and track issue resolution without having to call, or visit the office in person.
Target User
The primary target users will be young professionals in their 20s and early 30s.
I believed it was also important to design for a more senior audience for inclusivity based on these findings.
According to the Joint Center for Housing Studies of Harvard University, 1/3 of householders in their 40s rent, and 1/5 of householders over age 55 remain renters. They choose to rent often to have limited responsibility for home maintenance and to avoid the financial risks associated with unexpected repairs and potential declines in house values.
Research
In order to better understand the process of report issues related with the apartment, I interviewed my apartment managers, maintenance handyman, and residents in my apartment.
Questions for managers/maintenance handyman
-
What is the current process for residents to file maintenance request?
-
Does the resident have to be at home for maintenance?
-
How do you make sure the times match?
-
How do you need to keep a record of the requests?
-
How many requests do you get p/day on average?
Questions for residents
-
Tell me about your experience reporting a problem?
-
What are types of problem/issues do you often report?
-
What happened when the problem wasn’t fixed? How did you make another request?
-
How often do you put in a request?
Learnings
Managers/Maintenance Handyman
-
Manual and analogue process for filing issues.
-
Reports are kept in both digital and paper copy.
-
2 repairs p day during weekdays and 1 during weekend.
-
Resident must be home in order to repair.
-
Scheduling is done over the phone. Call to schedule, call to confirm before heading there.
-
External repair companies are used when it can't be fixed by the apartment handyman.
Residents
-
Hard to find time to be home for repair maintenance during work hours and weekdays. I leave early in the morning and get home at night. Weekends are the only times.
-
Process for reporting problems is very manual- works well for seniors who are not tech savvy. Young professional prefer an online platform to make requests.
-
Most common problems are related to heating, lightbulb replacement, and water pipes.
-
Issues/problems are reported about 5 times p/year or less.
Pain Points
User Goals
-
Residents can easily schedule time for maintenance without visiting the leasing office in person or having to call.
-
Even senior residents (late 50s) who are not tech savvy can report issues via the online portal.
-
Get real time updates of the reported issue's progress via the online portal.
Assumptions
The resident portal will be used by a predominant demographic of young professionals in their 20s to early 30s.
Constraints
Design a clear and intuitive experience for a minor number of residents who are seniors (55 and up) and are not tech savvy.
Use Case Story
Before sketching wireframes, I began by writing this use case story:
When a resident first signs a lease with the apartment, the leasing manager gives the resident a 4-digit code, which gives them access to Townhall, their resident portal.
The resident goes to Townhall's website or downloads the app to enter the 4-digit code. They then create a login using their email and password. After successfully creating an account, the resident is able to access their dashboard, where they can report issues, coordinate maintenance schedules, and view notices from the office.
The resident chooses to download the Townhall app, so that they don't have to log in every time they use the platform. On the app, the resident reports an issue, because their water heater hasn't been working. The resident can track their issue's progress, and schedule a time for maintenance once the request has been reviewed by the leasing officer.
Sketch Wireframes
Website
Mobile app
Prioritizing features by "Impact vs Use"
Townhall final designs
High fidelity wireframes
Create account on web
When residents sign the apartment lease, the leasing manager gives them a 4-digit code which gives them access to join the apartment's Townhall.
Log in on mobile app
The resident chooses to download the Townhall app, so they don't have to log in every time they use the platform on the website.
Dashboard - Reporting an issue - Issue detail view
Scheduling time for maintenance
Explorations
Dashboards
Issue detail
Dashboard web
Subject matter expert feedback
I shared my designs with a friend who manages housing for company employees temporarily living in Austin while they complete project assignments. These feedback gave me more insight into housing management, and with more time, I would like to incorporate them my next iteration.
-
"We had an app for my housing but found out that people still prefer to text me the request over submitting through the app. People these days like to see the pictures and simplicity."
-
"On the dashboard, I wish there are just big several icons like my bills, work order, package, security (like noise complaint), barcode (my random idea but when residents enter the pool, use the barcode in the app rather than using the gate remote or code."
-
"Since you zoomed into the maintenance request, creating a work order button is way too small compared to how it will be the most frequently used ones for the residents."
-
"I like how the residents can check the status."
-
"For the status notification, as a resident I would like to receive notes from the maintenance guy and also the name of the guy. Also receiving notification about community events will be cool too."
Final Thoughts
Next steps
-
Implement design improvements based on SME feedback
-
User test the designs for intuitiveness
-
Test wireframes with residents (both young professionals and seniors) to see if they are able to easily understand how to report a problem using the app.
-
Better understand how handyman manage/schedule their appointments.
-
After initial release, measure which features (event, my activity, notice, my bills, issues) actually gets used most often by residents.
-
Revisit calendar view for accessibility.
-
Flesh out desktop experience.
-
Create a Townhall experience for leasing officers and apartment handyman.
Further explorations based on feedback
After receiving feedback on the designs, I decided to take additional time to further improve the experience. I wanted users to be able to easily navigate their resident portal, create a work order, and view updates on their work order.
Dashboard
V1
V2
New dashboard with quick access to common actions taken by residents. In V1, "issues" included work orders and security related issues, but the two categories have been separated to make it easier for residents to keep track of their issues and to make it easier for managers to parse requests.
Fixed navigation at the footer instead of hidden in the hamburger menu- taking into consideration the less technical users.
"Message" allows residents to contact their apartment managers related to any residential issues that can't be resolved using the quick buttons at the top.
Create a work order
V1
V2
Improving visibility of creating a work order by placing it in the thumb zone and giving it more prominence.
Replacing navigation icons with explicit/clear navigation buttons.
Work order detail page
V1
V2
Condensing the work order detail section at the top - status and posted time is redundant with the info in the timeline.
Reversing the order of the events in the timeline, so that the most recent activity is at the top rather than hidden in the bottom.
Scheduling maintenance
V1
V2
Spreading out the scheduling interactions to multiple pages and avoiding information overload in a single page.
bottom of page