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
Accessible Signup Form for SaaS Platform
🧩 Project OverviewFor the Accessible Signup Form for SaaS Platform challenge, I designed a desktop signup experience for TaskFlow, a projec
Project
Loginino
The primary goal of this login page was to create a clean, intuitive, and accessible user experience that minimizes friction and guides user
Project
Notification microcopy - Project
This project focuses on writing clear, concise push notification microcopy for a mobile e‑commerce app. The goal is to improve the user expe
Project
El Mandoub-GovTech App
Mandoob is a Qatar-based, subscription-driven GovTech app that simplifies government procedures for individuals and businesses.The platform
Project
MalishaEdu Counselor Workspace
Context MalishaEdu is a student consultancy management platform used by counselors and branch teams to manage leads, applications, documents
Project
Portfolio website
For this update, the objective of the portfolio is to achieve a cleaner and more structured layout while remaining fully aligned with the br
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.