"MyHome"
next solution of communication way in Apartment complex
This mobile app solution brings communication between members and management staff in easy and fast way.
Project Type
Design Challenge
Duration
June 15 - June 21, 2020
(7 days)
Tools
Figma
Photoshop
Paper
Video-recording
Zoom conference tool
My Role
Qualitative user research
User interview
User testing in on and offline
User journey mapping
Create customer scenarios
Ideation
Low/high-fidelity mockups
Interactive prototypes
Visual design
OVERVIEW
Prompt
A great residential community (e.g. condominium, college dormitory, etc.) provides a variety of amenities and a dedicated staff responsible for its maintenance. But there isn’t always an easy way for community members to report problems to management so they can be fixed resolved quickly. Design a system for a community of your choice, so members can report issues and track their resolutions.
Propose experience
A way of resolving issue and communicating with management
MyHome app is a mobile app solution that not only allows users to get their issues resolved in a timely manner but also helps them simplify communication between members and residential management staffs.
The solution focuses on simpler, faster, and more efficient ways that let members report issues, track their resolutions, book amenities, track packages, manage lease and payments, and do much more.
This app is a hub of communication in community. Any communication can start from the MyHome app no matter what.
UX Challenge
"How to build a better communication experience between community members and management staffs in eco-system?"
"How to enhance community members' experience?"
Design Objectives
To achieve 3 specific goals, I design the MyHome app experience for users whoever need to sync community.
1. Creating eco-system.
Encourage community members to connect community staff and request any service through the CoCo app.
2. Solving for communication.
Simultaneous and transparent communication
3. Building better experience.
Enhanced work process and guaranteed A-z service via the CoCo app.
Project Process/
What I worked on
June 15, 2020
Understand
Define Experience
Ideate UX
Sketch System Flow
User research​
Contextual inquiry
User interview
New concept research
Current behavior analysis
Design scoping
Design goal
Persona
​
Model persona base scenario
Wireframes
Draw system flow
Information architecture
June 21, 2020
Paper prototype
User Test
Mock-up
UX deliverable
Wireframing
paper-based prototype
Prototype test
User feedback
Low-fidelity
High-fidelity mocks
Final mocks
Interactive prototype
Visual design
RESEARCH
User Interview
To better understand potential users, I interviewed 4 condominium/apartment residents who make maintenance requests by using online portals. Questions asked in the interview were open-ended and designed to encourage the interviewees to think outside the box and to share their experience in communicating with a management staff.
From the user interview, I identified:
1. pain points in communicating with a management staff,
2. needs to report an issue in an quick and easy way.
All participants were invited via Zoom, and I performed the interviews with them via Zoom conference call.
They've been asked with 3 topics mainly.
​
Questions that have been asked can be categorized into three topics:
1. What type of issues and how do you report?
2. What are the most frequently requested issues? Select 5 top issues.
3. How do you communicate with management staffs? How do you track the status of the report?
Participants connected to Zoom conference call during SIP
"I did not know when the management staff came into my unit and fixed the issue until I noticed a paper notification left in my apartment. I also don't know my leasing office received my notice because I talked to leasing office staff directly and there was no clear follow-up system or so. It was just verbal communication."
"They are not always in the leasing office. Calls are annoying to connect them and there is no guaranteed way to get feedback unless they pick up the call and ask them fix my issue"
"I don't get any follow-up email or notification after I report something. They connect me when they are ready to fix it."
"I wanted to meet the leasing management staff while they fix something in my unit as I wanted to ask something about the issue. However they usually give me time range and not on time. I don't know how to meet the staff in my unit. It is difficult mission for me always."
"I want to leave a good feedback for the staff who fixed a problem. But there is no way to give him a great feedback. And the community is huge so we don't know each other. I believe community member's feedback would be really useful to enhance their service and maintenance."
"I want to know how much it takes to get ready and take an action for my issues once I send a message or via system. Currently I just wait until they give my feedback."
Common Experience Map
This user journey is based on what I collected from the user interviews. I was able to observe what did that process look like to each of the interviewees and how did they feel at sequence/different steps of that process. Additionally I performed role-playing person as an apartment resident who reports an issue by going through the housing service website and existing app which I can reach out via my apartment system.
Additionally, I found that there are multiple channels to reach out management staffs or report issues such as phone call, apartment website, email, etc. However the experience can be more transparent, connected to other channels so that it can be less confusion, smooth workflow and intuitive enough.
​
To put together including anxiety and concern on each step, I created a user journey map shown below.
Common Issues/
finding
From user interview.
Most common issues reported by the community members who participated in the user interview session are as follows, and I presented these common issues as examples in my design.
Garbage disposal not working
1.
This issue needs to be fixed as soon as possible.
Clogged drain
2.
Lost package
3.
Loud neighbors
4.
Management office is closed and staffs are not 24/7 supportive.
Frequency rate
Often
Less
Apartment issue
Ask management staff/connect leasing office
Package delivery issue
Community issue
From role-playing and brainstorming
I led a brainstorming session to find out 'issues and how to report' with some questions and initial ideas that can be solved by proposed experience design later. Apartment resident role-playing gives me motivation to create enhanced method for myself, apartment resident and narrow down to their issues in details.
Communication Method/system
I learned the existing residents communication methods by my apartment and other communities in the Bay Area especially from San Francisco apartments.
Although the apartments have mobile app to connect residents, they still provide paper-based communications and residents prefer phone call as it is the easiest way to connect management staff and fix issue currently. This is failure of web-based communication tool. Residents still prefer web-based channel as there are time-flexibility and record all status/issues. In addition, residents do not waste of their time to visit a leasing office or wait staff's response on call.
Mobile app.
Phone call
Web portal
Paper-based communication
Impact vs. Effort vs. Difficulty vs. Time
matrix
Matrix on task:
issue reporting & communication channel
It is important to learn about the relation between user effort and resolution impact, task difficulty, or time spent to resolve issues. The relation between these factors is illustrated in the matrix below.
Current
Currently, the resident needs efforts in high level to make the high impact resolution.
More difficult mission, more effort required to resolve issues. Eventually this outcome causes hesitance to connect staffs through app. That's why currently phone call is used frequently than web-based communication method.
More difficult mission, more time spending needed as there is no clear channel to connect staffs and also they can not expect consistent response in such a way.
Proposal
Task impact does not affect a level of resident's contact/process effort on issue reporting. It does always show same effort regardless of impact level.
Task difficulty does not affect resident's effort on a task-report issue.
Residents spend similar amount of time to report issue and communicate with staffs out of boundary in task difficulty level.
DESIGN ITERATION
User Experience Goal
Service Provider Goal
Ideation and Sketch User Experience
From all user research and findings, I define user experience goal and apply to my solution-base design.
Make issue reporting experience​ easy
- Understanding current experience and user flow
- Understanding user's behavior on reporting step
- Creating intuitive flow ​​
​
Improve communication methods
- Unifying communication channels
- Making communication methods flexible
Engage community members
- Providing community updates
​
​
Information Architecture
In this app, I cover four major tasks that are chosen by user interview participants. All services are layered under these key objects, and residents can access a high level view on the landing page and reach to a particular service.
Among these major services, package-related and maintenance requests are the most frequently asked services, which I focus on prototyping in this UX challenge.
User Flow Diagram
The user flow diagram shows the end-to-end experience that is employed in the design. In particular, the diagram discovers pain points for residents to report an issue and also shows how to solve the current issue in communicating with staff members.
Wireframing
Given the feedback from resident interviews and brainstorming, I mapped out the primary tasks and demands on top level in information architecture and narrowed down to each step in user flow diagram.
I intend to use these frames as a way to illustrate ideas onto paper. It shows how screens connect to each page. I also ideate the UI layout and structure on the sketch.
paper mocks test/result - sketch on the paper mocks
By using paper-based prototyping, designers can create strong idea confirmed with users, and the feedback will be used to be subjective opinions. The idea on UX can be more concreted in design proposal. I performed user testing with one of participants to receive user feedback and applied the feedback on my design.
As a result, the design is heavily annotated with good insights. After the session, I dived right back into iterating these screens to propose enhanced user experience.
Hyun pic./show what to change from user testing
Idea editing on low-fidelity mocks
Based on the user testing with paper-based prototypes, I found that there are a couple of features that could be added to the app. Additionally, there were some confusions on the interaction and wording. I revised my design and edited wording on sketch. Low-fidelity is designed with users feedbacks and detail-oriented interaction shown below.
Based on task frequency
level found in user research, resident lease contract form and profile are save in user's profile.
App login
Action buttons/functions embedded on the feed/posting
Most important feedback or updates shown on the home page navigation.
App home
Home shows updates from apartment management office and there are functions to see each feed details and also action buttons e.g. amenity reservation and pool reservation.
Card feature:
Reported issued shown on card features on Issue page. If action required, link of button will be rendered on the related issue card.
There are four main tasks filtered by user testing participants and user research. Top 4 main tasks shown on navigation bar. This mock shows a task-report issue landing page.
Ingress point - Issue
Visually represented issues/placement. User can select one of the images or search or alternatively contact staff via link.
Select one of images easily
Report Issue
Issue Details
Confirmation
The confirmation message is shown on the page and automatically move onto Issue landing page.
New reported issue
New issue is updated on top of the card list. It shows summary of the submission. Click and go into detail is available.
Hi-fidelity mockup/
Visual design solution
Color Palette
Primary color
Main action
Active mode
​
Primary color
Main action
Active mode
​
Text sub color
long text
secondary action
​
Divider
disabled action
inactive mode
reference text
Background
body color
Header
Text primary color
Bold text
Design Pattern _ Card Feature
​
