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.
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.
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:
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.
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).
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 adapted certain brand decisions for the product to not get in the way of functionality. For example, the primary eggplant purple worked nicely as a marketing color for illustrations but needed a brighter color pop for in app buttons.
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.
After exploring different components, we organized these into a sketch library that was referenced throughout the project. A few pieces components are documented below:
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.
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.
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.