The Design Process of Teambition App Walkthrough

Value over Function.

5 min readJul 27, 2017

The walkthrough process bridges a delicate journey between your App’s Sign Up page and the value your users could gain from your product. Getting people to sign up for your software is tough. It requires a lot of time, energy, and money, yet many companies are losing most of those hard-won users immediately after their first-run experience.

We made Teambition so that it was easy to use and incredibly powerful. Easily start new projects or catch up on existing ones. It helps you manage the whole project efficiently through Tasks, Events, Posts, and Files. These 4 main function modules are even big enough to become several independent products. More and more functions are building into the product, you can’t even decide which functions is the most useful one, employees and project owners has totally different needs. I feel exactly the same as Tom Cavill said:

“My head was so deep in the product — what we had, what was upcoming, what worked well, what wasn’t quite there — that it was hard to see the wood for the trees. I needed a way to focus on what the key benefits were for end-users. Why should they sign up for this?” — Tom Cavill

So, what will the new walkthrough process looks like on a powerful tool like Teambition?

Step 1. Let’s Start by Define Constraints.

Why define constraints?

Because it is the foundation of design. A design process without constraints is like driving a car in the desert, you will waste tons of time on finding the right direction. For this walkthrough process, the goal is to help users quickly understand the values our App could offer, and be more attractive from the branding perspective.

Here are the 3 constraints I set:

1.The Shorter, the Better
People are getting busier and busier, attention spans are getting shorter and shorter, competitors and notifications are popping up all over the place. So don’t keep your users scrolling on the screen more than 10 seconds.

2. Show Values, not Functions
Teambition are powerful because of its structure. Task, Events, Posts, Files are the basic function modules every project have. It will be too tedious if we explain every function module on the walkthrough process. That’s the job of product on-boarding.

3. Storytelling and Beautiful Visual Style
Most Business or SaSS products’ user interface are not visually pleasing, beauty is not on high priority in their design principles. However, popular Apps on the consumer side have shown a lot of engaging interfaces and interactions, users often feel tedious and exhausted when landing on the not carefully crafted Business products. We don’t want that happen to us, so the whole process should be more attractive.

Step 2. Solutions

3x3 Method
I use a method called 3x3 which is introduced by Tom Cavill. Read more

This method help me produced a simple frame like this:

The frame will guide your visual creation process, help you stay close to the core product values.

“By constraining yourself to an extreme level, you’re forced to boil down your product to its bare fundamentals. Your use of language has to change, your hole logic has to change.” — Tom Cavill

2. Interactive storytelling

App’s walkthrough process is usually based on user’s gestures such as swipe and tap, and there are two main design patterns:

A: Swipe first, watch later.

Users use gestures as trigger to make the animation start. Then users should watch and wait, because they don’t know when the animation would end. If the animation is not good enough, users may loose focus or even hit the Skip button.

B: Watch while swiping

We can see the elements’ animation are based on user’s swiping gesture, this allow users take fully control of the storytelling process, given them a sense of participation. Also, this can make the process as short as possible.

Why not use Pattern A+B?

In this case, I try to combine these two patterns together, in order to take advantages of both. My solution is to use Pattern A when users tapped the App Icon on home screen, after a short opening animation, Pattern B take control of the rest steps.

3. New Visual Style