Obsidian - Form Redesign

Overview

Hello! This is my attempt at re-designing the subscription form for Obsidian, which I use frequently but have never seen through the lenses of accessible design. I'm not that good at graphical skills and this is my first attempt at showing some work online, so I hope you'll find it easy to navigate and comprehensible! I've linked an Adobe XD file, but I would suggest viewing it at 50% on some monitors. Hope you'll enjoy!

Default Obsidian

Obsidian has only a default dark mode, which is part of the brand itself, although it allows you to choose several templates once logged in (including a selection of light ones). In the lesson about dyslexia, there was mention about dark mode not being that user-friendly in designing for disability, but I decided to try to make some changes anyway - hoping to create something more accessible than the original version and to make the platform more inclusive for those who would love to use it.

Some issues I've found:

• Accessibility Issues - I think the focus fields are quite low, especially when we consider that the error state colour is against the standards, while also being written in small text. The same applies to poor visual cues for errors, and the contrast of the grey summary text. The font was also quite small.
• Password Requirements - There are no requirements whatsoever for the subscription and, since an Obsidian account is useful only for purchase services, I think it is quite unsafe. The error state doesn't even inform the user of the kind of password needed, it directly sends the user to the success page without turning back.
• Terms and Conditions - No checkbox for Terms and Services, which I found quite strange since Obsidian Vaults can be used for a lot of potentially sensible data.

I've tried to address some of these issues by making some changes thanks to what I've learned during the Accessibility lessons. Here are some of the changes I've made:

Accessibility

• Focus State - Made it more visible and vibrant with a brand colour, which might be a bit of an overkill, but I liked the idea of bringing some colour in all that black, white and grey. The border is heavier and the font is bold.
• Font Size - I raised the pixels a bit, going for 18 px for the small text.
• Colours - Some of the colours were not living up to the standards in the AAA category for small text, so I've tried to change them (this was true both for the error state red and for the summary grey).
• Placeholders - I'm not quite sure if these are an issue or not, since screen readers don't read them, but I've always found them a nice "plus" to have. Might come in handy for some users, as a visual representation of what they should write in the field.

Password Requirements

• Standard - In the default mode the system shows you all the different characters that it needs for a safe password.
• Error State - In the error state, the system shows you what went well and what didn't.
• Visual Cues - In both cases, I've added some cues to go alongside colour in indicating what the user needs to change and what is going well.

Terms and Conditions

• I've added a checkbox for Terms and Conditions, trying to simulate the Link.

Conclusion

I've never designed a form before so it's been really nice to have the opportunity to create something for this new "Practice" section of Uxcel! They seem simple at the beginning but become challenging quite quickly, so I hope I've somewhat managed to communicate what I've tried to do and why I thought it was important. Obsidian is such a nice platform to use, maybe implementing some changes for all kinds of users would allow even more people to benefit from it!

Thank you so much for your attention! <3

I leave the link of the project here as well, in case in doesn't work for some reason:  https://xd.adobe.com/view/757e38c5-bbf6-4931-8cd6-2feff3c12761-202d/