mockup

This project is a mobile platform for asynchronous collaborative creation which helps people feel more connected. People can each take half of a photo to merge as one creation. Our client Zazzle is an online marketplace that allows everyone to create their own products with independent manufacturers. We are helping the company with 250 million in annual revenue to expand its ecosystem to the territory of creativity.

movecard

Create meaningful memories with your loved ones, even at a distance.

Product Page

CHALLENGE

How might we help young people form creative habit?

Creative habit formation is hard, especially for people who don’t think they are creative enough. Our mission in this eight-month-long capstone project is to help young people develop creative habits in their daily lives.

FINAL DESIGN

1. Start creation in real time

When users opens the app, the left half is the half-photos from friends and around the world, the rest of the screen is a live camera view, which prompts them to start creating right away. Users can also switch to compose mode to send half of a photo to their friends.

2. Lower the barrier of creation with guidelines

Picpong provides several types of scaffolding that enables people to complete the creations. They are the basic grid, the reflective contour and the major line extension along with some basic editing tools.

3. Communicate with text and pictures

Users can add a small snippet of witty text and location, enriching the conversation between friends, family and even strangers.

4. Present creations as conversations

All creations are presented as conversations in the inbox. Users can always build on each other’s creations by replying to the latest image.

5. Get inspirations from around the world

The feed contains creations from friends and global participants,this ties back to people’s difficulty of drawing inspirations from their environment, and helps them start creating much easier than ever before. The merging effect of photos gives people a sense of joy.

A cool, quirky artifact is ready!

DEFINING CREATIVITY

Creativity is more than what we perceive

We were determined to move beyond our own preconceived biases and came up with a more inclusive and empirical definition of creativity. In February, we asked 70 people to give us six words that they associated with creativity and got this word cloud.

word-cloud

MAPPING THE CREATIVE JOURNEY

Identifying the highs and lows in the process of creation

We interviewed 20 people who practice creativity regularly. With insights from them, we created a journey map of the creative process with highs and lows. Though this doesn’t reflect everyone’s process, it provides a useful snapshot of what some critical nodes are in the creative process.

ADDRESSING THE LOWS

Ideating concepts to address the lows in creative journey.

We focused our attention on the lows because we hypothesized that the lows represent places where people fall off the creative train. Accordingly, we came up with some ideas as follows. framework

CREATING A FRAMEWORK

Mapping the habit formation into a framework to inform our ideation

In light of our user feedback and literature review, we found that people tend to easily drop out of creative activities. Hence, we needed a more robust framework to retain users long enough for them to develop creative habits. framework

TESTING WITH TRIGGERS

Validating young people’s needs by experimenting with three concepts of strong motivations that may foster creation

Based on the habit formation framework, we developed three concepts to study why young people may start creative pursuits. In other words, what are the motivations that drive people’s creation?

concept1

Express yourself in real time

People like to express themselves through their accessories. Will they be motivated to create art that appears on the objects they own?

Feedback: Self-expression is a strong motivation, but the difficulty of creating something good enough to show others infringes people’s creative acts.

Feeling connected with other people

People want to feel connected to their loved ones. Will they be motivated to create in order to strengten their bonds with others?

Feedback: This is a powerful motivation that most people experience daily. The quality of the creation is less important than the underlying meaning.

concept2

concept3

Preserving creative memories

People care about memorizing meaningful experiences. Will they be motivated to create quirky artifacts to preserve their memories?

Feedback: Although preserving memories is a powerful trigger, meaningful experiences don’t occur often enough to lead to habit formation.

Artwork inspired by Violeta Noy

EXPLORING CREATIVE ACTS

Looking for an ideal act which lowers the barrier of creativity

As we found out that people want to feel connected to others, the next step for us was to find a creative act that truly liberates and empowers users to practice the creative activities. We brainstormed three more concepts to test with users via storyboards and experience prototyping and validated the best idea among the three: a mobile app where people can each take half of a photo to merge as one creation. acts

sample

sample1

sample2

TASK FLOW

Structuring how users create things and interact with each other on the platform.

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

mid-fi

FAST ITERATIONS

Refining design based on user testing insights

We conducted 4 rounds of mid fidelity user testing and gained valuable insights to inform the iterations of our design.

beforeafter1

Supporting different forms of creativity

Insights: We realized that completing a challenge sent by someone is as important as initiating a new challenge.

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

beforeafter3

Emphasizing collaboration & connection between users

Insights: 1) Visually, people didn’t understand why there were two locations under one user. 2) Placing two creators side by side creates a sense of connection.

Improvements: We restructured the information architecture by placing the information of both creators above the image.

beforeafter4

Addressing user’s privacy concern

Insights: Participants were confused about who was the receiver of the image, and found it hard to distinguish private vs. public options. They also wondered if the message goes public when the image goes public.

Improvements: 1) We removed the “private” option because when people specify the receivers, it implies the message is private. 2) We changed public to global feed so that people know better where the image will go.

VISUAL DECISIONS

Exploring how the app should look and feel

We developed a design system including color palette and typography and different components. We defined the guiding words of our app’s theme: vividness, simpleness, and delightful surprise. And we made the following visual decisions:

  • Use round-corner buttons which make thing more bubbly;

  • Use drop shadow on buttons to prioritize certain elements;

  • Apply minimalist design and highlight colors;

color-palette

HIGH-FIDELITY ITERATIONS

Moving towards higher fidelity design

Basing on the two major task flow, we made the first version of our high fidelity mockup.

hi-fi1

We conducted another round of user testing via a react native prototype we built. Users were able to experience the real creative act in this app.

testing

testing1

testing2

The feedback we got from the client was that this version focused more on the social aspects rather than the creative acts since the feed was dominant. Meanwhile, the users had difficulty accessing the creating part in the app. And functions like filters are insignificant for users when interacting with the app. feedback

Revising the high-fidelity design

According to the user testing results, we made the second version.

  • We prioritized the creation entry. The camera view appears first now once users open the app.

  • Redundant edit function got reduced such as filters while keeping the frequently used ones: rotating, flipping and brightness.

  • Interactions between users appear as conversations in the inbox tab.

  • Lastly, we built our own visual identity by changing the layout and using a different color palette.

iteration iteration

FINAL SCREENS

hi-fi2

STRATEGIC VIDEO

In the end, we made a video that depicts the future of daily life with Zazzle products including PicPong and other concepts we developed simultaneously. We believe that with these complementary products, Zazzle will eventually become a creativity hub for many people’s life.

SUMMARY

Picpong is the longest project I had working with a client. I appreciated the continued support from our client and the amazing collaboration and fun we had as a team throughout the eight months.

The next step is to develop the app with continuous user testing, iteration, and refinement. Some potential improvements include:

  • Provide a better feedforward of the privacy setting

  • Allow group creations

  • Enable users to reveal the original images