Home screen redesign
Tellow - Easy bookkeeping software for freelancers
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 )
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
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
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.
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.
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
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.
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