Image for post
Image for post

A Digital Product Design Process

Tristan L’Abbé
Jul 28, 2016 · 6 min read

I’ve been designing Missive, the one app for email and chat, for the past two years as the only designer in a team of four co-founders.

I got the chance to work on the logo, icons, desktop app, mobile app, website, and redesigned them all multiple times.

This week I’ll be leaving the team to focus on new projects but before I go I wanted to shed light on the practical side of my product design process and share some lessons I learned along the way.

The App

We started working on Missive in 2014. Back then, I was still using Photoshop (soon to be replaced by Sketch 3) and was mostly a web designer at the time, so designing an email app seemed like a cool new challenge.

Well, challenging it was.

Image for post
Image for post

Lesson #1: You can’t win it alone anymore.

If you’re used to lead UI/UX decisions with your design ideas like I was from my website design background, you’ll find out product design is a whole other story.

I realized that my three other co-founders were as much designers as I was. It’s just that I was the one translating our ideas into clean mockups.

Really good products come from the right homogenous mix of design and technology. There are tons of technical constraints and it’s your job to interpret them into clear guidelines to start on the right foot.

Skip this and you’ll navigate endlessly through multiple layers of decision making from basic layout to typography to aesthetic details, losing all your focus.

For Missive I helped establish a few basic guidelines with the team:

  • The app needs to fit both for web and OSX (in wrapper).
  • The layout needs to be the well-known 3 columns (mailboxes, emails, conversation) to facilitate the comprehension of the added UX complexity of chatting in email conversations.
  • Emails and comments should stay in a single chronological column.
  • It needs to be multi-accounts to be able manage both work and personal emails (played a big role in the UX decisions).
Image for post
Image for post

Through lots of prototyping we ended up choosing to mimick the familiar aesthetic of OS X by using the system font, rounded grey and blue chat bubbles, and a very minimal UI.

The Logo

Like many other digital designers, I don’t have a classic graphic design education so the branding process as a whole is not my speciality. I did explore it on past projects and I kept reading regularly on the subject, but I knew it would be my biggest challenge.

We were very confident with the name “Missive” which means “an important message” hinting at the professional nature of the app, and with the added bonus of being a true French cognate (same in english and french). A perfect match for the grand mission of four french-canadians.

Image for post
Image for post

Lesson #2: Balancing instinct and strategy will help you in the long run.

The younger me was used to rely on gut-feeling as many junior designers are. But for a bigger project like Missive, strategy helped me a lot. I established brand values, listed required assets from logomark to app icons to social media banners, and researched competition (some of which are now dead or acquired).

Strategy eliminates a lot of the early shitty ideas and helps you cruise through the inspiration-seeking phase much more smoothly.

Eventually, I came up with a logo built from two speech bubble tips referencing both the email and chat components of the app coming together.

Image for post
Image for post

I kept an on-trend monolinear aesthetic and set the logotype in ARS Maquette Pro’s unicase alternates which although being also a bit trendy, reinforced a feeling of reliable modernity.

Image for post
Image for post

The Icons

The app UI was coming together, but using free iconsets didn’t feel right for a professional email app like Missive.

Don’t get me wrong, some icon sets are very nice, but it’s a bit like trying to fit flip flops with a suit, you’ll never really hit the mark.

I loved the dual-toned OS X icons and set on building a similar but custom icon set for our own use. I wanted to reference the logo’s stencil-like utility by removing line intersections which also created a feeling of depth.

Image for post
Image for post
Image for post
Image for post

Lesson #3: Making your own icons is not so hard, and well worth the effort.

Creating the icons was probably the most valuable time spent designing Missive. It completely upgraded the app’s look and feel.

Don’t be scared by the seemingly time-consuming process.

The Website

This was finally familiar territory.

I wanted to design a system that would be flexible enough to last throughout the years both to sell the product efficiently and support a flow of new content.

But as always, the homepage was the crux of it all:

Image for post
Image for post

Lesson #4: For a good product homepage, copywriting and marketing knowledge is much more important than slick design execution.

Through tons of reading about marketing, copywriting and shared Google Docs, we finally came up with good content that was selling benefits rather than listing features.

Design-wise, I decided to stick with an all-white background and spacious layout to evoke both the utility of email and the effectiveness of our product.

Image for post
Image for post

For the blog I used the palette of brand colors as backgrounds for the restrained and monochrome illustration of each post. This streamlines the article creation process, ensures unity, and stands out when shared on social media.

Moving on

When we started working on Missive, OS X Yosemite’s background-blur didn’t exist and rounded avatars were just starting to be a trend.

It’s been a long journey and an awesome learning experience. From the app design to the branding to the icons and website.

It was a huge challenge that I couldn’t have achieved without my very smart teammates and I can’t wait to see what they’ll be able to come up with in the next few months.

Until then, make sure you give Missive a try and find out just how much your team’s work management can improve with a single powerful app.

Let’s keep in touch!

You can follow me on Twitter, Instagram and Dribbble.

Missive App

The one app for team email and chat

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store