Dogm.io — Accessible Signup form
Hi Uxcel Community 👋
For my career path to becoming a Product Designer, I'm pleased to present my first project proposed by the Uxcel platform: an accessible Signup form for a SaaS platform.
For this case study, I chose the Dogm.io platform 😁
It's a platform that lets you deploy a Figma project in the form of documentation for a faster, more efficient workflow within a team. I chose this platform because it was launched by Mickadoule, a french youtuber and product design consultant I like so much.
Here is the actual signup page :
It's the kind of layout I find works well on a laptop. But in my opinion, a more welcoming computer layout should be taken into account. I also find it lacking in essential elements that could improve the accessibility of the page form, such as :
- A form field error indicator
- A theme relative to the homepage (that's light)
- A link to go back to home
- An indicator showing how to find specific information.
It's important to note that this isn't a classic form with an e-mail address, password, etc. It requires two things: an access token (that's a password type input) and a share link (that's a url type input).
So here are my designs :
You can try the prototype project :
Hope you like my project ! Thank you 🫶
Reviews
2 reviews
Hey Hamza, Thanks for creating the design. It looks cleaner and finest. I am giving feedback for two aspects
UX:
- The arrow button which leads to back seems disabled because of the color
- Figma Share link might confuse user. Better use actionable like "Figma Design Link"
- Right image seems distorting. Better have a clear image
- Have a different style of Loader
UI:
- Spacing between help (?) and text is too much reduce it keep it 4 or 8 px
- Right Alignment of the button and their below text is right please shift the text horizontally to right
I have also added comments in the figma as well. Wishing you all the best. Happy Designing.
Your redesign brings a clean and accessible look to the signup form. Here are a few areas to refine, guided by key design principles:
- Error Indicators - Adding inline error messages (e.g., “Invalid token”) improves error prevention and aligns with Jakob Nielsen’s Error Recovery Heuristic, making it easier for users to correct mistakes.
- Navigation Options - A "Back to Home" link ensures recognition over recall, helping users navigate without relying on memory.
- Helper Text - Tooltips or helper text for "Access token" and "Share link" enhance affordance and reduce cognitive load, clarifying what users need to do.
- Branding Consistency - Applying homepage elements supports aesthetic usability and improves trust by creating a cohesive brand experience.
- User Guidance - Adding a description like “Enter your Figma token and link to get started” uses progressive disclosure, helping users focus on one step at a time.
- Accessibility - Improving text contrast ensures compliance with WCAG standards, and focus states aid usability for screen readers and keyboard navigation.
- Mobile Spacing - Optimizing spacing aligns with responsive design principles, ensuring a comfortable layout across devices.
By refining these areas with usability principles, your design will become even more user-friendly and intuitive. Great work so far—keep it up!!
You might also like
Siter.io Signup & Login A11Y
iOS Icon Evolution
User Personas to Boost Engagement on a Mobile Social App
HyperGo
social media platform persona
CleaningBuddies — Cleaning Service Landing Page Design
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
