Vivus
PROJECT BACKGROUND
MY ROLE
Product Design (UX/UI)
UX Researcher
DURATION
March - June 2022
TOOLS
Figma
Miro
draw.io
BUILDING USER EMPATHY
PERSONA DEVELOPMENT
Completing our user interviews provided us with a direction towards who our intended users are and how they might interact with our app. We then created two personas to represent two example use case scenarios that our app addresses.
Meet Sarah and Ethan, who are both students at the University of Washington. Sarah, an upperclassman, desires comfortable living with good amenities, with less focus on housing price. Ethan is a freshman who seeks roommates that can help make housing more financially manageable.
USER JOURNEY MAP
Based on one of our personas (Ethan), we crafted a user journey map that laid out the intensity of two emotions, ‘frustration’ and ‘ease’ that a user could encounter while searching for housing. We mapped out this scenario on a graph, capturing “touchpoints” and identifying accompanying feelings they might have.
We wanted to focus on the context behind the persona, and understand how their interactions with housing search would impact their emotions. By keeping in touch with their emotions, it allows us to make improvements on any interactions our users’ face and foster a more positive experience with our app.
DEFINING + IDEATING OUR SOLUTION
We began this phase by revisiting our problem statement and creating a summarized specification for our app. This manifested in the form of a list of design requirements and design goals, each one derived from our previous user research findings and competitive analysis.
REQUIREMENTS
Add filters for price, location, # of beds, housing type, amenities, furnished, etc.
Tenants must sign in with their UW NetID
Search for compatible roommates whose desires align with one’s own
Consolidate all housing options onto one platform
Tenants can view a detailed diverse set of reviews for each location
Provide a navigable map interface
GOALS
Beginner-friendly interface that can view many properties very quickly
A system that attempts to match users with compatible roommates
Provide a centralized platform for looking for both housing and roommates
Tenants have privacy during their search on the app
Create filters that are relevant for specifically college students
STORYBOARDS
After understanding our design requirements on the app, we formed storyboards of sample scenarios that our users would find themselves in. We sketched these scenarios in visual form on paper and added text that explained what each frame meant. Having a drawn-out, visualized version of the app’s uses also informed us on how to design our prototyping stage that would follow.
Scenario 1: User found several options that fit their needs, but need to make specific comparisons between them to make a final decision.
Scenario 2: User found housing using the Vivus app, and is successfully able to contact the landlord to tour an apartment and seal a lease.
Scenario 3: User expresses interest in living with a roommate, and utilizes Vivus to successfully find and connect with a compatible roommate.
Scenario 4: User explores Vivus to make broad comparisons between housing options, resulting in a robust list that they can use for future reference.
INFORMATION ARCHITECTURE
To begin the game, the player spawns in an empty museum, and are tasked to explore the Central District and collect artifacts. Players can then enter the 8 locations, learn about its corresponding musician, then search for their iconic artifact. The scavenger hunt is complete when the player returns all 8 artifacts to the central museum.
PROTOTYPING OUR DESIGN
ANNOTATED WIREFRAMES
We began our prototyping phase by refining our ideas and flows into stable Figma lo-fi wireframes. During this process we formed basic visualizations of our end product, demonstrating the required functionality that would be in our final mockup. The four slides below include annotations of: a map interface, roommate finder, an editable profile page, and a roommate group page.
LO-FI USABILITY TESTING
Once we had a fully functional prototype we could bring the design process back to the user and engage in usability testing. During this part of the process we developed an interview protocol which allowed us to all individually test four different potential users in a standardized manner. Some of the key findings were:
INTERACTIVITY
Our map interface was highlighted as being familiar to navigate when participants recalled similar apps (i.e. Google Maps). Along with familiarity, participants highlighted navigability as a strength to our map interface.
ICON LANGUAGE
We found that participants encountered obstacles when they weren't certain about a particular icons meaning. It was noted that our icon language was vague and difficult to understand.
FILTERING PREFERENCES
When it came to filtering options for housing, participants noted that the app lacked filtering options (i.e. distance from public transit) that they would've desired during housing search.
In our next prototype, we addressed the icon language by choosing more relevant icons in our app's navigation bar. For instance, we made the icons associated with the 'Group' page and 'Roommate Search' page more distinguishable. We also improved upon the searching functionality of our app, adding options to filter for certain parking and laundry options during housing search.
DESIGN SYSTEM
HIGH FIDELITY PROTOTYPE
The feedback from our lo-fi usability testing and the design system we created helped our team start constructing the high-fidelity prototypes of our app. In this final step of the process, we added more depth and functionality to our system and addressed any weaknesses that were mentioned during user testing. Click the button below to explore Vivus!
INTERACT WITH PROTOYPE
PROJECT REFLECTION
With the culmination of the ten week's worth of work falling into place, I am truly happy with the final product. This particular user-centered design course gave me my first hands-on experience with Figma, so it was definitely a learning curve being introduced to component sets, variants, and animation. Additionally, this was my first time conducting user research, though luckily our instructors were very reliable and supportive throughout the entire process.
One of our biggest challenges was trying to narrow down our scope to a realistic estimate of an app that could be prototyped in under a few weeks, while also maintaining the core features of our system. There were definitely moments where we felt too ambitious and had to simplify a certain step in our feature set. As a whole, our team worked well together and did our fair share when communicating and balancing the workload amongst ourselves.