Sherry Wang
AngelList Mockup Roomi.png

Roomi Redesign

Roomi Redesign

roomi web screens

Background & ObjectiveRoomi is a shared housing platform focused on creating a safer and easier way to find room rentals, sublets & roommates. Create a refreshed Roomi brand and full redesign of the Roomi app to be more engaging, trustworthy, and memorable.

Impact: Increased web sign ups by 150% one week after redesign launch, increased efficiency in listing approval rates, added a new design library, and received app store feature in 2018.

Time: 8 months

Skills: UX, UI

1. Evaluate

The Roomi Redesign was a huge effort spanning across product, engineering, marketing, and brand communications teams. After piece-meal adding features into the product without a larger design language in place, it was time to re-haul what was in place for a cleaner, more trustworthy and delightful user experience.

Most commonly visited pages in old design

To familiarize myself with the product and get a big picture, I did a design audit creating a site map of the website and inventory of existing design components.

design audit cards.png
design audit pop ups.png

I identified the following problems: 

  • Inconsistent branding: Competing visual language across illustrations, iconography, and stock photos in digital and print mediums

  • Visual clutter: Inconsistent design components, typography, and colors

  • Confusing flows: Excessive questions in certain flows lacking clear logic

The amount of inconsistency made the app feel untrustworthy and hard to digest

After conducting the design audit and collaborating with marketing and brand communications on what we wanted out of this redesign, it became clear our goal of this redesign was to: 

Create an enhanced user experience with a trustworthy yet still playful and relatable product brand.

2. Ideate

First, I worked closely with the marketing and brand teams to establish the new look and feel. We gathered inspiration from similar and different brands noting moods they evoked that we admired. We still wanted the new tone to feel young and hip andtried a few palettes with the subway characters our users loved and found a winner we could run with. 

Mood Boards

Mood Boards

I used this redesign as an opportunity to optimize the user flow for certain parts of the user experience. In collaboration with the Customer Experience manager, I decided to simplify the "Create Listing" wizard flow with less upfront friction that matched the user’s mental model more of questions about the Listing vs. the Roommate. This created a positive downstream effect and made the listing detail page more concise. We also consolidated the on-boarding flow to allow users to get into the app faster. For UI improvements, we looked across the app to see where we could reuse components to create consistency, and associate the repeated usage with user types (purple for movers, yellow for listers).

Possible views after getting into the app

Possible views after getting into the app

Badge logic: Listing vs. User distinction

Badge logic: Listing vs. User distinction

3. Prototype

To start exploring designs, we identified 6 “hero pages”,  the most commonly visited pages that would lay grounds for new design across the platform. We tackled the homepage last as it was easiest to explore once the more functional pages were in place. I also vouched that certain brand decisions (in product) not get in the way of functionality/ accessibility. For example, the primary eggplant purple worked nicely as a marketing color for illustrations but needed a brighter color pop for in app buttons.

4. Test and iterate

We tested the core experiences for both people looking for empty rooms and people looking to fill rooms on usertesting.com to gauge whether users could navigate and accomplish a series of given tasks. We also invited existing users of the platform to come in to share their thoughts on the new design. We learned that they were able to understand screens with functionality around messaging, but needed more visual clarity around statuses, explanation of key concepts including what applying to move in meant, and premium features like renter’s insurance.

5. Build a design system

After exploring different components, we organized these into a sketch library that was referenced throughout the project. A few pieces components are documented below:

design library.png

6. Expand the Roomi Redesign

In tandem with the web app redesign, we redesigned the iOS and Android apps, refreshed email templates, and a rent payment product to match the new style guide.

email templates.png
roomi pay.png

7. Ship!

We broke out the release according to how likely the pages would be used, focusing on first releasing homepage, how it works, profile and listing views, chat requests, and later getting to marketing pages accessed by the footer.

marketing pages.png

8. Impact and reflections

app of the day.png

This was both a fun and rewarding project, bringing to life through playful design a frustrating activity most have experienced - moving and finding people to live with.

Overall, we achieved:

  • 150% increase in web sign ups after 1 week of launch

  • Increased efficiency in listing approval rates

  • Cohesive design library and style guide across web and mobile platforms

  • Refreshed brand identity unified with marketing materials

  • App Store Feature in Sept 2018

With that said, it was a huge project requiring multiple releases and took longer than expected because the project overlapped with tech refactoring and business changes. In retrospect, we could have designed less up front, as there are always moving parts of long projects that have dependencies across other departments.