Accessible Signup Form for Storytel
This is a remake of the signup form for the online book streaming service Storytel. Storytel is popular in my home country, Iceland, and I found out quite quickly that the signup UI could use some care.
Note that the originals are in Icelandic due to the fact that language selection is location based and it's not possible to switch languages. That's a big issue in itself since 8-10% of the population are non-native speakers and some don't even speak the language.
I put a heavy emphasis on simplicity and usability by applying familiar patterns for signup pages. For accessibility I looked into color use, focus/error states, typography, touch surface and readability.
Tools used
From brief
Topics
Share
Reviews
3 reviews
Good start, Baldur! But consider working on CTA hierarchy, input and button corner consistency, text hierarchy also needs to be refined. Maybe play around with some whitespace too?
Overall, great design! good understanding of the tool, of basic building blocks that make up a layout.
Could improve on:
Use of default colors
• try to explore using other "lighter" shades of black instead of pure black for the text and other elements that make use of the color #000000.
Font choice.
• Aside from legibility, make sure that numbers are clearly distinguishable from each other. In the case of the font that was used, the "2" looks very close to a number nine
Spacing of elements
• Most evident in the space between the label and the text field, these two items are too close together. Grouping these elements together are important, but it is also important to give them room to "breathe"
Nice work Baldur I can see the improvements you have made! The social logins and language drop down are a nice touch? You could perhaps add a little bit more whitespace between parts of your design while retaining good proximity. Was there an option originally on the app for a guest log in?
You might also like
Ithnain Management System
Jeel app website wireframes
ALT.Studio Color System
2 PAY
Design Workshop Plan
Visit Sri Lanka Mobile App
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
