Three Principles We Applied When Designing a Holiday Card With Gen AI

Play

Behind the Scenes: Making an AI-Infused Holiday Wishing Well

min
Feb 6, 2024

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

link outside

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

asdfkjhasldfkjhas dflkjashdf aslkjdfh aslkdfjh

alkjsdfh askldfjh

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Test caption here

2023 was a landmark year for conversational AI and generative art, marking a significant shift in how we all interact with technology. At the Play Lab, we wanted to celebrate these advancements in a way that emphasizes collaboration, our innate creativity and hope, and, of course, play.

So we created an interactive, Generative AI-powered, doodly holiday wishing well. Folks could enter their wish and watch it become a doodle, which they could then customize as a sticker for our shared sticker collection for the year.

@ideotiktok Our Play Lab loves to make stuff. Come #BTS as they use AI to bring wishes to life! 💭 #BehindTheScenes #FYP #AI #IDEO #Holiday ♬ Calm Lofi/Cafe/Study/Vlog(1492712) - Tana Music

It was a fun activity for celebrating the new year, but also re-surfaced three principles in how to build fun, social, and creative experiences!

1. The power of a playful prompt

An animation of the prompt for our holiday wishing well

AI can feel like a giant, overwhelming concept, so we wanted to frame our card around an activity to make it more accessible and engaging. Therefore, we included a prompt for participants to "make a wish,” lowering the bar to get started and cutting out the mental block of "I'm not creative." Also, with an instant feedback loop of seeing their wishes illustrated, our participants could feel the reward and be encouraged to keep exploring.

In making the Wishing Well, we kept to the same kinds of images and color scheme, creating a visual consistency that helped our participants feel like they were part of something bigger.

Lastly, simple, user-friendly features like customizable borders and color schemes were not just extraneous features; they gave users a sense of ownership over their final creations.

2. Level the playing field

An animation of the sticker customization of our holiday wishing well

Originally, our concept centered around drawing highlights of the year. However, internal testing revealed that this prompt was challenging for users, especially those who often struggle when asked to be “creative.”  We shifted the focus to wishes for the upcoming year. This subtle yet impactful change, especially the addition of the word "to" in the prompt (My wish for 2024 is to…), encouraged users to express active, actionable wishes. This adjustment not only made the task more accessible but also enriched the AI’s ability to generate unique, resonant illustrations.

3. To create community, build something together

An animation of the sticker collection on our holiday wishing well

Many generative AI experiences are one-on-one: the prompter and the AI. But one of our great loves is bringing people together.  Inspired by some of our favorite experiences like paperplanes.world and Google's bubbles.io, we built an experience that starts with a single person submitting their wish, but then concludes with a shared collection of stickers connecting folks from around the world into one canvas. In doing that, we turned the wishing well into a living tapestry of ideas and aspirations, inspiring an ongoing cycle of creativity.

4. Make it fast

An animation of the Figma creation process of our holiday wishing well

Rapid prototyping was core to our process, a method that allowed us to quickly gauge the viability and appeal of our ideas. Using tools like Figma for early-stage designs and ReactJS for prototyping, we were able to iterate swiftly, to make sure that our AI sketch style resonated with our vision. The process helped us refine our focus, and zero in on features that truly enhanced the user experience.

Try it yourself!

Feel free to create, save, and share your own wish for 2024 at wish.ideoplaylab.com!

Come Play With Us!

Our wishing well is not just a product but a showcase of our philosophy at IDEO Play Lab — where play, technology, and human-centric design converge to create magical experiences.

We invite you to join us in this ongoing journey of innovation and creativity. Share your wishes, your ideas, and together, let’s shape a future where technology not only serves, but inspires and delights. Leave a comment our reach out to us at <helloplaylab@ideo.com>