Leadership, Management, Lean UX, Design, Wireframing, Interactive Elements, Hi-Fidelity Mockups
Web, Mobile
Wireframes, Hi-Fidelity Mockups, Style Tiles, Type/Color/Button State Heirarchy
View the design process and deliverables below.
rentLoop (with a lowercase "r") was a startup looking to disrupt the real estate market by collapsing the relationship between renters, brokers, and apartment owners. Unfortunately, this design project was completed but the service failed to implement.
Our focus was on Prospective Renters. During this challenge, I directed my team to consider three total users (Property Managers, Current Tenants, and Prospective Renters). After analyzing the go-to-market strategy, we found that our pilot design would focus on putting Prospective Renters in touch with Current Tenants.
rentLoop dreamed of a P2P rental system, allowing prospective renters to reach out and sign leases after touring a current resident's apartmet. It positioned itself to disrupt the real estate market. Whether we want to uproot and make a major cross-country move, or just across town, we often rely upon real estate agents to provide insight on this stressful life experience.
In this case-study, I will walk us through the way that my team and I took on the prospect of what an MVP artifact would be for this kind of service.
Afterwards, I will display the hi-fidelity design prototype for scheduling your tour for a P2P experience in touring a current tenant's apartment.
This project was taken on when I myself was relocating after the completion of my M.S. in Human-Computer Interaction Design.
I took this opportunity for the rentLoop startup because it was an exciting idea, while I sought out more permanent work in Austin, TX. After 3 months working with rentLoop as a side project, my time completed with this design project.
The rentLoop website experience provided a map, as well as a listing of initial apartments willing to participate in the pilot service that rentLoop was demonstrating a proof of concept for investors.
Similar to other apartment search services, rentLoop's website offered cards with apartment listing information beside a map of the area the service would pilot.
Picking up the rentLoop project was like picking up pieces of another designer without any documentation or history of decisions made. At the start I decided to review the current site Information Architecture in order to map out the clickable touchpoints.
I broke down the places a user could go via nested pathways in order to understand where the primary service experience took place. In other words, where would a user go in order to sign up to tour an apartment or sign up to host tours.
The diagram mapping the current site touchpoints revealed a critical moment of faith for a prospective user.
How would I trust this service? To begin with, It is awkward touring a lived-in apartment. This service adds the additional fear that Uber or Lyft navigate everyday: How do I trust going into someone else's place? It requires faith and courage.
This moment of faith occurs when a prospective renter signs up for this service. This surfaces the key question: How do we bring the service to them?
.png)
Onboarding my team, I presented the diagram of the current rentLoop sitemap shown above.
Looking at the map, we can determine what "is". Now we need to know what "could be".
We took a Lean UX approach, extrapolating what we knew of the business problem, solution ideas, and discovering what steps we could take in order to take action.
The insight that oriented our focus came from one of our business problems:
Renters must schedule apartment tours based on the office and/or the agent's schedule.
I proposed for our team to take a role-playing approach to generate knowledge of pain points in the actual experience of touring an apartment.
This was easier than initially thought, as many of our acquaintances were moving apartments or had recently moved, making the role-play "realer" than would be if they had not moved in a few years.
Given that we wanted to design an artifact that would deliver the value of allowing apartment tours 24/7, not restricted to leasing agent's working hours, we would need to know what it feels like to have someone visit you for the purpose of seeing your space.
One of my team's designers, Cora Risk, also took the initiative for us to take a user-interview approach of "Show and Tell."
We would present people with the story that they were intending to move. There is this new apartment tour service called rentLoop, and it lets you schedule tours with current residents any time of day or night. Then, simply ask for our users to lead us through how they think they would go about using this service, while allowing them to view the current rentLoop site.
We aligned a few of our major insights from our role-playing exercise through the IBM Persona generation exercise, "Think, Feel, Do, Say." This resulted in our our Prospective Renter Persona.
"...unsafe to visit a strangers house"
"Anxious about needing to find a place before I have to move out."
"Annoyed (when multiple listings were not available, but still listed)"
Our analysis and persona generation informed our direction over jobs to be done for our users. We determined that our opportunity existed in the safe, comfortable experience which enabled a Prospective Renter decide to schedule an apartment tour with a current renter.
The I-want-to-go moment is embedded in a missing touchpoint. Although the current rentLoop website facilitated scheduling apartment tours, our business analyst directed our attention to the fact that users are accustomed to going to either apartment search engines or specific apartment websites to schedule official tours.
This means that we needed to create a way for a user to schedule a tour, with the right amount of feedback and visibility of the tour ahead of time, to empower them to take the decision to take the leap of faith and schedule a tour: in essence, starting the service journey of rentLoop.
We decided on creating a scheduling widget that empowers the user to flow through their must have jobs-to-be-done.
Below you can view see the initial feature breakdown for our MVP for a widget.
Through business guidance of the CEO, we determined that the most effective MVP for scheduling would be a widget that initial business partners (apartment owners/management groups) would be willing to place on their own sites.
Naturally, apartment search engines would not want this sort of widget to take away from their lead generation.
In the current rentLoop site architecture, a user can schedule tours or host tours (to earn money), after signing up.
This along with the business case structured the constraints that the widget would need to gather information from user to eventually feed into fields for website conversion.
Some fields would require:
Time and Date of tour duration of tour, location of tour, names and confirmations, among others.
Our focus flows information from the user widget experience into the database of the current rentLoop sign-up and profile experience.
To do this, we mapped the experiences as "clicks" or screens. Each of which is a big moment in the flow that we can anticipate and encourage users to empower their feelings of control and trust.
In order to begin sketching and visualizing the way different components may facilitate interaction, we posed actionable questions:
How might we determine the MVP components for this experience?
What examples are out in the world that inspire what our tour-scheduling widget could be?
These are the real world examples that are in the same market, or even completely different industries.
We gather, share, and provide insights about these examples because they inform the potential look and feel, form, and flow of the new experience we design. (For those familiar, this process is similar to Google's Lightning Demos).
Three especially guiding experiences were the usability of OpenTable, Google Flights, and Calendly.
Each of these three directed my team's attention towards the the ease-of-selection for dates, how the modal of the widget felt seamless in the overlay of the client's site, and how time-slot selection enabled discrete times which apartment tour host's could work within.
While we sought out exemplars for our widget design, I also set my team out for all of us to do 2 iterations of possible style tiles (lean branding guidelines providing visual direction).
Afterwards, we voted on which elements of photography, typography, general button states, and iconography would best align with the spirit of rentLoop.
Below is the final composition that drove the hi-fi visual spirit and branding of the rentLoop widget. If we were to continue design work with the company, then this would have served as a starting point for a more polished materials library.
Pen and paper sketching is an irreplaceable tool for designers (and the same goes for whiteboarding). It allows us to share abstract representations of ideas, and make collaborative connections without the burden of precision that digital hi-fi design usually expects.
It is when sketching that we are able to work out the major story for a user, understand if we are aligned on the core of each step in the user experience, resulting in a solid foundation for working the nitty-gritty out later.
We sketched the initial ideas for our widget experience inspired by the steps and components elicited from our user story must-haves as well as anticipating the potential awkward moments in the actual interaction between current apartment resident and potential renter.
As our sketches began to take shape, I challenged my team to diverge by creating initial digital wireframes.
These start to work out the visual hierarchy, type weights, general interactions, and padding/margins of components without the finalized styles applied from the Style Tile.
What you see below are the high level flows of all three of our divergent efforts.
After presenting one another with our flows, I proposed for my team to perform a round-robin style critique. Questions that we raised to converge on UI components included:
How has this UI enabled users to take a step at a time?
Are elements represented in the right heirarchy?
Which components provide the right range of selection?
Ultimately, the flow that was prepared for hi-fi revision was a composite of all of our efforts.
Key insights include:
A wide-display for apartment photos
Discrete time-block scheduling
Google-flight inspired calendar range
Simple card-style duration picker
To name a few.
Visual indication for button states and a variety of micro-interactions is where we relied on final fine tuning.
I applied the characteristics from the Style Tile to the wireframes, however there were small adjustments to be made for button states.
With a little under a month, my small design team was able to come together under a centralized platform (Miro + Adobe XD), as I led us to collaborate, refine the user experience, and align our opportunity for an MVP scheduling widget for rentLoop
Below is a looping video of a Prospective Renter on one of their potential apartment websites. They click to schedule a tour and launch our widget prototype.
Once the modal is open, the user is led through an experience where they are given single-task opportunities to select Date, Time, Duration of Tour, if anyone will Join them, as well as the confirmation response.
