Booking & Checkout Flow

You nailed it on simplicity and user-friendliness, Maham!

But...

there’s a but.

May I argue a little bit on the visual design side here? Okay, first things first (what’s up with the extra bold status bar, 9:41?) 🤔 last time I checked, it’s usually slimmer than that on most devices.

Another thing I found unusual is the use of serif in a UI.

There’s a brutalist trend where designers mix several styles (if I remember correctly, examples like the former amie.so landing page, sublime.app, and Citationsy), but in UI, especially for functional apps, sans-serif is usually preferred because it supports faster readability, better scalability on different screen sizes, and creates a clean, modern user experience without distracting decorative strokes.

The good thing is, you already made the change in the Figma file! I definitely support the updated version you have there rather than what's shown in this screenshot, kudos for that.

Lastly, I’m pretty sure that Supriman could use a bit more white space (let him breathe!).

At the moment, there’s an uneven margin (especially at the bottom), and the layout between the profile picture, name, and experience feels a little… cramped? It could definitely benefit from a more balanced grid structure and consistent spacing.

All in all, awesome job. Just a few tweaks, and this could look even sharper and more polished!

Hi Maham 🥰

Thank you for sharing your work on the booking and checkout flow. You've prioritised clarity and transparency, which is essential for ensuring a smooth journey from booking to payment. I’ve gone through the design, and I’ve outlined a few areas where I believe the flow can be further refined to enhance both usability and consistency.

1. It would be beneficial to see additional screens, especially showing different states of components (e.g., empty vs. filled fields, error states, etc.). This would provide a clearer understanding of how elements behave across the user journey, ensuring consistency.
2. The primary CTA should always be the first item in the vertical alignment, above elements like "Enter your promo code here." Right now, it looks like a secondary button, possibly due to its placement. It’s also unclear whether it's a button or just a text input field. This should be clarified for a smoother user experience.
3. The close button should not be red, as red is typically associated with error states in the system. It would be more appropriate to use a medium light grey to convey an informational tone instead of an action that could be seen as a mistake.
4. I'd like to better understand your reasoning for using DM Serif Display for headers and Open Sans for headings. It seems like DM Serif Display could be used consistently for all titles, with Open Sans reserved for body text to maintain a clearer typographic hierarchy. This would help reinforce readability and consistency.
5. All numbers appear to have the same weight. Since the total is one of the most important pieces of information for the user, it should stand out more. Instead of simply using bold, it might need a more prominent treatment to help it catch the user’s attention.
6. The credit card component needs a field to enter the CVV number, which is likely best hidden by default for security. Make sure this is addressed for completion and security.
7. There needs to be a consistent approach to capitalisation for headers and CTAs. For example, "Gardener Details" is capitalised, while "Select your payment method" is not. Similarly, CTAs like "Enter your promo code here" should either be consistent in their capitalisation or follow a specific style guide.

This is a strong starting point for a booking and checkout flow. With refinements in consistency, typography, and visual prominence of key elements (like the total price), this can become a highly intuitive and polished user experience.

Good work! 😌