PicPong

A mobile app for collaborative asynchronous creation to help people feel more connected.

UI/UX Design, UX Research, Motion Design

PicPong

OverviewDiscoveryIdeationFramework BuildingMotivation EvaluationCreative Act RefinementTask FlowFast IterationsHigh-fidelity PrototypesMicro-interactionsDesign SystemConcept EvaluationBusiness StrategyReflections[BACK TO TOP]

Challenge

Zazzle is an e-commerce platform with annual revenues of over $250 million. Moving towards a destination for creativity, Zazzle wants to attract younger audiences and expand its presence in the online creativity space. How might we help Zazzle achieve it goals by encouraging millenials to develop creative habits in their daily lives?

Solution

We designed an app, PicPong, that helps users connect with their friends and family by each completing half of the image.

Tools: Adobe Illustrator, Sketch, Invision, Principle
Duration: Jan. 2018 - Present
Teammates: Po Bhattacharyya, Samadrita Das, Chongrui Zhao, Violet Zhao
My Role: UX Research Lead & Visual Designer

Broaden User's Horizons

Once users start the app, they will see the half images their friends have sent over on top of their own view.

Find Common Ground

The app provides various visual guidelines to help users notice interesting connections between disparate environments.

Communicate with text and images

Users can add location and captions their creations, enriching the conversation between friends, family and even strangers.

Co-create cool stuff

Users can build on each other's creations iteratively to make quirky artifacts with image and sound.

Get inspirations from the world

The feed contains creations from friends and global participants. The merging effect of photos gives users a sense of joy.

Discovery

Creativity doesn't have a single definition.

We wanted to move beyond our own preconceived biases and come up with a more inclusive and empirical definition of creativity. We sent out an online survey and put up 4 survey boxes around the CMU campus, asking people to come up with 6 words they would associate with creativity. We received over 70 responses and over 250 words. We pooled all of these responses into a word cloud.

Creativity is a journey with many highs and lows.

We interviewed 20 people who either practice creativity regularly or were interested in doing so. We asked them to recall the most recent time when they created or failed to create something, and focused on the delightful and painful moments in their creative process. We consolidated the interview insights into a journey map to capture their creative process.

Ideation

To come up with ideas, we focused on the lows of the creative journey as we believed these represent places where people fall off the creative train.

Our Initial Design Goals

Based on our initial design goals, we came up with 7 ideas, and here are some examples:

Boost User's Creative Confidence

Research Insight

People question their capability of creating things. They compare themselves to others and get demotivated. How can we boost people's creative confidence?

Idea

A making-centered board game where the tackiest creation wins.

Reimagine the Mundane

Research Insight

For people who do not create regularly, they often struggle with getting inspirations on what to create. How can we help them draw inspirations from their environment easily?

Idea

An app to encourage people to see mundane objects in a different way.

Framework Building

Frequent usage over time requires habit forming

We shared these ideas to our target users, however, the reactions were mixed. People thought the ideas were cool initially, but they also told us that the novelty effect would fade quickly. They were not sure if they would use these products over time, not to mention becoming a habitual creator. These comments made us realize that we needed a more robust framework to help retain users long enough to help them develop creative habits. We adapted Nir Eyal's Hook Model, giving it a twist to suit our particular challenge about creativity.

Behavior change requires a strong motivation

Since our target users are people who do not create regularly and may not even think themselves as creative, a creative app can sound daunting or uninteresting to them. Thus, we are not only fostering a habit of an existing behavior, but also encouraging a new behavior formation.

In mathematical terms, habits depend on both behavior and time. And behavior itself is a function of motivation, trigger and ability, which means there needs to be an overarching motivation that encourages these millennials to practice creativity.

Motivation Exploration

To explore motivation further, we looked at Maslow's hierarchy of needs and identified some motivations that are below the desire to create. We made some storyboards to test out how people might be driven by each motivation to create.

Express Oneself in Real Time

[User Story] After attending the Women's March, Laura makes something that reflects her politics opinion. Her work immediately appears on their smart mug.

Preserve Meaningful Memories

[User Story] While visiting the Louvre with a close friend, Laura creates a version of the Monalisa that dons her friend's pink hair.

Feel Connected to Other People

[User Story] Laura collaborates with her friend to give an interesting twist to a mundane slice of bread.

After user testing, we identified that the drive to feel connected is the strongest motivation among the three due to its high frequency and universality. However, people already use various messaging apps to keep connected. How can we create a unique experience to help people connect with each other beyond the way they are doing today?

Creative Act Refinement

We came up with three possible creative acts to optimize people's opportunity to stay connected. We also ensured that these ideas met our original design goals.

We showed our target users some scenarios, sample artifacts and asked them to even try out making some simple artifacts. The results were pretty enlightening. The participants were unanimously excited about the idea of two people combining half images to create something new. The experience prototyping further validated how people could feel compelled and get extremely creative to complete a half image.

Idea #1: Meshing the new texture into a photo
Idea #2: Replacing a segment of photo with a video
Idea #3: Combining half images to create something new
The experience prototyping has revealed how creative people can become when asked to complete a half image.

Task Flow

As the app is about completing challenges of half images, We identified two major task flows in the app: the sender flow of initiating a challenge and the receiver flow of completing a challenge.

Fast Iterations

We conducted 4 rounds of mid-fidelity user testing and gained valuable insights to inform the iterations of our design. On the right is a snapshot of some mid-fidelity screens we tested with users.

Support different forms of creativity

Insights

We realized that completing a challenge that someone sent you is as important as initiating a new challenge.

Improvement

In the navigation bar, we added the “challenge” section and emphasized that section along with the “camera” section.

Concentrate on using image as a mean of communication

Insights

A good picture worths thousands of words. When talking to the millennials, we realized that they are visual communicators. When the required message is too prominent, it takes away user's fun of creating images.

Improvement

When sending out images, users are no longer required to add messages.

Address user's privacy concern

Insights

Users were confused about who would be the receivers of their images, and found it hard to distinguish private vs. public options. They were also wondering if their messages would be shown when they share the image publicly.

Improvement

1) We removed the "private" option. When people specify the receivers, they directly imply that the message will be private.
2) We changed "public" to "share to the feed". The consistent use of phrase gives people a better sense of where the images will go.

High-fidelity Prototypes

The initial high-fidelity screens prompted users to consume the contents and didn't have a distinctive visual identity.

We tested our first high-fidelity prototype of PicPong with 5 participants as well as clients. We recognized there were three major drawbacks in this prototype:

Creative act is de-emphasized

When participants opened the app, the first thing they saw was the feed. The next thing they did immediately was to scroll down the screen to view more creations. Thus, their default here was to consume the contents rather than making something.

Too public

The upfront public contents made people wonder if everything will be public. They asked, "Will all of my creations be shown publicly? I'm not comfortable with that."

Not visually distinctive

Many participants mentioned that the app reminded them of Instagram.

The final prototype nudges people to start making as soon as they open the app

When user opens up the app, they will immediately see the half images their friends have sent on the left. On the right, they will see a live camera view. If they don't have any images from their friends, they can also participate in the global challenges so they will never feel bored.

The scaffolding and photo editing tools ensures higher quality images.

PicPong provides a number of helpful tools to take and edit photos. Through our internal experiment and user testing, we recognized three types of scaffolding that can inspire people to construct a better continuation of their friend’s images. They are the basic grid, the reflective contour and the major line extension. After taking the picture, users have further opportunities to edit the images. We moved away from the traditional tools that solely focus on the aesthetics such as filters to the tools that better facilitate users in terms of photo composition, which we believe is where creativity truly comes from.

The private social yields to more personal connections

We have also helped people build more personal connections by devoting a whole section to one-to-one messages, and people can reach this section easily from the home screen with one click.

Micro-interactions

Beyond the general functions, we also added some playful elements which unfold around the PicPong idea. We want to leverage all these micro-interactions to amuse the users and provide a delightful journey.

Switching Mode

When users switch the mode, the pingpong ball will jump back and forth between compose and complete to provide a clear feedback.

Scrolling down the feed

As users scroll down the feed page, the images emerge from the two sides and attract to each other. Seeing how two distinct images come together to form a new meaning will give users some enjoyable surprises.

Sending out creation

Users will see this pingpong animation when sending out their creations, which again adds to our unique branding identity.

Design System

To ensure the design consistency among different sections in PicPong and to build a unique visual identity, we developed a style guide.

Concept Evaluation

Applying the Framework

When evaluating the PicPong against our creative habit forming framework, it is strong in 4/5 components.

User Testing

In our final round of user testing, participants had lots of fun playing with PicPong.

It is also worth noting that the effectiveness of habit formation requires long-term observation. After PicPong gets launched, it is recommended to conduct more longitudinal studies, such as diary study, and track change of KPIs (e.g., frequency of use, number of images sent) over time to get both qualitative and quantitative user feedback.

Business Strategy

Zazzle's goal is to become a destination for online creativity. One app doesn't fit all, which is why we created a strategy. The strategy outlines a systematic approach to product development in the online creativity space.

Existing Product Upkeep

From One-time User to Lifetime Customer
Acquiring new users is much more expensive than retaining existing users. A lot of people visit Zazzle due to seasonal or special events. We must continue to find ways to transform them/their children into lifetime customers and daily users.

Live Products Are Works in Progress
We must create extensive plans to user test and iterate on live products. Live products yield the most meaningful results from user testing, such as real-time feedback based on how our apps and web experiences are being used and truthful contexts of use. We should interview people who download and then delete our apps or visit on the web and bounce away quickly.

New Product Development

Visioning: How to Address Fundamental Human Needs
We must articulate our vision based on one or more fundamental human needs. We must also be aware of vision creep. All products that we build must relate directly to the vision. Any products that move away from it, even a little bit, should be cut even though they might be perfectly good ideas.

Target User: Identify Sub-categories within Millennials
We must identify sub-categories within millennials, specifically focused on contexts of use. Millennials are a highly heterogeneous category - the oldest millennials have kids, the youngest ones are about to start college. For each product, we should choose a more specific category.

Use the Framework to Build Habit Formation Product
We developed a framework for creative habit formation. This framework may be used to generate new concept for new products that encourage creative habits.

Our Vision for Zazzle

Based on the Framework, we came up with several concepts and the following video showcases how these different creative ideas can be part of a Millennial's life.

Reflections

Establish a Framework to Facilitate Design Decisions

The turning point of this project is when we found the habit forming framework by Nir Eyal and twisted it based on our own research. This framework guided us throughout the whole product design process and gave us a lot of confidence when making decisions. Witnessing the power of establishing an early design principle/framework, I would continue exploring what constitutes a good design principle and how to establish it in my future projects.

Reduce the Noises in Design

When we started mid-fidelity prototype, we were rooted in designing and continuously refining the MVP task flow. Staying laser-focused was especially important in this project. "Creativity" is such a bubbly and floaty word that designers could be easily distracted to add a lot more features to make the product feel creative but not to actually make users carry out creative acts. We detoured a bit in the middle, but through user testing and client interviews, we steered our wheels back to the right track again.