Pen & Paper
Site Map Creation
UI & Visual Design
"I pay rent through an online portal with a credit card. Big fan of recurring payments - set it and forget it!" - Jill, User interview
Zillow Group houses a portfolio of the largest and most vibrant real estate and home-related brands on the web and mobile. The company’s brands focus on all stages of the home lifecycle: renting, buying, selling, financing, and home improvement. As of 2019, Zillow's mobile application doesn't offer consumers a way to rent directly on the platform or manage their lease. Consumers must contact property managers or real estate agents to rent or buy a property.
What if the Zillow app removed the hassle of slow responses from agents, and consumers could apply/sign a lease as soon as a property was available?
Design a rental feature to add to Zillow's existing iOs mobile application.
The rental feature add-on was a two-week conceptual project assigned by my instructors from General Assembly's User-Experience Design Immersive. My duties consisted of:
I also worked alongside a UX Researcher and UI/Visual Designer for the duration of this project.
As the project manager, it was important to define the project roadmap for our team, especially since the sprint was only two weeks with a holiday break sandwiched in between the workweek and presentation day. To keep us organized, I created a Gantt Chart in Google Sheets outlining tasks that needed to be completed by certain deadlines. Additionally, I created a document of our Team Functional Plan for work cadence, communication, and problem-solving strategies. And to promote team synergy and mitigate brain fog, I created a snack list for our workout sessions.
To flesh out the details of the scope, we conducted an initial stakeholder meeting to gain clarity about the project deliverables, communication preferences, and desirable outcomes from launch.
To gain an understanding of how renters find properties and manage their lease, we conducted five user interviews along with contextual inquiries of the existing Zillow iOS app to determine the touchpoints and placement of the lease portal.
After the interviews, we conducted an affinity mapping session to group common themes from the user interviews.
After synthesizing our user interviews, we created a primary and secondary persona to capture different types of renters. The primary persona focuses on the renter who has a professional career and is looking for long-term housing. The secondary persona captures a younger renter that needs temporary housing, such as college students or travel bloggers.
We chose three apps that are well known in the real estate industry to determine best practices and areas of opportunity. Trulia, a Zillowgroup consumer brand, was the only app that allowed users to schedule tours, which surfaced as a need in more than half of the user interviews. Another area of opportunity was a realtor chat for customers to raise questions and concerns. Lastly, surfacing a form field for customers to choose their desired lease terms was a key opportunity, since 1 out of 4 companies did not offer this capability.
Renters need a straightforward way to rent a property with an understandable lease agreement and upfront costs because transparency with the rental agency leads to mutual trust and security.
Once we defined a direction, we ran a design studio to begin sketching ideas for placements and touchpoints of the lease portal. We used the "Crazy 8s" method and spent a minute each on 8 sketches and fleshing out each idea/screen every minute. Once we wrapped up the 8th sketch, each designer presented their sketches for 3 minutes. Afterward, we silently dot voted and discussed which ideas intrigued us and which weren't feasible to the user and scope. Our visual designer came up with the idea to use the swiping gesture, similar to Tinder or Bumble's user interface, for renters to favorite or discard properties show to them. We were interested in exploring this idea, but needed time to validate if users would want to view properties one at a time or as a list. We decided to stick with Zillow's current treatment of viewing properties in a list for the sake of this scope.
As a team, we mapped out a user journey for our primary persona, Scott, to determine when and how he would access the leasing portal. From there we created a user flow of the tasks we wanted our testers to accomplish during usability testing.
To determine navigation schema and how many levels needed for each menu category, we created a sitemap of the main navigation menu.
Child - Teachers can see content scores for the class, student groups, and the individual student. Parents are only able to see scores for their children.
Subjects - Both parents and teachers can see scores across various subjects.
Missions - Teachers and parents can assign missions and view scores on the disruptED platform based on the subject matter.
Stars / Streaks - disruptED engages students through gamification methods, such as stars and streaks (frequency of completed missions), where students are incentivized for completion of missions or assignments. Teachers, parents, and students can view the number of stars and activity streaks of each child, and for teachers, this includes student groups and the whole class.
Metrics - At this plane, only Teachers and school admin would view scores and percentages of students, student groups, and whole class across performance indicators of mastery, satisfactory, or below satisfactory.
AR / VR / ER - School admin and teachers would be able to segregate scores across different modes: augmented reality, virtual reality, and e-reader; to see where students or classes are experiencing growth or struggling. When explaining this to disruptED stakeholders and the design team, it would be important to understand if the content area or the various modes is contributing positively or negatively to student progress.
TEKS / Common Core - Teachers and school admin view student academic progress through TEKS/Common Core, state standards for K-12 curriculum and standardized testing. The Common Core State Standards Initiative is adopted by many states in the U.S., whereas Texas Essential Knowledge and Skills or TEKS are the state standards for Texas public schools.
Along with project management, I designed screens for the leasing portal. Initially, the design focused on the placement of the lease button on the property list view and within the main navigation, along with the initial steps/screens of the leasing process. After receiving feedback from the stakeholders/instructors, we were advised that the lease feature felt too shallow. Leasing is an involved, legal process; therefore, some friction is needed when signing a lease contract digitally. Additionally, since the lease portal is an add-on feature, onboarding screens are a must to alert customers about changes to the app.
To apply the feedback in the design, I added onboarding screens to introduce the rental feature along with screens for signing a lease in a wizard-like flow.
We conducted 5 usability tests to determine pain points and areas for iteration. Our top findings were:
As part of our deliverable, our team's visual designer produced color mockups of the prototype and added mockups of ideas we explored during the Crazy 8's exercise.
An animation of the initial screens of our prototype by our visual designer.
Team Synergy & Communication
Laying a strong foundation for team building and communication contributed to us producing this deliverable. When communicating through Slack became challenging due to loading delays, we found an alternative-Discord, a free communication platform dedicated to gaming and gamers. When a team member fell ill, this platform was super handy because it allowed us to let teammates listen to lectures and meetings live through the Discord mobile app.
Designing Friction for Legality Purposes
Thinking through interactions for the rental portal was fairly simple given that most of the teammates currently and in the past have leased a property. Plus, the user interviews gave us insight into other innovative features that their properties use for their rental portals, such as package locker notifications. However, we ran into challenges when trying to decide how users would interact with signing a lease. We wanted to make the experience hassle-free and simple, like with booking a stay with an Airbnb host or a hotel. But for legal purposes, there has to be a level of friction given the amount of documentation a lease contract requires. Many lease contracts not only contain information specific to the unit but also addendums about fire, renter's insurance, pest control, pet policies, etc. The prototype needs to address what navigating multiple legal documents look like on a mobile app. What percentage of users would feel comfortable completing these documents on mobile as opposed to desktop?
Since the scope was only 2 weeks, we didn't have the opportunity to fully flesh out the deliverable. I'd like to redesign the following in the future:
Hit Enter to Search or X to close