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

30-Day UX/UI Challenge – Day 1: Sign-Up Page

I based the app off a fictional educational platform. For the sign-up page, I focused on creating a simple and user-friendly experience by adhering to the following principles:

Simplicity and Clean Design: I limited the form to only essential fields to reduce cognitive load. A single-column layout with generous white space ensures the interface feels uncluttered and easy to navigate.

Clear Guidance: Descriptive labels were added to each field for clarity. Password criteria were displayed upfront to guide users in creating a secure password without guesswork.

Login Alternatives: Social login options were included to offer users a faster and more convenient way to sign up.

Call-to-Action (CTA): I used a bold and visually distinct button with clear, action-oriented text to encourage conversion.

Tools used

Figma

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

7 reviews


Hey Alyssa,

This is a good start for a sign up and sign in page. I like that the buttons are a consistent size and that the components and illustrations seem to be aligned well.

A few things to consider:

All of your buttons having different font sizes and weights. Consider making these a similar font size, weight, and font family for improved consistency.

I notice that this is a sign up page, but your social media sign ups say sign in. This seems to be inconsistent and it may be better to have consistent language like Sign up with Apple, Sign up with Google, Sign Up with Facebook, Sign up with Email.

The color of the text on the input fields is a bit difficult to see, I would recommend finding a placeholder color that meets accessibility standards.


Hi Alyssa,

Great job on creating a clean and user-friendly design! The social login options are well-placed, and the generous whitespace makes the layout approachable. The bold “Create Account” button effectively draws attention.

A few improvements to consider:

  • The icons in the input fields are slightly oversized and could be scaled down for better balance.
  • Improving the contrast on the button text would enhance accessibility.
  • Adding more spacing between social login buttons could improve usability.
  • The design could be more consistent by standardizing font sizes and icon styles (colorful, solid, and outlines).
  • The text size under the “Sign Up with Email” button is too small, making it hard to read.

This is a solid start, and with a few tweaks, it could feel even more polished. Keep it up! 😊


Great job for a start! It’s clear you’ve grasped the basics of how this registration flow works. A small tip: try to keep the font size and style consistent for the button text to make your design look more cohesive. Keep up the awesome work!


Great effort! The UI is clean and minimal, with well-structured options for signing up. However, you may wish to consider more padding for all Sign In/ Sign up buttons to improve its visual impact.

(edited)

Please give space between button and text


I recommend making the text in the input field have a higher contrast due to it being hard to read. I usually see the pages reversed, may I ask why you did it this way? I also recommend a back button or a button to go back to the other page (users will make mistakes).

Otherwise your buttons are very big, clear and easy to read which I like. It is definitely simple which can make the user feel less overwhelmed. Everything else looks good to me. I look forward to seeing more work.


Hi Alyssa, great job on your submission! These small projects are fantastic for refining your skills, and I’d love to help you elevate this from a good design to a great one.

  • Interactive Prototype: It would’ve been great to see this as an interactive prototype, especially since you’ve already set it up based on your screenshot. Prototypes are an excellent way to communicate your vision effectively with stakeholders.
  • Sign-Up Page Enhancements: Adding a logo, title, and potentially a subtitle would help orient users and provide clarity about what they’re signing into or up for. If this is a sign-up flow, use the space to communicate the value of your offering—this can help reduce drop-offs.
  • Terms & Conditions: On the login page, consider moving the T&C fine print to the next page to simplify the screen. It’s also logical to record T&C acceptance when the user creates an account. Additionally, the font size might be a bit too small for readability.
  • Title for Registration Page: Similar to the sign-up page, a clear title at the top would help improve usability and visual hierarchy.
  • Back Button: The registration page would benefit from a back button to allow users to return to the previous screen.
  • Input Fields: The input field colors feel a bit dark. Modernizing them with lighter colors and adjusting the stroke thickness could enhance their look. Icons could also be reduced in size for a cleaner aesthetic, keeping them centered as they are now.
  • Button Consistency: Work on achieving consistency across your buttons. While brand buttons will need to adhere to their respective guidelines, ensure your sign-up and create account buttons share similar styling for cohesion.
  • Password Field: Avoid placing password requirements inside the field itself. Position them underneath instead, where they’re always visible and can accommodate an expanded list if needed.

These adjustments will help make your design more polished and user-friendly. Fantastic work so far—excited to see how you bring these refinements to life!


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