👋 Hey, I'm Mitch Butler.

I'm a product designer and developer from Halifax, currently based in Toronto.

In 2018, I founded Human Collective
In 2010, I co-founded Mappedin


December 5th 2019

Assisted Support Chatbot

This one is for everyone dealing with a large volume of holiday customer support over the holidays 🎁

A (concept) support bot that handles simple requests for customers, allowing support reps to monitor, take over, or update chat rules in real-time to keep customers happy.

View on Dribbble
December 4th 2019

Dark Mode Expert Chef App

There are plenty of recipe apps in the App Store, but we're missing something that caters (pun) to an audience of experts: chefs who aim to measure and improve their recipes. This is a concept aimed to address that.

View on Dribbble
December 2nd 2019

Reccomended Wines

Playing with wine elements and representations for a project.

View on Dribbble
January 12th 2019

View on Instagram

How I think about design specialization.

If you have a hard time understanding design roles, here’s a shortcut: design is a spectrum from conceptual to practical.

Research → Experience → Interface → Prototyping

Research is where you gain detail on your users and the challenges they face. A talented researcher will uncover insight and empathy by monitoring and interviewing users. They’ll build tools (e.g. user personas) that will ground your team in a deep understanding of the problems you’re solving.

Experience covers the pattern of interactions, feedback, and information that define the way a user will engage with your product. Experience designers produce wireframes and flow charts that choreograph a user’s journey from their first impression to their mastery of the product.

Interface designers create visual components and screens that influence the look and feel of your product. They work with color & contrast, visual hierarchy, and animation to create a blend of familiar interactions with a unique visual identity.

Prototyping provides the team with interactive mockups for testing and iteration. Prototypers work in code or using specialized tools to quickly create experiences resembling the end product closely enough to test with users in context and rapidly iterate.

Most designers working on product teams will have expertise somewhere along this spectrum. In most cases they’ll also have some skills in adjacent domains, for example many experience designers have skills in interface design or user research.

How is this useful?

This is a quick way to understand designers and design teams, their strengths, and any gaps that might exist. If you’re a small company looking to hire your first designer, then it helps to understand which set of skills you’re looking for and which candidate is the best fit. As you grow your team you can use it to balance complimentary skillsets. At Human Collective, when we’re helping a client decide where at start, we always recommend hiring from the inside out and maintaining a balance that matches their needs.

A word of caution: any useful model is a generalization, and is therefore destined to be wrong around the edges. That said, I’ve found this to be incredibly useful when explaining design roles to non-designers.

How I think about design specialization. was originally published in Human Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

June 26th 2017

View on Instagram
June 11th 2017

Montreal MURAL Festival

View on Instagram
May 15th 2017

View on Instagram
May 15th 2017

View on Instagram
May 8th 2017

Montreal Street Art

View on Instagram
hover to load
April 25th 2017

Expanding Search Results

View on Dribbble

Why Not?

If someone at work asks their manager “Why do we hold this weekly meeting?” or “Why does our product have this feature?” the response should never be “Why not?”

Why is it important? Maybe it’s mission-critical, maybe your competitors do it, or maybe it’s just “expected” in your industry. Processes are defined with good intentions but over time conditions change and when they do our instinct is to hold our ground.

To ask “Why not?” is to justify losing effort and gaining complexity just because there’s no good reason not to. Instead, we should ask ourselves “Why?” and remove those features, meetings, etc for which we don’t have a good answer. It ensures everything we do has a clear sense of purpose, and it creates space to do the things that our competitors don’t do and that aren’t “expected” in our industry.

April 24th 2017

Store Profile Cards

Playing with what a simple location profile might look like. Photos taken from official brand Instagram accounts.

View on Dribbble

What can we Learn from Brutalist Web Design?

As designers, sometimes we forget about our audience. We set out to build things that are trendy or technically interesting instead of powerful and meaningful. We can spend hours tweaking the aesthetic only to populate our work with meaningless placeholder content.

Brutalism has set out to challenge what’s trendy. It ignores conventional grids, opting instead for an ugly mess of layered content. It denies users of common patterns for navigation and leaves them on their own to discover how to access other pages (or not). We find these designs shocking and obscure because they challenge the part of our craft that we seem to identify most with: our trends and conventions.

Ironically, brutalist design has itself become a trend and it won’t be long before it can’t support its own satirical weight. Until then we should learn what we can from it.

Here’s what brutalism gets right:

  • We’ve become frivolous. Our communities tend to reward displays of style and technique above meaning and impact. We should focus on saying something even when it means a design that’s less technically impressive. Not every time, but sometimes.
  • Content should not be interchangeable. It should shape the form and flow of the page. Design the content first.
  • The simplest deviations from trends seem to be the most effective. For example: replacing complex layouts with a single column, or delicate font pairings with a single rugged font. These will still be around when brutalism is not.

Methods of Production

As the modern movement emerged in fields like industrial design and architecture a designer’s most important asset was their understanding of materials and production. There’s a sense of modesty in the designs of the 60s and 70s. A sense that designers were chipping away at the usual facade to uncover something about the things they were creating.

In UI design, the methods of production (programming) have become so flexible and abstract that exposing them seems less valuable. The fact that the work is so unconstrained has caused many designers to become less engaged in implementation leaving the choice of tools and methods purely up to developers. This has triggered some exciting growth and specialization as designers search for new frames of reference (e.g. User Experience Design). That said, the lack of continuity between design and implementation is going to hurt the field as we face the limitations of new technologies.

As we move into an era of natural language interfaces we’re regularly hitting the limits of what the technology can do. Just watch someone using Siri for the first time and you’ll see this. Yet designers aren’t exploring and exposing these limitations. They aren’t pulling back the facade to find value in the patterns and materials that form these products. Instead we’ve regressed back to decoration and novelty, and we seem to be designing and marketing tools like Siri as if its limitations don’t exist.

Once again we need designers to take an interest in the materials and methods they’re designing for. It’s is the only way we’re going to uncover the value of technically limited products like natural language or predictive interfaces.

hover to load
April 21st 2017

Hotter / Colder Search Experiment

View on Dribbble

What Leaders can Learn from the Conductor

A few weeks ago I saw the Berliner Philharmoniker. The show was so full that the only available seats were in a balcony behind the orchestra and facing the conductor.

Watching from this perspective it was clear how important the conductor is to the group. It’s rare to have such an intimate view of the art of coordinating people. It made me realize that there are a lot of parallels between conductors and managers:

  • The conductor’s purpose is not to make bad players sound good, it is to help great players achieve a level of balance and compatibility that would have been otherwise impossible.
  • The musicians aren’t looking at the conductor for what to do next. They know what part they have to play. Instead they look to the conductor for cues that help them adjust to the rest of the group.
  • The conductor is focused on the musicians, not the crowd. They accept and embrace the audience’s applause but they share it openly with the musicians and highlight those who played a key role when it’s relevant.
  • The conductor knows who to focus on and when. They can’t focus on everyone at once so they must trust each member to know what they’re doing.
hover to load
April 20th 2017

Animated Cluster

Experimenting with animation to reveal quantity in a cluster of similar items.

View on Dribbble

The Most Efficient Path

When a startup has plenty of funding, they take the shortest path to their vision. They get out ahead of the market to offer something new. What they build is disruptive. It’s different from what customers are asking for.

In contrast, bootstrapped startups need to sell their product right away. The resistance of customers to change has a greater impact on what they do. Many will take “the path of least resistance” by simply doing what the market asks them to until they inevitably reach their vision. The problem is that someone else will reach it first.

Companies that minimize resistance will never be responsible for a disruptive product (e.g. from horses to cars, or typewriters to PCs) because customers never ask for one. The value of a disruptive product isn’t immediately obvious, for example: Cars and PCs started off as toys for hobbyists.

The market doesn’t ask to be disrupted, but greatly rewards those who disrupt it.

In order to innovate, bootstrapped startups must recognize that customers require a nudge at times. That facing some friction with customers to bring them closer to the vision is healthy. The goal is to discover those areas where customers can be challenged and leading them through changes that quickly demonstrate the value of the vision. As customers grow to understand the vision they become just as eager to see it happen, and they place their trust in the company that revealed it to them.

By gaining the trust of customers through many small challenges, you break down resistance and find a more efficient path. By simply doing the things that customers ask for, you will never disrupt an industry. And if you race towards your vision without bringing customers with you, someone else will win their trust and loyalty first.

April 19th 2017

Map Suggestions

View on Dribbble

Customer Culture

Every early-stage startup knows the importance of company culture. There’s no shortage of books and advice on the subject. The attitudes and motivations of early employees are amplified as the company grows. Setting the right culture from the start is critical to scaling the team successfully.

Equally important (but less known) is that this also applies to customers. Naturally, as the first few are on-boarded, the team and the product will be affected by their attitudes and motivations. When aligned with your company, the right customers will accelerate everything you do. The wrong ones will set you back.

Startups should evaluate and seek early customers with the same care they apply to early employees. You want to find valuable allies that you can trust with your product.

hover to load
April 18th 2017

Beating Heart with Real Data

I've added a beating heart animation to my site with real heart rate data from my watch. It's the details that count.

View on Dribbble
April 18th 2017

Logo Design (App Icon)

View on Dribbble
April 18th 2017

Website for Mappedin

Latest web launch for Mappedin with help from The Tite Group and Open (Toronto).

View on Dribbble
April 6th 2017

View on Instagram
April 4th 2017

View on Instagram
April 3rd 2017

La Indita, nice lettering

View on Instagram
April 3rd 2017


View on Instagram
April 2nd 2017


View on Instagram
March 25th 2017

Deconstructed bug hanging from the ceiling of the new @_settlementco

View on Instagram
hover to load
February 24th 2017

Map Animation Teaser

Animated this in Cinema 4D, see the full video here: https://vimeo.com/169787951

View on Dribbble
February 24th 2017

Visibility Model

Visualizing what is in focus vs peripheral vision on a range of touchscreen kiosks for a 5th percentile female and a 95th percentile male.

View on Dribbble
hover to load
February 24th 2017

Grid Snapping Tiles

Working on a simple interaction for arranging tiled elements on a grid.

View on Dribbble
October 6th 2015

Device Specifications

Some device specs for our hardware manual at MappedIn.

View on Dribbble
August 30th 2015

Directions Icons

Custom built icons for displaying turn-by-turn directions.

View on Dribbble
August 25th 2015

Kiosk Render

This is a 3D mockup of one of the kiosks we run our applications on at MappedIn. I modelled and rendered it in Cinema 4D.

View on Dribbble
August 25th 2015

3D Map Render

This snap is of a custom mockup of a mall map I rendered at work. Cleaned up a CAD file using Illustrator and then rendered in Cinema 4D. Thoughts and feedback are welcome!

View on Dribbble