An interview with Martin Ollivere, co-founder of Archetype

In this episode of our Spilling Tea Series, we talk to Martin Ollievere, an experienced product designer who works on product UX/UI and brand design, and spends all of his free time tinkering away on a slew of creative side projects. He is also Co-founder of the typographical design system, Archetype.

. . .

Hey Martin, thanks for joining me for this remote chat. Let’s start by telling the Marvel community about yourself, how did you get into design and how did you get to where you are today?

Martin: Thanks for having me. I’ve always been into drawing and designing things and knew I wanted to be a designer even as a kid.

After studying industrial design at university, I got my first break designing Happy Meal toys. After that auspicious start, I worked on everything from medical equipment to aircraft interiors before focusing more on digital products back when Flash websites were still a thing. I was primarily attracted by the ability I had to create my own things, something that was harder with physical products.

Nobody in digital back then called themselves a ‘product’ designer, and I found the graphic design skills like typography and grid layouts really challenging. I cut my digital teeth at a London agency working with clients such as PayPal, Bentley Motors and Sky. During this time a friend and I developed our own storybook app, which led me into a very interesting role with a SaaS start-up creating market research tools for app developers.

This was a transformative experience for me, and ever since I’ve been consulting on branding and design for other start-ups. I’ve got stuck-in with all manner of companies from a games analytics platform in Helsinki to a med-tech firm in Silicon Valley.

All the while, I’ve been tinkering away on a slew of creative side projects and collaborations. One of the most popular of these so far is Archetype, a tool which a friend and I built to help overcome some of those challenges in creating typography design systems that have irked me all these years.

You’ve worked with and for some big companies, how would you compare the design industry from what it was then to what you know now?

It’s come a long way from the days of companies just wanting a glorified online brochure...

There’s been a general morphing of previously siloed roles into what is now generally called ‘product design’. This is funny coming from a product design background because it was always that way to me but now many more designers work on the entire experience of the user as they interact with a product or service which has resulted in much better designs. Because so many familiar patterns and best practices have evolved, there are far fewer terrible experiences than there used to be. Back when digital work was called ‘new’ media it was like a mish-mash of pre-existing disciplines each doing their own bit and ‘designers’ were mostly just working on visuals. There were a lot of chancers doing UX that just didn’t think like designers, having had no real problem-solving experience.

The rise of the app and software-as-a-service businesses has meant design and high-quality user experiences have become ever more critical to keeping users happy. Good designers with an understanding of all the factors that make products successful, rather than just being really good at graphic design, say, are more highly valued.

Archetype export to Sketch without any coding

Design tools have changed dramatically too, and we now have things which are actually built for the job of creating and testing whole user experiences. The emerging ‘no-code’ and ‘low-code’ tools (MakerPad is a good source of these) are also very exciting because it means the barrier to designing and actually creating full-blown web apps is getting lower all the time. How much front end dev knowledge you should have as a designer has always been a bit of a dilemma and I think this is another area where changes could be afoot.

“The emerging ‘no-code’ and ‘low-code’ tools are also very exciting because it means the barrier to designing and actually creating full-blown web apps is getting lower all the time.”

That is really interesting, and technology has definitely come much further in certain areas of the industry. With all of these changes, how would you usually approach a project? What does your design flow look like?

I’ve learned the hard way that it’s best to keep things lean and simple whilst eliminating meaningless fluff in all its forms. It varies based on the situation and brief but In the early design phase at least I’ll generally go through these steps:

• Talk to people to really understand the problem space and the goals of both the stakeholders and target audience.
• Gather inspiration by creating a mood board in Pinterest to get my creative juices going.
• Brainstorm potential solutions via mind maps and hand drawn concept sketches (it really excites people to see these sketches and it’s still the quickest way to work through ideas - surprised more designers don’t do this)
• Start testing ideas with users via sketches or very basic wireframes to see what works. Refine based on feedback.
• Work up UI concepts in Sketch, turning into a clickable prototype to test and refine the user experience if appropriate.
• Organise design system assets inside Sketch file ready for future iterations and prepare the file for developers to access via Zeplin.

The most tricky part of creating a design system for me has always been typography. I would find myself applying specific font sizes or spacing patterns in one-page layout or product UI only to find they just wouldn’t work visually on a subsequent layout. I really struggled to find a suitable sizing scale and spacing rules that would work for any future combination of design system components and wasted many hours nudging things a few pixels to and fro.

“The most tricky part of creating a design system for me has always been typography. I would find myself applying specific font sizes or spacing in one page layout or product UI only to find they just wouldn’t work visually on a subsequent layout.”

This headache led me and a friend of mine (Jamie Gilman) to start building a tool that could help create a typography design based on sizing and spacing best practices with just a few clicks instead of hours of pixel pushing. We also found that by exporting as CSS once I had played around getting everything the way I needed it in the browser meant Jamie saved several hours of coding up CSS styling from scratch using a Sketch file as a reference. I could also export to Sketch for use in future template designs as part of the design system. It was a rare win-win!

Archetype Sketch plugin

Sounds like you have a great partnership with your friend, Jamie! Did you have any teething problems when you first started working with your friend, and what advice would you give to other designers who may have never worked with developers before?

When I started out I was clueless about development and had very little understanding of how the developers worked (front end or back end). I recall many frustrating debates about why something couldn’t be done or how something should work. Whilst it’s good to look at a problem from a different viewpoint, having an understanding of how things work means these days any debates like that are much more constructive.

It’s essential for any designer to have at least a basic understanding of how things work and how they are built. I personally have a very genuine interest in development and have dabbled myself to a hobbyist level, which is one of the best ways to learn. I also ask the developers I work with lots of ‘stupid’ questions too, which you should never be afraid of doing. I ask them to explain things as they would to a golden retriever because I am rather slow on the uptake and they tend to forget how confusing it can be to a layperson.

My friend is building a tool to teach coding in schools where for the first time I understood what algorithm really meant. His tool is called Rodocodo. Swift Playgrounds is also an excellent app that I really enjoyed which also explains the core concepts in a really understandable way. As well as these core programming concepts, a grasp of HTML, CSS and how Javascript is used should be the fundamentals.

For many designers, this could be the first time that they’ve heard of typography having its own design system, despite it being one of the most important elements on a website. Where do you see typography in the future of design systems?

As I touched on earlier one of the biggest struggles I had when we originally dreamt up Archetype was trying to get a single typography design/scale to look good in different situations: On a high-impact landing page (with a need for big messages), a complex SaaS product UI (where much of the typography was labels for UI components or data visualisations) and long form article pages (designed for easy reading). Specifying spacing between elements that worked in all three cases was a fool’s errand.

Perhaps somewhat late to the party I recently stumbled upon the notion of creating different typography styling tailored specifically for each of these core applications: marketing site, blog site or product site (Designer Elliot Dahl wrote a nice article about typography design for an 8 point grid system that describes this concept well). This is something I think will happen a lot more in future and it’s certainly something I plan to bring into design systems I work on where relevant.

A tool that could help preview and tweak a typography design in some common marketing, blog and product UI components at the same time before any final templates have been created would be a massive help here. If Jamie and I generate some income from the first release of Archetype then those are some of the features we’re going to add as we will be able to dedicate more time to development.

The rise of variable fonts will also be interesting since one benefit will be the ability to create a bit of individuality amongst those oft-used fonts that have proliferated since the introduction of services like Google Fonts (good old Montserrat...).

Where do you go, online, or offline to find inspiration?

I’m very spurred on by stories of other people’s creative side projects and start-ups. Indie Hackers and Product Hunt are great sources of these. Podcasts ‘How I Built This’ and ‘Danny in the Valley’ are also very good in this regard.

‘Your Undivided Attention’ is another great podcast by the Centre for Humane Technology. This is an area of design I feel increasingly strongly about the older and wiser(ish) I get.

I really admire the way writers like Malcolm Gladwell and Michael Lewis are able to tell a really compelling story and I plough through a lot of their stuff, be it in book or podcast form (‘Revisionist History’ and ‘Against the Rules’ are very interesting).

I do love browsing on Dribbble and Behance, although some of the dazzling design work on there does occasionally stir feelings of desperate inadequacy. Someone told me to try comparing my latest work against my previous work to see where to improve rather than against other people’s which was good advice.

“Try to compare your latest work against your previous work to see where to improve rather than against other people’s.”

I have always loved drawing and illustration and continue to potter away on both of these pursuits. Procreate for the iPad is one of my best ever purchases, I couldn’t be without it now.

I also check Colossal every couple of weeks or so as there are always some really creative art and design projects on there that give me some ideas.

Without a hint of insincerity, I can also say that my wife inspires me a lot. She is always so serene and calm which I am often not.... Just being around her means a bit of her zen-like peacefulness rubs off. Running ideas past her logical accountant’s brain always helps clarify things in my head too.

What’s the best advice you’ve been given?

Two spring to mind:

Don’t be afraid to ask ‘silly’ questions - People often say this but in practice, few people do it because they’re worried about looking stupid or uninformed. I used to go away and google terms I didn’t understand in meetings. Nowadays, I just ask questions all the time and love it, I’ve learned loads. I’m so glad it’s something I was encouraged to do because it’s amazing how many people don’t.

“Don’t be afraid to ask ‘silly’ questions.”

Don’t waste time on a design until you know it is valuable enough to pursue - This was a real tough nut to crack for a perfectionist but after working with a colleague who was a big believer in the lean approach, I’ve finally started to get it.

“Don’t waste time on a design until you know it is valuable enough to pursue”

Do you have any good references for anyone who wants to learn more about this topic?

Designer Elliot Dahl has written a couple of great articles about typography and how it applies to the 3 different site types (marketing, blog and product), well worth a read:

• Exploring responsive type scales
• 8 Point grid typography on the web

Nathan Curtis of EightShapes wrote this nice article about the treatment of typography in design systems which is worth a read.

You can also check out Archetype to help kickstart the creation of your typography design system and export for development or design with minimal effort

If you care to see a few more projects I’m on Behance and Dribbble and Jamie and I have also created a little online compendium of the various things we’ve built together over the years.