OffCampus
UX/UI, Product Design
A sublet platform for student subletters and sublessors.
Overview
OffCampus is an online sublet platform for student housing—without explicit pricing. Sublessors list their remaining leases on OffCampus, without showing their market price. Subletters are able to filter out different spaces through specifications and their price range they are willing to spend. Though an auction system, subletters and sublessors are able to negotiate their right price.
OffCampus's concept was created by a 2020 startup.
CLIENT
ROLE
DURATION
SOFTWARE
OffCampus
Lead UX Designer
~One week
Adobe XD
PROBLEM
When students subletters are less likely to want to pay full asking-price for a sublet, sublessors lose out completely.
This process can be stressful for both ends. Many spaces are left vacant, and many students resort to other means.
DESIGN GOAL
Create a fair and easy sublet platform for both parties.
Subletting doesn’t have to be a win-lose or lose-lose situation. Designing equally for two user journeys, we created a platform sublessors easily to list a space, and for subletters to search for their desired space and to place bids.
Research
The research phase consisted of market analysis of direct and indirect competitors, as well gathering qualitative data from students based on their experiences with subletting platforms and student housing in general.
COMMON THEMES
Frustration + Stress
When students are asked to describe their experience with sublets or finding student housing in general, most
expressed negative emotions.
Lack of Central/Common platform
Many students used other platforms like Facebook groups, school-affiliated websites, or personal connections
to search for sublets, which can be inefficient.
Ideation
The ideation process consisted of creating a user journey, drawing out paper wireframes, then moving digital onto Adobe XD. With the low-fidelity wireframes of two user flows, a low-fi prototype was created.
.png)
The user journey is split into two: For finding a space and listing a space. Depending on what the user is looking to do, they will navigate through different user journeys. They are kept at similar lengths for brand consistency.
Design Notes
The paper wireframes allowed for quick ideation of the general design landing page and the two home screens, but I felt that it was a bit restrictive. With that, I moved onto creating digital wireframes on Adobe XD.
Design Notes
On Adobe XD, I created wireframes of the two user-flows. The main goal was to create and easy navigation with minimal steps. For simplicity and organizational purposes, I chose to design a central landing page for the user to choose how they will use OffCampus based on whether they are looking to find a place or to list a space. It was important to keep both user flows generally the same length to have similar user-experiences throughout the platform. Both "homepages" were designed to look similar for consistency, but had to have slightly different visuals so users did not confuse the two user-flows.
User Testing
PHASE 1 (LOW FIDELITY PROTOTYPE)
TESTING OBJECTIVES
-
Are users able to navigate the current user flows?
-
Is the length of the user journey optimal?
DETAILS
-
Three university students with varying housing experiences.
-
Moderated remote testing.
-
Questions for debrief after testing.
OUTCOMES
-
All three users were able to complete both user flows in under a minute (without guidance or urgency)
-
When asked their thoughts on the navigation, respondents described their experience as “easy, straight-forward, organized.”
-
From these findings, we can determine that the user flows are up to standard with our expectation, and we can move forward with the design of the UI with minimal changes to the information architecture.
PHASE 2 (HIGH FIDELITY PROTOTYPE)
TESTING OBJECTIVES
-
With new details and UI elements added, are users able to navigate the current user flows as they did before?
-
What are the users’ reactions to the overall look and feel of the design mockups?
DETAILS
-
Same participants from the previous usability study of the low-fidelity prototype
-
Moderated remote testing.
-
Questions for debrief after testing.
OUTCOMES
-
All three users were able to complete both user flows in under a minute (without guidance or urgency) as the previous testing.
-
One participant pointed out an interaction design paint point that made the flow a bit repetitive. Upon consideration, their pain point was addressed in the final design. (See below)
-
Participants appreciated the use of graphics, commenting how it fit in well with the overall UI design and were great enhancements to the typography.
-
Another participant wondered if displaying the specifics of the offers already placed by other users could deter a user from making an offer for various reasons. This was also addressed in the final design. (See below)
Design Iteration
UI DETAILS
COLOR PICKING STRATEGY
-
Taking previous accounts from initial user research of stress and frustration associated with student housing,
we wanted to be intentional with our colors using resources from color theory/psychology. The primary color we chose was a blue toned purple, which is associated with stimulating a feeling of calmness. For the purpose of simplicity and consistency in design, different shades of purple were chosen for different UI elements.
LANDING + HOMEPAGES
-
Because there are two user journeys a potential user can take when navigating through OffCampus, it was decided that a landing page where they would be able to choose what they’d like to do would be the most efficient to start and complete the user goals.
-
Once a choice is made, the user is taken to a homepage in alignment with their goals. If they wish to switch to the other flow’s homepage, they are able to do so via navigation bar at the top of the webpage.
-
For users who are unfamiliar OffCampus, each homepage
displays a description of how the process of searching for a place or listing a place works, due to the uniqueness of the service in comparison to other housing platforms.
-
For users who choose to list their space, when clicking that option on the landing page, they will not be taken to this homepage on the left. Rather, they would be taken immediately to the webpage to start the process to minimize repetitiveness. This homepage will only be accessible after completion, or anytime when clicking on the OffCampus logo during the listing process.
MAJOR FEATURE CHANGES
AUCTION DESIGN
When considering auction theory into our design, instead of showing the user the specifics of the price and duration of each offer already made, we decided to only display the number of offers made, and how long ago. That way, users are not influenced by other users decisions, and they can make their offers based on what they themselves see fit for the space. Users will be notified if a better offer has been made by another user, and then they can decide whether or not to modify their price or not.
Previous auction details.
Design notes
-
The variation of fonts in the buttons in these screenshots are due to Adobe XD's trial restrictions and are not deliberate.
-
A time marker that indicates when the last offer was made was included to give users an idea of how relevant a listing is to other users of the platform looking to find a space.
Updated auction details.
Results + Reflection
As there were challenges with the startup, I was not able to get measured results based on implementation of the actual product. If this were to be implemented, I expect the launch of OffCampus to be tested among several college-towns with universities that rely on off-campus housing for majority of their undergrad and grad students.
OffCampus was my first experience at webpage design after months of strictly mobile UX/UI design. I am excited to continue to see my progression in my designs as I gain more experience.