Sign Up Process | Case study
I was asked by one of Munich based companies to analyze and improve the signing up process of their nativ app. To measure the usability of user interface I used the heuristic evaluation and usability testing methods.
INTRODUCTION
This digital product was built to improve the lives of patients with chronic cardiovascular diseases.
The reason why the company wanted to analyze the user flow was a low conversion rate and in consequence not achieving the business goal. I replaced the company name on purpose, so you can stay focused on the analysis. I hope you speak german, but if not, then... let's keep it a secret.
Trying something out is the only way to truly know whether it is worth your time and commitment. Let’s say you were intrigued by an ad banner or you saw a brochure in a waiting room and decided to check it out.
Heuristic evaluation & Usability testing
Question: Before you start creating your account can you click on the "i" icon? What do you think what you will find there?
Question: Do this information make sense to you?
1. The welcome screen lets you register, sign in or lead you to a help screen where there is a very long list of questions and answers. As shown in an example the user interface of Help(Hilfe) screens is not consistent. Drop down menu should briefly and clearly answer the questions, instead there are even more questions that lead to other questions and at this point users may not realize that cyan icons on the left site looking like bullet points hide other confusing information.
Solution: matching between the system and the real world, preventing user errors and situation when user has to reach for help, improving information architecture of a content(card sorting), at this point showing only adequate information
Question: What do you think about the first view and the information it contains?
Question: Do you know how to get activation code?
Question: Can you find on the website information on how to get an activtion code?
3. If the user has to register, then this experience should be frictionless. The first screen says that you need only 3 steps to start using the app, but the points on the top of the screen don’t reflect what was promised. The user may feel confused, because after getting a confirmation a new information is shown that the user should have and submit the activation code. The application leads the user to the “i” icon to provide a hint on how to get the activation code but in fact there is also no exact information, the website doesn’t provide this either.
Solution: communicating the current system’s status, aesthetic and minimalist design, designing the onboarding, reduction of texts and screens
Question: can you change your password?
Question: What do you think about changing the language to english?
Question: Did you manage to change your password?
2. What if the user already has an account and forgot the password? Even before the user encounters any problem with credentials, a link “Change password” is visible. This writing is misleading and to avoid confusion “Forgot password” would be more appropriate. Normally changing the password is placed in the navigation drawer. After having trouble with signing in, the user sees the screen “Django administration” that looks strange and different from the previous screen. Furthermore, suddenly the texts are in english. Assuming that the patients understand English is irrational and may undermine the trust.
Solution: improving internal consistency, checking the writing and providing the german version of all the screens
The lack of consistency, unproven information architecture and not exposing the value proposition may be the reasons why the conversion is so low.
LOW AND HIGH FIDELITY WIREFRAMES
Having an idea of what went wrong, I started creating a new interface and user flows of sing-in and login process.
The test result showed what needs to be improved, so I established a new design prencipples. Knowing the target group that consists of patients 45+ we should keep in mind dissabilities the patients may face and we should consider implementing the accessibility standards by: increasing font size and color contrast, making elements clearly visible, adding symbols and outlines as well as making content easily understandable and consistent. If we have to sacrifice elegance-let’s do it.
While creating a new experience, I tried to take into account the needs of all users. Therefore I focused on using a combination of text, colour or graphical objects to improve perception of interface. I focused on consistent components, used descriptive and informative page titles. Thinking about users with cognitive limitations I shortened texts and rearranged links.
A new design system brings more harmony making easier to understand how to apply components and how to combine colours in order to achive the best contrast. Developing the appropriate colours, it turned out that the existing primary colour did not meet the standards of contrast accessibility, that is why I complemented the colour palette by darker shade of green. The previous chosen cyan color will not be used in block texts.
