Product: Chart builder (Business users)

Product: Notebook (Data analysts)

How it started

Mode shifted market segmentafter the launch of a freemium version of the product in 2018. brand refresh was required to keep up with the new launches.

Website is the first entrance of new customers, over 85% of the website visitors were new users.
Reaching broader audience with fewer coding experiences such as business users who don't write SQL daily.

Design process timeline

We had aggressive timeline along with brand refresh as well as the website redesign,

Objectives

Project objectives

Increase the effectiveness of our marketing website

Increase the flow of conversions to sign-up

Increase views, engagement, and time on the website

Design objectives

Holistic design approach with UX research

Layout with clear CTA and visual prominences

Visual story telling, motion and UI design elements

Challenges

Power users vs.
New users

How might we balance different users' needs in stylistic components using the design principles?

Stakeholders vs. users

How do we want to position our brand in the market?

How do we know if that's what our customers want to see?

User persona

85% new users, 90% desktop users

Power users
(Data analysts)

"I write SQL, Python and R daily and I get a ton of requests.

One dashboard only answers to one problem, and it is painfully time consuming."

New users
(Business users)

"I only know very basic SQL, but I have many business related questions, and often follow up questions.

it is important to be able to answer ad-hoc questions on my own, without having to wait."

Design approach

"How do we want our users to describe us?" from Internal stakeholders

" Mode is --- "

Fast

Powerful

Limitless

Internal survey results on
product design principles:

" Mode is --- "

Flexible 90%

Warm 71%

Egalitarian 64%

Old website

Heavily relying on screenshots of the product was not attractive look to non-technical users who doesn't write SQL.
It is important to differentiate ourselves from the competitors. Purple is our direct competitor's primary color, so we want to move away from.
Some of visual elements such as tags looked like a button, and the color blocks with images and bulk of texts caused the content messages to be overlooked.

Design approach

Dark:
Bold, powerful, limitless, speed, decisive, analytical

Light:
Supportive, egalitarian, fresh, familiar, positive

Iteration with validation through metrics

As we launched Helix, the new data engine of Mode, we used the dark theme in order to experiment and measure the reaction.The result of Helix dark theme branding out performed our expectation.