top of page
Onboarding
Home screen redesign
Old design
Old home.png
New design
Home.png

Client:

Tellow - Easy bookkeeping software for freelancers
 

Problem

1. A very cold start, 1st time users don't know what to do,
2. Users are hesitant sharing company info, importing bank transactions
3. Accessing most-used actions behind plus button felt sluggish. 
4. Big header text taking up a lot of unnecessary space.
5. This page, central to the app, has little functionality (only 2 reminders )


Solution

1. Give users a checklist to get going with the app and their administration
2. Create tour, show Tellow features & benefits in a few screens, win trust

3. Place quick actions on bottom where your thumb can reach them more easily

4. Remove header explanation, replace with 1 time message

5. Introduce new reminders that will keep users administration on-track.

Implementation phase 1/2
fase 1.png

4 tours have each 3 screens to prime user.

 

The completed tours get darkened for sense of accomplishment. When completed everything in a panel, it stays expanded and the chevron  turns to a close button.

Tours and to-do groups are foldable, 

 

Folded in on start to leave more focus on the tasks you want to perform, especially when you receive many notifications as you can see in examples in fase 2

Notifications are actionable to-do's.

 

Below the tour panel you will get notified with actions. When you click them it takes you straight into the action required. in phase 1 we stuck to the notifications already present in the previous design, to keep some familiarity to the user. 

Like a boss.

 

As some people like to keep their email inboxes clean "inbox-zero". We wanted to reward the user when completed all to-do's, with an approving quote and illustration.

Implementation phase 2/2
fase 2.png

Progress bar checklist gets new users going. 


The notification on the bottom replaces the previous big text on top.
The tours and other groups of checklists are folded on start to leave more focus on the tasks you want to perform

Foldable notifications groups 


minimised on start to leave more focus on the tasks you want to perform, for this same reason to-do group titles gets dimmed when folded open. 

Reminder to manually update transactions,


until all banks are able to synchronise transactions automatically from their banks, users need to have their transactions up-to date to know for sure they're done with all tasks

example of new notifications hierarchy.

Users are unlikely to expand all these notifications at once, but this list gives a pretty clear idea of how the notifications would stack.

Responsive design 

Screenshot 2019-10-09 at 09.36.12.png

Developer Sander Paalvast uses the different colors temporarily for positioning purposes

Example of the UI working on different aspect ratio's
Even though Tellow initially developed the app for phones only, without tablet in mind.
With now IOS's transition to swift UI code, we're able to use the same code for both platforms, so we decided we'd start here to make the app tablet and future proof.

tablet 1.png

Positioning
I wanted to make use of the space a tablet screen has, so we displayed the notifications side by side. It just looked odd stretching the notifications to the sides and it felt empty keeping notifications the same width as on a phone. Yup, the notifications are duplicates as we just needed dummy data to check the positioning

Tellow tour

Brainstorms were in collab with colleague Federico Rocchi from our growth team

Back to the drawing board
At the start, we wanted to show the app's screens step by step, but that would feel very dry, we quickly realized that it would not work. If we wanted to make a difference in user activation, we had to first take a step back. We used a whiteboard to analyze the user's situation and problem.

IMG_7501.jpg
IMG_7503.jpg
IMG_7500.jpg

We gathered the problems from user data, interviews, emails, fora. Every tour needed to prime users for a certain call to action at the end of the 3 screens, required 3 things:

1.  Acknowledge their problem

2.  Show how Tellow brings a solution.

3.  Explain that we require certain info, so they van unlock this benefit. 
      So that they know we don't want their info to spy on them,  

This way they the user has seen the benefit before they get prompted to leave their info and are far more likely to see that we don't want to spy oin their data, but that this data is necessary to enable these 4 functions

bottom of page