The challenge
One of the user centered design challenges was the onboarding experience of the account creation process on the Tiny website (2018). We went through a process of screen recording the actions of a user from start to finish, to clearly observe any pain points.
Annoying marketing content
When the user clicks on ‘get started’ on the Tiny homepage the immediate layout does not focus on main task at hand ( filling out the form ). The most important area on the screen is taken up with marketing messages that are redundant at this stage – 5 bulletpoints on why the user should create a Tiny account.
The fact that the user has clicked ‘get started on the homepage means they chosen to start the process, so they don’t need to be sold on why they should sign up.
The solution
The most recent iteration of the sign up for (may 2019) seen on the left – is the result of our prototyping usability testing. We can clearly see a number of improvements.
‘Get API Key’
A key improvement was having more than one avenue to allow users to sign-up. As well as the initial email/password form on the tiny homepage, the user can click the CTA button in the header “Get API Key” which simply takes the user to the initial sign up landing page.
As you can see from the video on the left, the initial landing screen allows the marketing team to use a two column layout and only 3 key messages to help reinforce the potential customer decision to sign up without being too annoying. A win – win!
Summary: At Tiny, I worked on improving the account sign-up process which focused on UX and UI Skillsets. These screens show some of the high fidelity screens for the improved process but I will also feature a case study to communicate an overview of the problems and outline the process of improving the user experience. The UI elements seen here are part of the design pattern library, developed at Tiny.
The video below shows the user journey once the ‘Get Started’ CTA is clicked on the homepage.
Results from user data
The results from usability testing determined a few key things that would need to change in the revised sign-up / on-boarding process.
- Marketing message: Give the user a quick start process that is clear, without needing to see or read a bloated marketing message.
- Form UI: the visual design of the form components is based on the Material UI, although this may look trendy, most users are even clear there are fields to be filled. Use clear input boxes and remove the minimalist bottom border style.
- Error handling: When the user clicks on a field they automatically see a red ‘error’ line and x – without telling you what you did wrong to cause the error. This is an annoying experience to the user, even without doing anything they feel like they have made a mistake. Revise error validation using simple tooltips.
- Speed: once the user has filled out the form correctly they click the ‘create account’ button. There was a 13 – 20 second wait which was quite annoying for the user. Ultimately, the development team had to revise the back end architecture to improve the loading speed.
Please note: All digital design work produced by me was done as an employee of Tiny Technologies.
