Client Delight: MoMA
A creative exploration of motion design in Figma
Designed for Wunderkind
There is an opportunity to enhance the Museum of Modern Art’s onsite experience for mobile & desktop by incorporating microinteractions within the interface
︎︎︎ CX Design
︎︎︎ UX Design
︎︎︎ UI Design
︎︎︎ Interaction design
︎︎︎ Motion design
Tools:
︎︎︎ Figma (interactive components & variants)
Brainstorming
︎︎︎ See extended research here
Emotional Motion
MoMA’s brand has potential for added client delight within its onsite experience.
︎︎︎ what if the MoMA Design Store’s customer experience included some hover interactions to add client delight and keep the user engaged?
I came up with a couple of interactive experiences inspired by some of my favorite artists that have their work showcased at the MoMA.
The first is a day & night toggle featuring Vincent Van Gogh’s famous Starry Night - representing the night variant and Almond Blossoms - representing the day.
The second interactive feature is a hover animation featuring the same two pieces.
On desktop ︎︎︎ the interaction is triggered by the hover of the user’s mouse; On mobile ︎︎︎ it is triggered by the user’s tap and hold of their finger on the screen.
Structural Motion
The MoMA store’s mobile experience is efficient as it is, but there is room for some playfulness and personalization within certain customer journeys to increase overall performance: consumer engagement & retention.
︎︎︎ what if the average customer experience included a micro-animated transition that adds thrill and personalization into the user journey?
Here, the customer’s job to be done flow looks like this:
For such a simple flow, this user centered transition has made the mini experience feel more personal and visually stimulating.
By using Figma’s interactive components & variants feature, I was able to prototype several microinteractions within this experience, such as: typing of the email address, ease in / out of the promo overlay, etc. The main goal at hand was to portray an alternate, more delightful customer journey.
Functional Motion
While browsing the MoMA’s onsite landing page, I wondered:
︎︎︎ what if this experience was optimized to allow for elements to move across the screen - revealing a detailed description of the title when triggered by a hover interaction?
The onsite experience for the MoMA Design Store is already quite intuitive, but by eliminating the excess step of clicking into an event title to view its details - redirecting the user to a new page - I was able to add a touch of simplicity, minimize effort, and contribute a modest interactive component into the interface.
This experience is entirely functional, improving & simplifying the overall user experience.
Implementation
Two of the three experiences above were a/b tested against the MoMA Design Store’s live onsite experience (at the time). Testing resulted in favor of the experiences that incorporated client delight.
Fin.