Accessible Signup Form for SaaS Platform
This is an e-commerce site specifically for a coffee shop named Coffee Bean, similar to Starbucks. I’ve designed and showcased the login/signup flow tailored to their platform and followed WCAG accessibility standards.
Tools used
From brief
Topics
Share
Reviews
1 review
Hi Yuvasree,
Great job on submitting your design brief! This is a great piece of work, and I really enjoyed reviewing it. Your presentation and prototype are impressive.
A few small refinements to consider:
- Ensure you're using the approved “Sign in with” buttons from the relevant providers’ media kits for consistency.
- The title casing in the loading subtitle at the end might feel a bit formal—consider switching to sentence case for better readability.
- In the signup form, the input hint “username” doesn’t align with the label “Full name.” Adjusting this for clarity would improve the user experience. Also, title case for the field label might enhance readability.
- The signup flow currently ends after entering the full name and loops back to login. If it’s intended to continue to an email screen, the “Continue with” buttons might appear too late—consider placing them on the previous screen for a smoother experience.
- On the login page, changing the title from “Please login or signup” to “Login to CoffeeBean” would feel more intuitive, as users have already indicated they have an account.
Overall, fantastic work—keep it up! Looking forward to seeing more from you.
Thank you for your valuable feedback! I completely agree with your comments. Looking at it now after a few months, I can see the areas I’d refine. But it’s incredible to have a community where mentors share their insights truly grateful! 🙌
I always get confused about when to use title case and sentence case. Any pro tips?
I thought using title case for headlines made sense, but now I realize it could cause readability issues.
(edited)
Hey Yuvasree,
That’s great to hear!
I just realized I could have been clearer in my previous review—title casing in the loader’s title works fine, but in the subtitle, it feels a bit off.
Typically, title case is best for headers since it draws attention and sets the main context. For subtitles, sentence case improves readability, especially since they’re longer, more conversational, and serve as supporting text. It also helps establish a clear typographical hierarchy through typeface weight, casing, and size.
For reference, Google’s Material Design leans toward sentence case, while iOS uses more title case—context matters! Checking tools like Mobbin can help see how similar products handle this.
Hope this helps, and looking forward to more!
Hi Salvatore!
Thanks for the clarification!
Appreciate the reference to Material Design and Mobbin! I'll check them out to see how similar products handle it.
Best,
Yuvie
4 Claps
Average 4.0 by 1 person
You might also like
Project
HealthFlow: Designing a Simple and Insightful Wellness Dashboard
This project focuses on designing a health and wellness dashboard that simplifies how users track and understand their daily well-being. Das
Project
Improving Dating App Onboarding: A/B Test Design
This project explores how improving the onboarding experience of a dating app can increase profile completion and early user engagement. I d
Project
FORM Checkout Flow - Mobile
Try out the prototype here. Design Rationale Why mobile? Mobile accounts for the majority of e-commerce browsing, and premium furniture pur
Project
A/B Test for Hinge's Onboarding Flow
This project focuses on improving the onboarding experience of a dating app - Hinge, by addressing low profile completion rates. Since profi
Project
Accessibility Asse
For this project, the LearnLink website was selected, and the goal was to redesign the login and sign-up pages specifically, adapting them t
Editors’ Choice
Project
Uxcel Halloween Icon Pack
🎃 Introducing the Uxcel Halloween Icon Pack! 🎃 This custom Halloween-themed icon set was created to enhance the seasonal user experience o
Visual Design Courses
Course
UX Design Foundations
Learn UX design fundamentals and principles that create better products. Build foundational knowledge in design concepts, visual fundamentals, and workflows.
Course
Introduction to Figma
Learn essential Figma tools like layers, styling, typography, and images. Master the basics to create clean, user-friendly designs
Course
Design Terminology
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.