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
Blip - Esport app design (Light & Dark UI)
Bonjour, comrades! Today I present the case of Blip - an esports hub app for gamers where you can check esports news, learn about upcoming t
Project
Reimagining Asana's Color System
I created a color system based on Asana's current project management tool. Accessibility and the emotions the colors evoke were the primary
Project
Customer Journey Map for a Co-Working Space
In this project, I made a Customer Journey Map (CJM) for a co-working space. The goal of this project is to understand how customers feel an
Project
Responsive Main Screen
Project
Latios - Free Portfolio Template for UX/UI Designers
Overview I built Latios because I kept seeing the same problem: designers with solid experience getting stuck trying to launch their portfol
Project
Workspace Booking Flow - UI/UX Design
Visual Design Courses
Course
UX Design Foundations
Learn the essentials of UX design to build a strong foundation in core principles. Gain practical skills to support product development and create better user experiences.
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.