ButterflyMX Intercom Panel

From XXXX XXX to XXXX:
Designing a XXX That XXXX Financial Well-Being by 91%

Complete.so is an agile compensation planning platform designed to replace error-prone spreadsheets with real-time, intelligent tools: empowering HR teams and companies to transparently model, manage, and communicate compensation for every employee, role, and scenario. As a product designer, I led the reimagining of the HR compensation workflow, making it educational, customizable, and scalable for fast-growing organizations.

Project Impact:

Reduced manual errors and time spent on comp cycles by eliminating spreadsheets, enabled managers and HR to visualize, adjust, and communicate comp packages and bands in real-time, Boosted candidate close rates and employee retention by making compensation clear, fair, and compelling

Role

Sr. Product Designer

Duration

12 months

Team (Besides Me)

2 PM, 4 Eng, 10+ Money Coaches

Project Overview

Entry panels in multi-tenant buildings were once cold, impersonal, and stuck in the analog age. Most systems consisted of simple audio intercoms or keypads; residents and visitors alike faced confusing interfaces, sterile experiences, and a lack of branded presence. The challenge: create a digital front door that feels inviting and secure, builds brand trust, and introduces digital connectivity without sacrificing simplicity.

For this case study, I asked:
How might we turn the moment of arrival at a building into a warm, intuitive, and memorable interaction, while encouraging users to engage with the ButterflyMX ecosystem?

Project Overview

Entry panels in multi-tenant buildings were once cold, impersonal, and stuck in the analog age. Most systems consisted of simple audio intercoms or keypads; residents and visitors alike faced confusing interfaces, sterile experiences, and a lack of branded presence. The challenge: create a digital front door that feels inviting and secure, builds brand trust, and introduces digital connectivity without sacrificing simplicity.

For this case study, I asked:
How might we turn the moment of arrival at a building into a warm, intuitive, and memorable interaction, while encouraging users to engage with the ButterflyMX ecosystem?

Test Test

Test Test

Test Test

Discovery & Research

Looking at the landscape of building entry technology, it was clear most competitors lacked personalization and emotional warmth. I analyzed market leaders; most presented bland, overly technical home screens unsuited for a residential or commercial audience seeking a sense of belonging.


We also considered the psychological impact of the “first impression.” When residents or visitors approach a building, the entry panel is often their first touchpoint... an opportunity to build trust.

User insights

- People wanted reassurance and clear guidance at the door.
- Seeing themselves on the screen fostered trust (“who’s watching me?” becomes “I’m clearly in control here”).
- Families and professionals alike valued a sense of welcome and polished modernity.

Early inspiration for hardware

Early inspiration for software

Ideation

  • Early explorations included static branded panels and simple animation loops.

  • Feedback suggested these were too stiff or idle, missing the mark on delight and engagement. Shifting the focus, I explored an animated screensaver that could “wake up” as the user approached, clearly inviting them to interact, without startling or confusing anyone unfamiliar with digital kiosks.

  • We tested text such as “Tap to Start” alongside subtle animations that gently pulsed or flowed, with a QR code discreetly positioned for tech-savvy users.

Design

  • Rooted in the sleek physical design of the new ButterflyMX hardware, the screensaver echoed the device’s curves and high-quality materials.Color palette: Modern and neutral, with soft accents that matched device finishes and expanded on existing ButterflyMX branding.

  • Clean, sans-serif, easy to read at a distance and in all lighting conditions. Animations were lightweight and playful—gentle transitions, floating shapes, and a sense of “breath.”

  • Self camera: By enabling users to see themselves as part of the interface, we fostered both trust and clarity.

  • QR code: Provided an easy, contactless option for residents and visitors to connect with the mobile app at their own pace.

Ideation

  • Early explorations included static branded panels and simple animation loops.

  • Feedback suggested these were too stiff or idle, missing the mark on delight and engagement. Shifting the focus, I explored an animated screensaver that could “wake up” as the user approached, clearly inviting them to interact, without startling or confusing anyone unfamiliar with digital kiosks.

  • We tested text such as “Tap to Start” alongside subtle animations that gently pulsed or flowed, with a QR code discreetly positioned for tech-savvy users.

Design

  • Rooted in the sleek physical design of the new ButterflyMX hardware, the screensaver echoed the device’s curves and high-quality materials.Color palette: Modern and neutral, with soft accents that matched device finishes and expanded on existing ButterflyMX branding.

  • Clean, sans-serif, easy to read at a distance and in all lighting conditions. Animations were lightweight and playful—gentle transitions, floating shapes, and a sense of “breath.”

  • Self camera: By enabling users to see themselves as part of the interface, we fostered both trust and clarity.

  • QR code: Provided an easy, contactless option for residents and visitors to connect with the mobile app at their own pace.

Ideation

  • Early explorations included static branded panels and simple animation loops.

  • Feedback suggested these were too stiff or idle, missing the mark on delight and engagement. Shifting the focus, I explored an animated screensaver that could “wake up” as the user approached, clearly inviting them to interact, without startling or confusing anyone unfamiliar with digital kiosks.

  • We tested text such as “Tap to Start” alongside subtle animations that gently pulsed or flowed, with a QR code discreetly positioned for tech-savvy users.

Design

  • Rooted in the sleek physical design of the new ButterflyMX hardware, the screensaver echoed the device’s curves and high-quality materials.Color palette: Modern and neutral, with soft accents that matched device finishes and expanded on existing ButterflyMX branding.

  • Clean, sans-serif, easy to read at a distance and in all lighting conditions. Animations were lightweight and playful—gentle transitions, floating shapes, and a sense of “breath.”

  • Self camera: By enabling users to see themselves as part of the interface, we fostered both trust and clarity.

  • QR code: Provided an easy, contactless option for residents and visitors to connect with the mobile app at their own pace.

Copyright 2025 by Adam W. Jones

Copyright 2025 by Adam W. Jones

Copyright 2025 by Adam W. Jones