Home        Work       About


 

ButterflyMX Intercom Welcome Screen


Project — UI Design
Date —   2021 – 2022



I was tasked with creating a welcoming landing page that users would see before they start their interaction with the intercom. The goal was to create a warm and welcoming experience, like the feeling of coming home, while also providing some additional non-intrusive functionality where possible.
The result was a dynamic, lightweight, and playful animated screensaver that serves multiple functions.

This screen greets the user, gently instructs them to “tap to start,” provides a QR code to download the app, continually refreshes the screen to reduce burn-in, and provides a sophisticated new face and identity for ButterflyMX’s flagship product.


Overview

Process


Goals
  • Increase sympathy, clarity, and memorability for users
  • Catch attention of new and existing users and increase interaction with Intercom
    • Possibly lead to new customers
  • Display contextually relevant information in unique and engaging way, specific to target audience
  • Represent ButterflyMX brand
  • Match sleek new hardware design
Target Audience/User
  • Residential buildings - Families and residents
    • Family friendly content
    • All ages and languages
    • Residents and recurring visitors
  • Commercial Buildings - Businesses and offices
    • Professionals
    • Office workers



Ideation and Brain Dump

Feature Ideation

  • Brand-related Content
    • Logo and branding
    • Engaging action statement (e.g. “Tap to interact”)
    • Link to website?
  • Building info
    • Building name + Address
    • Logo
    • Phone number/contact info 
    • Hours?
  • Local Info
    • Weather
      • Current + upcoming forecast, warnings, alerts
    • News
      • Local + breaking news
      • News cycle ticker
      • Trending topics + hashtags?
      • Local community events

    • Aesthetic content
      • Background images
        • Weather images/animations
        • City/surrounding neighborhood
        • Local maps
      • Artwork
        • Art gallery that cycles images (paintings)
          • Google open gallery api
          • Harvard art museums api
        • Local photography
        • Generative artwork/designs animations


    Design Inspiration and References





    More work for ButterflyMX