<?xml version="1.0" encoding="utf-8"?>
Open full project

Finly is a SaaS finance platform. The goal was to redesign its signup pages to be accessible, user-friendly, and visually clear across devices, following WCAG 2.1 AA standards.

Design Rationale

The redesign focused on clarity, inclusivity, and ease of use. I chose a single-column layout for better readability and logical navigation. Each input field includes clear labels, visible focus states, and proper input types (email, password) to support screen readers.

Error messages appear directly below fields, using both color and icons for visibility, and include helpful instructions like “Please enter a valid email.” Buttons have strong contrast and visible focus feedback for keyboard users.

The color palette uses violet for reliability, red for errors (high contrast for accessibility), and neutral grays for balance. Typography (Inter) ensures readability across mobile and desktop.

Accessibility Highlights

  • ✅ Clear focus states for keyboard users
  • ✅ Descriptive labels and semantic input types
  • ✅ Inline, readable error messages
  • ✅ High color contrast (meets 4.5:1 ratio)
Share your insights — leave a project review and help others grow their skills

Reviews

3 reviews


👏 Nice work, Seun!

Your Finly accessibility redesign shows a strong grasp of WCAG principles and thoughtful UX decisions 💡 The single-column layout, clear labels, and inline error handling make the experience smooth and inclusive across devices.

✅ Loved the focus on keyboard navigation and semantic inputs — details that truly matter for accessibility.

💡 You could further refine it by showing password requirements upfront and ensuring the CTA stays visible when the keyboard opens.

Overall, a clean, accessible, and well-structured design — great job bringing clarity and usability together 🌟


Dear Seun,

Really loved the Prototype, its smooth and elegant.

It follows all the ui principles. Although, in the signup after tapping password, I found two conflicts which are minors.

  1. Password Placeholder is slightly lifting up after tapping the ye, solution to this is give the same height to the masked password and unmasked password.
  2. When keyboard comes, the Signup CTA goes below the Keyboard, You can reduce the size of the Password eligibility criteria.

Rest looks great. All the best :)


Hey Seun, nice prototype! The inline validation is a good start. A few tips:

  • Avoid motion while users type, especially for username or password fields.
  • Show password requirements upfront so users know them before typing.
  • Keep the layout stable after data entry to maintain focus.

You’re on the right track, small tweaks will make a big difference!


10 Claps
Average 3.3 by 3 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>