Home        Work       About


ButterflyMX Intercom UI Redesign

Role – Lead Designer
Project — UX/UI Design
Date —   2023-2024

A crucial step in ButterflyMX's ongoing metamorphosis


As the flagship product of the company, the ButterflyMX Intercom is used by thousands of people everyday. Each screen must be carefully designed to be as intuitive and efficient as possible – while also looking great. 
In this project, I was tasked with giving the Intercom's UI a new coat of paint – one that brought the entire experience inline with the company's new branding and direction and created harmony with all of ButterflyMX's products and services.

Goals


  1. Update visual language to match new hardware design and company branding
  2. Improve UX and simplify interaction patterns where possible
  3. Improve responsiveness and support for multiple screen sizes

Striking a Balance


As the new version of the software was going to run on both our new and existing intercoms, it was crucial for the design to be cohesive and modern, while also being fully backwards-compatible.

While we wanted to give the whole experience a modern facelift and improve the usability, we also didn't want to diverge too much from the existing patterns and leave our daily users feeling confused and lost.

Process


First we started with inspiration. We wanted to look at all of our existing and new products as a family and see how to push that direction forward. We also wanted to look at what else was out there and pull inspiration from both new and classic technologies and design elements.

The ButterflyMX OS and Mobile app both had received recent redesigns/refreshes, so that was one of the main points of reference for design elements and overall consistency. 

We experimented with several different approaches to the design, as well as many options for new and updated features and functionality.


Final Results 


1. New modern visual design to match new product hardware, industrial design language, and company branding
2. Improved responsiveness for multiple screen sizes and formats
4. Reduction in code complexity (# of unique components)
5. Design system


Iterations and Updates



More work for ButterflyMX