TeacherIn is an award-winning desktop & mobile app (available on App Store and Google Play) built for schools to find and book supply teachers directly without the need to pay for external agency fees. I was approached by the CEO to look into improving the app's on-boarding UX, with the aim of guiding first-time users through their key tasks without the help of the customer team. This was their existing app:
CHALLENGES
Like any other on-boarding UX project, the challenge is to increase the success rate of new users navigating through the key workflows. However, bearing in mind that this is an existing app with over 1000 active users, the bigger challenge is to make sure any changes to the current workflow or UI components has a clear value-add and should not confuse the current users.
The main purpose of the app is to find and book a supply teacher to cover for a lesson. There are 2 ways to do this on the app:
- Go through a list of 'My Supply Teachers' to book a specific teacher. Schools needs to manually add teachers they already know to 'My Supply Teachers', by inviting them to use the app. Alternatively, schools can search for new teachers already registered on TeacherIn and add them to the list.
- If there is no suitable candidate in 'My Supply Teachers' list, schools can simply post a job request out to unknown teachers and receive a booking confirmation through SMS reply.
In order to succeed at on-boarding new users, we need to make sure that they know about the 2 main features and that they learn how to perform each task. The problem with the existing dashboard (see below) is that it is not clear what the user should do first. The tile layout design shows users a list of 6 options, giving each option equal weight; this is misleading given that the primary action of the app is to book 'My Supply Teacher' or to send a job request out. Furthermore, the naming of each button does not give enough information about what each option does.
SOLUTIONS
Based on the problems, I proposed a different dashboard layout, which puts focus on better visual hierarchy and gives contextual information for button naming. See the wireframe below.
ON-BOARDING USER FLOW
I mapped out the user flow where I introduced an 'add teacher you know' screen to the on-boarding journey. This is because the first thing we want new users to do is to build their list of 'My Supply Teacher'. By asking the users to add teachers, they simultaneously learn the concept of building 'My Supply Teacher' and also get familiar with navigating through the app.
Some key workflow pages have changed in the user flow. So I mocked-up some of those changed pages to the final design (following the existing UI stylesheet).
WELCOME SLIDES
We also added a series of welcome slides to show what the app can do. Writing the welcome message is important because it should be about highlighting the value of each functionality rather than describing the user flow step by step. I came up with 2 approaches that I submitted for A/B testing: while the first design (top row in the image below) is about highlighting the app's key feature, the alternative design (the second row) walks new users through the dashboard, adding contextual information to each feature.
ADDING ANNOTATED TIPS
After new users have been told what the app can do with the welcome slides, the next thing they are likely to wonder is 'how to do it'. Using Appcues' annotated tooltips, we draw users' attention to places where they can take those key actions for both the desktop and mobile apps.
“YuTing provided a well thought out and thorough approach to our UI/UX enhancements. She provided great rationale and highlighted a well trained eye for design. Looking forward to hopefully having her back for another project soon.” — Peter Carpenter, CEO at TeacherIn
