Why We Need Non-Designers in Designing Toped Universe

Ignatius Gregory
Tokopedia Design
Published in
10 min readDec 19, 2019

Illustrations are often associated with designers and illustrators. Not to mention, it is one of the tasks that we might do every day.

Even though designers and illustrators are the one who are responsible for the illustrations, many people in our company use it as a vehicle to deliver all communications and create user engagement on our platform.

Tokopedia used to have one mascot (and one mascot only!) that has been around for more than 5 years. We call it Toped. It is a combination of an owl and shopping bag and it has its own universe. As much as we want to tell about Toped, we actually don’t have common ground on who is it actually and what are the stories behind it.

Our goal using Toped as a character is to make meaningful connections to help our user through their journey in exploring our products — to deliver the best product experience.

As a company that has been around for a decade, we also need to communicate Tokopedia design value through Toped to be able to engage our users emotionally. We believe that it takes a whole lot more than some description of Toped to do that. We need to define who is Toped and why it exists in the first place, to be able to use it as an effective mean of communication.

That drives us to define Toped, together.

Our strategy is to include as many people as possible. So it is a good idea to do some workshops to collect as many ideas as we can and involve people as early as possible so they can start contributing their ideas from the beginning. We realised if we do this together, everyone involved in this project will have some ownership towards the whole concept of having a new universe.

The other thing that we keep in mind is that we often take it for granted everything that we see frequently. Designers and illustrators seen Toped almost daily. By having new perspective, we might have fresh ideas that we never thought of before. We just don’t want to be boxed in the current illustration just because we want to keep Toped as it is and be too afraid to even change the way it is (not even talking about adding lots of friends).

Pre-Workshop

Our core team consists of 14 people, including designer, illustrator, copywriter, and project manager (which is, by the way, a designer too. Read his awesome writing about how he managed our team here). On the first few meetings we had, we didn’t have the slightest idea of how the workshop would look like. In that time, we know that we only have a common goal in mind, by the end of this workshop, we will know who Toped is, collected a bunch of ideas about Toped’s new universe, and who are its friends.

Starting there, we begin building exercises. Little that we know, building workshop is an iterative process. We come up with ideas on how we want this workshop to look like then we tested our ideas within our small group. This process happened several times until we feel that the method is strong enough to guarantee a result that can achieve our goal.

It comes down to 2 main sessions in the exercise: Building Toped’s Persona and Expansion of Environment and Toped’s Friends

The other important thing we prepare in this preparation is the participant. We make sure every stakeholder and other function in our company take part (Remember, we need to get everyone involved so they also have the sense of ownership in the project) and since it’s impossible to get everyone fit in the room, we try to map out all key persons that should take part in our exercise. Other than key stakeholders, we try to invite as many as we can whoever demonstrate interest — we want motivated people brainstorming. We ended up listing 20 key persons, ranging from senior up to executive.

It’s Workshop Time!

On 18th February 2019, around 30 people full of excitement (because we all know that it’s going to be fun!) gathered in a room ready to take part in the workshop.

Since the participants coming from different functions in the organisation, we started with a simple warm-up and an icebreaker just to get to know each other. After a quick ice breaker, we jump straight to the first session.

1. Building Toped’s Persona

Our objective is to come up with Toped’s individual persona and interests. Participants are divided into groups which is predetermined to make sure we have a nice and even distribution of different functions. We included facilitators in each group to help and guide members in the whole process.

We keep in mind (and reinforce it with the group) the basic rules of brainstorming: there are no bad ideas and be additive to other’s ideas.

We begin our first session by giving all participants questions. They need to answer these questions on their own which later on will be compared and summarised collectively to produce one set of persona.

These are the questions that we asked:

  1. Imagine Toped as a person, what will be his top 3 personalities?
  2. What is Toped’s future goal?
  3. If he has a Facebook, what would he write his bio?
  4. Refer one singer/actor/character whose voice is similar to Toped’s?

We went through these questions one by one, with 3 minutes on the timer for each question. We make sure that this exercise is not taking too long so people will not overthink their answers but get enough time to think about the answer. All participants wrote their answers on stickies. Any word, any short expression, or even sketch are accepted. As people write down ideas, they need to place the sticky on the table and laid out based on the questions.

The next step is to discuss it within-group and came up with one set of persona. This time, the timer is set in 10 minutes mark. Each group is given the freedom to discuss and use any method they like to build up the persona. They’ll write down the persona they agreed on a piece of paper. This is the result we want because it will be carried over the next session as the main guide.

Learning point: the participant will be tempted to stick with “positive” adjective, like smart, helpful, etc. Those are fine since Toped is the main mascot that we have and we need to say good things about him, but having a non-generic adjective will help a lot in building the character’s persona. We encourage participants to include funny — and even silly — ideas to get some discussion around it. A few that I found it interesting enough is sissy, lucky, knowledgeable, and exuberant.

2. Expansion of Environment and Toped’s Friends

In the second session, we focus on making a world for Toped to live in and creating some of its friends. Using the persona they have in each team from phase one, we will put Toped in a situation and see how Toped responded to that specific situation.

Each group is given its scenario and sets of questions that will be asked by the facilitators in that group. We keep the scenario as general as possible because we don’t want to limit the answers. The questions itself are designed to extract not only the environment but also the events that are taking place and purposely asking about a character that will appear in the story. For example, one group is asked the following questions:

Context: Let’s go to Toped’s open house!

Questions:

  • Where is Toped’s house? Tell us the location, neighbourhood, and the shape of his house!
  • How many guests will Toped have? Describe their appearance and who they are!
  • What food and drink will Toped serve?
  • Someone doesn’t like the fact that Toped is having a party. Who is this “someone”? Describe who they are, what they look like, and what they are going to disturb the open house!

We make this phase more interesting by requiring drawing, no matter how bad the drawings are (We believe there are no bad drawings after all!). We do this to make sure that the ideas in their head are translated well into visuals. We encourage participants to draw as detail as possible so we can have a vivid visual of their ideas. However, if they totally can not draw details, they could annotate their drawings.

We closed this session with a group discussion. Each group has to come up with an agreed story within their group. The discussions which happened during this step are the most important part of the process. We want to extract all the ideas as detail as possible. The more detail their story, the better it is for them to tell the story to everyone else in the room and it is better for us who will collect the results and synthesise it into one big universe.

Actually, most of them can’t even draw and that’s totally fine

Learning point: facilitators are the ones who can control the situation within the team. They are the ones who could push the whole team forward by challenging and probing the questions asked while maintaining the mood of the group.

3. Team Presentation

Bonus session! Each team presented the result from sessions 1 and 2. Each group needs to present their results to everyone else. We had so much fun at this session! It turns out that every team has a unique idea and perspective about Toped and its universe. One group even do an act-out of what they think Toped would do on some situation.

At this stage, we found so many interesting ideas about how Toped’s universe could take form.

Post-Workshop

Now it’s our core team responsibility to synthesise all findings and ideas that we collect throughout the workshop. As stated in the beginning, our goal is pretty straightforward. It is to tell our user a story about Toped, its friend, and its universe.

Facilitators collect and compare notes and share their findings during the workshop. Then we brainstorm a lot. With the help of a copywriter, we finally came up with a whole story about Toped.

One of the initial sketches

Trivia: Toped’s hobby is collecting shiny things and his favorite food is anything that is round-shaped.

You might want to check the process on how we explore the character here!

A Story to Tell, An Experience to Share

Starting with only one character then now we have more, it is definitely not an easy journey. It takes a lot of time and effort to make this happen.

I realise this can’t be achieved if there is nobody believes in the idea. We need people across the organisation who not only care about our mascot but also that will use it as a vehicle to communicate bigger things to the users to buy into this concept. At first, this seems ambitious, but then, I know that we can tackle all the problems if we strategize it all well.

Getting the right workshop for all people across the organisation to get onboard is another challenge. I learned that it is an iterative process until we got it right.

Even if we did have the right workshop, it might still be daunting to some people since we are doing an illustration brainstorming session. Not all people are comfortable with design workshop. But once we can encourage them to take part, it turns out to be an enjoyable moment. Some of them even feel great because they did things that they don’t expect they can in the first place. On top of that, we can build a much richer story together since we get to find another new perspective.

You might feel it is our job, as a designer and illustrator, to come up with the most brilliant ideas that are related to visuals. But having people who don’t necessarily have a graphic background might help too! It’s just us who need to keep an open mind when designing. The open-minded mindset is important to make sure that we are not boxed in our comfort zone and see other possibilities. I personally believe that designers can’t work alone; we need more perspective to build a better product — foremost, the best experience.

The intention of this workshop is to have fun and gather as many creative ideas as possible — since the objective from this workshop is to find the most exciting ideas.

We’re sharing this to let know of people that even the non-designer can — and should — be included in the visual process. Hopefully, this exercise might inspire you to start inviting non-designers in your organisation to do design together.

--

--

Ignatius Gregory
Tokopedia Design

Tactile-turns-digital designer. UI & Product Designer for Design System @Tokopedia