Urbs / Senior Capstone Project
Urbs is a resource to help students across the US have a better experience finding internship housing. Students that participate in internships are often required to find short-term housing in a quick timeframe for cities they've never even visited before. Most of the resources available now are geared towards either short-term vacations or long term leases of one year or more. The goal of Urbs is to match interns with housing that is relevant to both their timeframe needs and personal desires, and to connect them with potential roommates in similar situations.
P R O C E S S
01 / Research
To get started, I took a look at what resources are commonly used by students during the housing search today. Some of the top contenders that I looked at are AirBNB, Craigslist, and Zillow. The goal at this stage was to get an overall understanding of what solutions currently exist, what they look like, and what functionality they do or do not include. A key insight made at this stage is that aside from vacation rental sites, it's often not an option on these sites to search by an availability timeframe: something that is very important to interns.
02 / Benchmarking
My next step was to look at what types of information are included on all these sites. I went through each of the most popular sites and wrote down everything that was included as a filter or searchable asset on at least one site, and made a color coded chart to compare. AirBNB had the best filtering ability, but a lot of the filters were very much geared towards vacationers. After completing this exercise, I highlighted which filters I wanted to include in my solution, based on feedback from potential users (other college students) and my own experience.
03 / Personas
The second step in this process was to identify my target personas. I created these personas based off discussions I had with students in my co-op program as well as students from other schools. These personas represent a variety of schools, majors, confidence levels, and timeframes, as well as different major concerns.
04 / User Flows
Creating user flows for my different personas helped to identify some main screen types as well as what interactions I wanted to focus on. These task flows were presented at a large peer review/critique and the feedback I got there helped me to narrow my focus to the key features that make this app unique from the rest. I decided to narrow in my focus in two specific areas: the roommate suggestions, and introducing suggested apartments rather than having the user do all the work searching and filtering.
05 / Wireframe Sketches
At this stage, I began to explore different ways in which the information could be organized within the UI. I knew I would need certain elements such as a map, a messaging system, apartment detail screens, and ways to set filters, so I looked at 3 different ways to accomplish this task. These iterations were part of a critique session with my peers, who agreed that some combination of concept 1 and concept 3 would be best - using the map as the full UI, but playing with the ideas of overlays and expanding cards in order to give more information in a very flexible format.
06 / Digital Sketches
The goal for my first round of digital iterations was to pick a couple screen types and translate my wireframe sketches to the digital format. I looked at some key pieces of the main map UI, such as how filters would be set and what the hover state would look like. I also looked at the apartment details screens, since this is the most important way the user will be getting information about the apartments. At this stage, I felt that I was still a couple steps away from the level of personalization I really wanted. I decided my next iteration would be even more focused on giving suggestions to the user, rather than still requiring the user to do most of the heavy filtering and searching work.
This second round of explorations was focused on adding in an additional element of assistance to the user. I changed the sign up process to include choosing filters at the beginning. Then the application suggests apartments to you one by one that match your filters. The user can exit this process at any time to view all of these suggestions on the map, color coded based on how they rated them. I also refined the apartment details page a bit more.
My last round of wireframe explorations examined how the apartment suggestions would be presented to the user. I made the decision to break the matches out into 3 groups: best matches, suggestions, and compromises. Any apartments that didn't fit any of these criteria would still be present on the map for the user to explore on their own, but would never be suggested to the user up front. I also took another look at how the user would set their preferences: instead of just checking filters on and off, they would be able to put their preferences into "need", "want", or "no preference" buckets. This would help give more tailored apartment ratings than a simple filter toggle could provide.
07 / Design Explorations
In this first move away from the more simple wireframes, I explored the use of color as a way for the user to tell what section of the application they are currently viewing. I also started to explore the design of different card elements, such as the consistences and differences as the user moves from the apartment preview to the apartment details.
As I continued to refine the design, I focused on toning down the use of color to a more subtle level, as I felt the first iteration looked a little too disjointed. I also moved some navigation elements from the side to the top of the screen, where I felt they would be more visible to the user.
This design iteration, which is close to final, further refined the use of color as well as the micro-elements like tags, icon use, and the design of individual detail cards.
08 / Final Screens
09 / Video Walkthroughs
For my final display of this project, I created a few video walkthroughs based on one of my personas that evolved as I worked on this project.
To get started, April creates an account and sets her initial apartment search preferences. Creating an account will give her access to the messaging portion of the website, making it easier to find a roommate. Setting her apartment search preferences will help Urbs suggest apartments in the right price range with the right features.
Users that create an account are provided with three different categories of apartments – Best Matches, Suggestions, and Compromises, and learns what each of these categories means. After looking at all the categories, April decides to take a look at her Best Matches.
Urbs makes it easy to connect with potential roommates by allowing users to make posts on apartments they are interested in. April thinks she might want a roommate to keep costs down, so she decides to respond to a post.
Features of the apartment cards allow users to take a deeper looks at their future neighborhood. Toggles for restaurants, grocery stores, and bars can be used, as well as toggles for public transportation options. April wants to look at the food options and BART stations around one of her favorite apartments.
A simple messaging system enables users to keep track of conversations with potential roommates. April takes advantage of the ability to create a group conversation, since her and her potential roommate are thinking about adding a third person to the room they're looking at.
10 / DAAPworks Display
A degree from DAAP culminates in participation in DAAPworks, a show celebrating and displaying the final projects of all DAAP majors. I created a poster setting the stage for my project, as well as a simple website displaying my video walkthroughs and a process book demonstrating my overall year-long progress on this capstone project. I also was on the team in charge of installing and taking down the show, which involved coordinating and managing the work of all 65 students in our major getting everything set up the weekend before the show, and returning everything to its original state in the days after.