ABOUT ME
I'm Frederik Jansen, I love making visual art,
composing music and singing
Visualisation is awesome because it alows me to bring things to life, strengthen idea's so that they can be realised.
Music is a great way to express myself, it helped me develop myself in many ways, Couldn't live without music,
I always got a song stuck in my head.
Things that give me joy
Singing cheesy karaoke songs
Going skiing, climbing
Playing table foosball & table tennis
Hugging my miniature dashhund
Looking at medieval armor,
Finding the best product, comparing specs
Following new inventions
City of Utrecht & Gorinchem
Learning the Portuguese language
Finding out how things work
Psychology, sociology, antropology
Doing self-actualisation, reflection
Watching documentaries, reading non-fiction
Media that teaches you skills you can use in real life,
Having a cinema unlimited card
Using Capital Letters At the Beginning Of Every Word
Deep conversations at midnight
People who are very present in the moment.
Asking the right questions
colors/shades: black&white, ochre, pear-green
Empowering myself and others
Simplicity in design and lifestyle
A clean room
A open attitude towards to life, people & Idea's
Researching longevity and health
Questions? Contact me at:
Frederikjansen87@gmail.com
ABOUT ME
I'm Frederik Jansen, I love making visual art,
composing music and singing
Visualisation is awesome because it alows me to bring things to life, strengthen idea's so that they can be realised.
Music is a great way to express myself, it helped me develop myself in many ways, Couldn't live without music,
I always got a song stuck in my head.
Things that give me joy
Singing cheesy karaoke songs
Going skiing, climbing
Playing table foosball & table tennis
Hugging my miniature dashhund
Looking at medieval armor,
Finding the best product, comparing specs
Following new inventions
City of Utrecht & Gorinchem
Learning the Portuguese language
Finding out how things work
Psychology, sociology, antropology
Doing self-actualisation, reflection
Watching documentaries, reading non-fiction
Media that teaches you skills you can use in real life,
Having a cinema unlimited card
Using Capital Letters At the Beginning Of Every Word
Deep conversations at midnight
People who are very present in the moment.
Asking the right questions
colors/shades: black&white, ochre, pear-green
Empowering myself and others
Simplicity in design and lifestyle
A clean room
A open attitude towards to life, people & Idea's
Researching longevity and health
Questions? Contact me at:
Frederikjansen87@gmail.com
Onboarding
Home screen redesign
Old design
New design
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
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.
Responsive design
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.
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.
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