A Digital Product Design Process
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.
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).
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.
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.
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.
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.
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:
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.
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.
