Havenly

Restructured messaging platform for customers and interior designers, contributing to a 64% growth in converting users YoY. Laid framework for widely-used design system, used to inform the rest of the product refresh.

8 min read

The Client

Distributed ECommerce, Home Decor

"We are dedicated to making a beautiful home accessible to everyone, regardless of budget and ability," is how Havenly CEO and co-founder Lee Mayer aptly describes the mission.

With the average cost of interior design work being around $6,000 – Havenly aims to change the market by providing advice and design mockups from $19 to $169 depending on scale. Its customer base, primarily young professional women in urban areas, multiplied over 14 times during 2016-17 and 50% of those users have become returning business. CNBC designated Havenly one of its top 100 promising startups to watch.

Havenly
Havenly on Crunchbase
Feeling Stuck with Your Space? Talking to a Pro Is More Affordable Than You Think (Apartment Therapy)
This Luxe Living Room Proves the Power of Neutrals (Havenly's Head of Design Architectural Digest)

The Challenge

Havenly had a free, scaled-down version of their product experience in the form of a "quick chat" with an interior designer – and a hunch (supported by data and patterns of user behavior) indicated that the conversation through messaging could drive increased revenue if it was prominently part of the core experience.

Making messaging more central to all three product levels was a gradual decision as we worked on chat look and feel across an iOS app, desktop review of recommendations, as well as optimizing for delightful small-screen chatting with an interior designer.

My Role

2018
UX & UI Designer, Product Design

Messaging Interface for Core Interaction with Interior Designer

I was recommended through word-of-mouth from my time at Artifact Uprising. At Havenly, I began with changes for messaging to behave more smoothly with deliverable rating from 0-4 stars on desktop, then became part of the larger team's shift in making the consultation experience an improvement for all pricing tiers.

For experience and visual product design, I collaborated with UI/UX Designer Holly Radesca.

We were supported by Brand Designers Thomas Lloyd and Val Salazar in typography, illustration and palette work, to name just a few of their contributions.

Direction on product, visual changes, and my work came directly from CEO Lee Mayer. Plus we had organization, day to day management, and intricate product thinking from Katherine Kornas (SVP, Product), Christine Hettinger (Product Manager), and Rachel Bell (Senior Product Manager).

My Work

Restructured messaging platform for customers and interior designers, contributing to a 64% growth in converting users year over year (YoY).

Created high-fidelity mobile prototypes, translated them into desktop form, and defined specs for front-end development.

Laid framework for widely-used design system, used to inform the rest of the product redesign.

"Before" Snapshots

The existing "quick chat" with an interior designer had some navigational & layout issues, onboarding was driven by rigid questions from a bot, and it wasn't well-integrated into the main experience of receiving an interior design deliverable. The color palette was difficult to leverage and potentially outdated, while parts of the styling didn't match the rest of the Havenly brand experience.

However, 10-12% of users here were upgrading to a paid design – and the average order value (AOV) from this side of the system was much higher than expected. Armed with these insights, we began to turn a lightweight, free, side experience into a much-improved update to the core, adding a low-cost-of-entry point with higher-quality, better-defined deliverables. And now (as of 2019) the cost to the user can be applied to a design package upgrade or merchandise, unifying marketing strategy with user benefit and upselling.

Looking at these "before" screenshots, we note that there aren't any time or date stamps appearing. It's hard to discern what's a system or bot message, and exactly when the consultation experience with a person (your interior designer) will begin.

Mobile experience, above, which doesn't look like desktop version

Desktop experience, above

Trying to communicate feedback to your interior designer within the core product was also clunky, was not a chat experience

Discussing Options, Decision-Making Process

While we were moving along the path of consolidating messaging, we had to make decisions about how the technology would ideally respond to a user. We debated how personal to make the service (of receiving quick design advice), how fast interior designers would be required to respond (in hours or days), and a level of flexibility including the use of SMS as a possible medium. Flexibility could also mean changing direction on what design aspect (lamps, paint colors) needed to be addressed next, fluidly, as part of conversing with an interior designer.

The work resulted in many user maps, spreadsheets for Operations' possible hiring strategies, and requirements work diligently laid out by the Product team. Displayed below is a simple example of changes discussed for service structure that Havenly leadership had us consider early-on from business, user, product, tech capacity and development cycle perspectives. In order to make and communicate decisions, we gathered as a larger group weekly or bi-weekly as needed, reviewing in-progress screen design work, business data, and overarching product vision presentations.

We also relied on flow charts and copy writing documentation to describe the various stages of interaction a customer would go through. One "moment" that I worked quite a bit on was notifying a customer that their design consult was about to begin, shown below as SMS message design paired with copy writing and requirements documentation – we'd work through dozens of these sections, from onboarding through deliverable display and upgrade options.

Visual Redesign & Collaboration

Easily one of the most challenging yet rewarding aspects of this project was working through visual design changes while having other areas of design thinking engaged with a variety of possible functional or interactive changes to the service.

As shades of rose, tan, and gray were being modified for a lively, new-and-improved onboarding flow led by Holly – new fonts were being vetted to pull brand style, copy tone updates, standard body text, and messaging all together. The results made for gorgeous updates to Havenly's overall look and feel.

Two areas of my work that overlapped with the visual discussion were the redesign of the Havenly bot and updates to a shared symbol library. The library in Sketch would allow for faster style experiments and screen creation, necessary because we wanted to be able to look at global tweaks quickly. By being a library it also meant we could test out an evolving design system. For the bot, the value we saw was in a more personal-feeling representation of Havenly's approach that could be used within messaging for system notifications or updates.

Initially the draft illustration for the Havenly bot avatar looked a bit worm-like in shape (left side) – but only at the small sizes required by the messaging interface. Our avatar was missing definition in the jaw. Face and neck contrast was lacking, again only for small sizes. Thomas took all my feedback, and others' direction, and provided great options, both simple and more complex to use in the larger discussion of the visual update.

To make "her" feel more relatable to our audience, the long haired character with revised dimensions was chosen (furthest right). To further increase parsing in the final designs, I added a light gray background that matched the rest of the new color palette for messaging, and enlarged her glasses to add definition.

Shared Library Setup

Below the new Havenly avatar makes an appearance demonstrating both her final legibility at small sizes and showing my symbols library that enabled faster testing of visual design changes.

Options in these symbols could be turned on and off, copies could be tested with font settings altered, we used it to check color or drop shadow across files and artboards. It became a shared design system "source of truth" for visual design improvements, as it kept pace with evolving creative design and branding work.

Symbols library in Sketch – nested allowing for dynamically updateable data

Detailing Design Work for Development

Using both Zeplin and Inspect Mode on InVision, as well as a shared RGB & Hex value color guide (also part of the design system framework), the developers and I had discussions about standardizing the values that go into building new page design elements and layouts.

Development specs for desktop messaging, on Zeplin

Shared styles for iOS and mobile width, via InVision inspect mode

Some decisions however could be made along the way to make for clearer guidelines – for example, we decided based on iOS iMessage that timestamps should show every two hours. It was simple and easy to remember when executing new messaging. Every day would also have at least one timestamp. I documented these decisions on Zeplin and Jira as something to test.

Mobile-first Design Approach

An iPhone SE was our common denominator – making sure that our layout and sizing would work for the smallest screen dimensions of our average users, which we determined via usage stats on Google analytics. Credit goes to Bill Sherby, Head of Analytics, for giving plenty of data in response to my colleague's and my questions about core flow sizing.

Requirements for the feel of this improved service were that it should be a fast, delightful, quick chat where the user could collaborate over the course of the day with the designer. This meant making it work for mobile, first.

Final Redesign of Havenly Consult & Messaging on Mobile

The use of white and light gray to frame messaging allows the substance of the valuable interior design "moments of delight" to come forward. User-added images and links shine, becoming a clear part of the consultation leading to visually-impactful recommendations.

Havenly's bot makes a redesigned appearance in terms of its display – as a user you know it's a bot giving you information about something, not an experience blocking you from chatting with a human – and this makes its presence more intelligent than the original insistent and cold onboarding experience.

This is a more functional design as well. Supported by the team's meetings & discussions, I prepared for comment-threading, clean reusable banner calls-to-action, a design deliverable or concept display that would include feedback, organized top-level navigation, minimum sensible button sizes, and adaptive accomodations for the keyboard footprint.

More: 

© 2020 Jennifer Gunther
All visuals are protected under the Digital Millennium Copyright Act.

Built using Webflow and some custom CSS.