Easy Leasey
UX Research & Design | Mobile App Design
Team
Winny Chang
Varshini Kamaraj
Mengtong Li
Hannah Nguyen
Tanapat Ratanaruengjumrune
Zishuai Zou
Contribution
Contextual Inquiry
Data Analysis
Ideation
Prototyping
Testing
Duration
Tools
3 months
(March - May 2019)
Contextual Design
Adobe XD
Introduction
Students at the University of Wisconsin-Madison do not have a platform specifically designed for subletting or finding housing. Currently, the "NEW UW Madison Sublet and Roommate Board" page on Facebook is the most commonly used method for this process. However, many users encounter inconveniences when using the page.
​
In this project, we designed "Easy Leasey", a subletting mobile app, to eliminate the inconveniences and transform the subletting process into a joyful experience.
Design
Signing Up
"I hate scams! I want to make sure I'm messaging a real person."
Email verification is required by all users. And new users are recommended to provide Facebook profile link to foster trust.
Creating a Post
"I'll view others' posts and use a similar format on mine."
​
"I'm tired of posts with lots of words and irrelevant info."
​
We provide a thorough post template. On one hand, users can create beautiful posts easily by following the steps. On the other hand, viewers can browse posts faster since the posts are in a standardized format.
Browsing Posts
"I want an effective post, with all relevant info directly."
​
The first view of a new post provides the most important info such as photos, location, price, date, features available. We utilize icons to eliminate excessive words. If users are interested in learning more details, they can simply expand the post.
​
In addition, we apply the swiping idea from dating apps to help users categorize interested/uninterested items easily.
Process
We followed the "Contextual Design Process" learned in our textbook (Holtzblatt, K., & Beyer, H. (2016). Contextual Design: Design for life. Morgan Kaufmann.). Since we only had limited time within a semester, our project ended at creating a high fidelity prototype. The design process is shown in the following diagram:
Stage 1. Gather & Interpret User Data
We recruited ten interviewees from UW-Madison to conduct contextual inquiries. We started with basic questions, followed by watching them perform the subletting/searching tasks. We asked them to explain their actions so that we could understand the intention. Each inquiry session took about an hour. We completed the inquiries in small groups of two and then shared the results with other teammates during the "interpretation sessions", meanwhile extracting some important information from the inquiries.
A post of an interviewee during her past searching process.
Important information from the inquiries was recorded in an excel spreadsheet.
Stage 2. Reveal Insights from Data
First, we utilized an affinity diagram to reveal insights from the data. We cut the information in the excel spreadsheet to strips. Similar strips were grouped together with labels revealing issues and themes. It was a bottom-up process. We started with the blue labels first, then the pink labels, then the green labels. The three top-level labels (green labels) were: "This is the process I go through", "I need information", and "This is how I feel in different parts of the process".
User data was grouped using affinity diagram.
A part of the affinity diagram.
Labels in the affinity diagrams.
Second, we created three models to show users' experiences from different points of view. The models were: Day-in-the-Life Model, Sequence Model, and Sensation Board. With the models, we were able to identify more thorough insights from user data.
The Day-in-the-Life Model has three primary areas of interest - getting started, posting and searching, and communicating and negotiating. From this model, we found that users prefer to use a laptop for creating posts. Some of the challenges that users face when creating posts are:
-
Getting all the pictures needed (either by taking pictures with phones or downloading from management website) on their laptop.
-
Formatting their posts with essential information in a standardized manner.
We found that users usually work on subletting/finding housing in their short free time. They also primarily use their mobile phone to do so. Therefore, our focus is on assisting them with using a mobile app and making it easier to create posts on their mobile phone.
Day-in-the-Life Model for subletting and finding a place captures the activities of the user throughout the day.
From our Sequence Models, we found that although the primary activity chunks are the same, the steps in these activities are slightly different. For example, consider the activity of preparing to sublet or finding a sublease on Facebook. Here the sublessors must upload photos in the posts that they create, and this can be a hassle. However, the sublessees, people who are looking for a unit, do not have this process. Another difference that can be seen in the process of searching for a sublessor or sublessee is that while sublessors wait for potential sublessees to contact them, sublessees are more proactive about finding sublessors and experience a breakdown when using the Facebook search bar. The design opportunity is to help users get things done more easily no matter which role (sublessor or sublessee) they are playing. We could design different modes to support different roles.
Sequence Model for subletting a place shows the steps taken by a sublessor to find a sublessee.
Sequence Model for finding a place shows the steps taken by a sublessee to find a sublessor.
By creating the Sensation Board, we identified the emotional experience desired by the users. The biggest challenge that users face is uncertainty and insecurity during the process. Users subletting their place aren’t sure about when their place would be rented, and users (both sublessor and sublessee) are also concerned about scams. Therefore, we aim to bring a sense of security to the users. Additionally, users aren’t satisfied with the current subletting platforms since those are not specifically designed for subletting. We aim to fix the problems and provide additional features in our app to increase the ease of use.
Sensation Board for subletting and finding a place depicts the emotional experience that users go through.
Stage 3. Generate New Product Concepts
On our affinity diagram, we did a "Wall Walk" process, which was reviewing the labels and notes to create lists of "issues" and "hot ideas".
Wall walk: We walked the affinity diagram and created two lists - "issues" & "hot ideas.
Next, we did "Visioning", which was drawing the new life that we could create for the users with our application. We drew multiple product concepts from the most promising "hot ideas". Finally, we did a "Cool Drilldown" to think about ways of designing a cool user experience. The concept that stood out the most was the "dating app" structure. Unlike on Facebook, users have endless scrolling when browsing and they must perform two clicks when saving posts. We thought that using swiping right or left to indicate like or dislike on a post would be very simple. In addition, users can move on to the next post directly after the swipe, creating a smooth and pleasant experience. Therefore, the dating app structure became a key feature of our design.
"Dating app" structure, an example of the visioning drawing.
Stage 4. Define the Product
In this stage, we first created the Storyboards to define the scenarios for the subletting/searching process from start to end. We drew six scenarios to tell the story of the six steps in the process, which were "creating post", "filtering", "browsing posts", "bargaining & conversation", "view statistics", and "terminating".
Storyboards showing the scenarios when using Easy-Leasey.
Secondly, we completed the User Environment Design to define the structure and functions of the application. We thought about the insights we revealed in Stage 2 again and tried to address the issues with different functions.
Designing functions based on insights.
User environment design of Easy Leasey.
Lastly, we built the "Interaction Patterns", which was designing the details on each page to deliver the functions we listed in the User Environment Design.
Examples of interaction pattern.
Stage 5. Prototyping & Testing
We created a paper prototype and tested it on seven users. Overall, users were very satisfied with our app and expressed that our app would fulfill many of their desired needs when subleasing or finding subleases. However, some parts of our prototype made users confused or react differently from our expectations, which gave us hints that our design needs to be improved. The users helped us redesign the prototype by sharing their ideas and suggestions on what they expected to see in the app and how to make some interactions more reasonable.
​
After testing on three users, we identified a few issues. Therefore, we debugged "Paper Prototype 1.0" immediately. The major issues and the corresponding adjustments we made were:
-
We found that users easily get confused with the menu items at first glance, so we modified the labels and removed unnecessary ones. For example, (1) "Summary" and "Saved Summaries" were confusing, so we kept only one, and (2) we changed “Summary” to “Favorites Items” and changed “Post Details” to “My Posts”.
-
We found that the order of the menu items weren't very intuitive, so we adjusted the order to better match the sequence model. We also decided to move "Filter" into the Swipe Browser page since it's a function under the browsing mode.
-
During the interview, users felt frustrated when they couldn’t figure out what role (sublessor or sublessee) they currently were as they thought the viewable posts and the available functions should be different in different roles. We did have the role selection option in the “Create a Post” page, but it’s hard to be found unless users go to that specific place. Therefore, we decided to make the mode buttons more noticeable by moving the mode buttons to the hamburger menu.
Evolution of the paper prototype, with blue highlighting adjustment 2 and green highlighting adjustment 3.
Screens of Paper Prototype 2.0
After testing the "Paper Prototype 2.0", users were fairly satisfied with most features. We only removed the “Statistics” feature as some users found it unnecessary. Then, we refined the design and created a high fidelity prototype using Adobe XD. The color choices were based on color psychology. We chose blue for the selling mode because it can bring "stability, peace, calm, and trust" to users. And we selected green for the finding mode because it brings feelings such as "freshness, balance, equilibrium, and harmony". Each of our teammates was responsible for designing screens for one to two features. After having the initial high-fidelity designs, I finalized the styles and interactions of all the screens. Below are some screens of the final design:
Screens of high fidelity prototype
Reflections
This was the first time that I did such thorough research on users. I learned to conduct interviews, analyze qualitative data, and test prototype. And I was surprised that we had many unexpected findings, which taught me that I should be modest and learn from the users.
​
I was in a big team of six members and there were lots of things to do, so teamwork played a big role in this project. We did great on splitting tasks and sharing the results. We also discussed peacefully when we had diverse opinions. The only issue is that we had different standards and skills in making prototypes, so the screens that different members made had very different styles. I wonder how designers solve this kind of problem in a company.
​
If we could have more time to work on this project, I would like to develop the "Statistics" feature better. I believe that if we did some more research on this part, we could present useful market data to the users and they wouldn't consider it unnecessary anymore.
​
I learned a lot from this project and I will keep learning from the new challenges ahead!