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

This project aimed to enhance the accessibility and user experience of the Heroku sign-up page. The original design presented several challenges, including accessibility violations and usability issues that negatively impacted the user experience, particularly for individuals with disabilities.

Key Issues Identified:

Accessibility Challenges:

  • The page failed to meet WCAG standards, including missing labels for input fields, poor composition, and inadequate structural organization.
  • Overcomplicated presentation of text and information further impeded accessibility.

Excessive Information:

  • A significant portion of the page was devoted to promoting Heroku's benefits, overshadowing the primary purpose of the sign-up process.

Form Usability Issues:

  • Required fields were unnecessarily complex, making the account setup process cumbersome.
  • For example, asking users to repeat their email when no company name is provided added little value and increased friction in the process.

Improvements Implemented:

Accessibility Enhancements:

  • Clear Input Labels: Labels are now positioned above input fields, ensuring users can quickly understand what information is required.
  • Streamlined Fields: Fields such as "Company Name" and "Country" were removed to simplify the process. While these fields might serve internal purposes for Heroku, they are unnecessary at this stage. Additional information can be collected later, if needed.

Alternative Sign-Up Options:

  • Added support for signing up via Google or GitHub, enabling faster registration.
  • GitHub integration is particularly advantageous, allowing repositories to sync seamlessly with Heroku upon account creation.

Content and Design Improvements:

  • Simplified Content: Reduced the amount of on-page text by focusing on concise, key points that highlight Heroku's benefits without overwhelming users.

Optimized Layout:

  • Allocated more width to provide whitespace, enhancing readability and reducing visual clutter.
  • Balanced the layout by giving the sign-up section equal prominence as the benefits section, emphasizing the page's primary goal: driving user registrations.
  • Enhanced Branding: Incorporated more of Heroku's signature colors to create a cohesive and visually appealing design.

By addressing these issues, the revamped sign-up page now provides a more accessible, user-friendly, and visually balanced experience.

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

Reviews

5 reviews


Hi Louis,

This redesigned Heroku sign-up page is clean and user-friendly, with a well-balanced layout that guides users smoothly. To further improve clarity, slightly increasing the spacing between form fields might enhance readability. Overall, a strong and thoughtful redesign—well done!

Thank you Kristina for the nice remarks! Something to be checked indeed

Hi Louis,

Your re-design supports users to grasp the value proposition of the APP at a immediate glance. This motivates users to use the APP.

You achieve this by restructuring well the layout of contents and sign-up form. Additionally, you summarize the blocks of text to be key points. Awesome!

Moreover, you manage to keep the brand color palette. Excellent!

Thank you for the kind words and reviewing this project! :)

You’ve done an amazing job reimagining the Heroku sign-up page. The attention you’ve given to accessibility, usability, and visual balance really shows, and it’s clear you approached this with intention and an eye for best practices. The color palette feels super cohesive and on-brand, the hierarchy is clear, and the overall form flow is way more user-friendly than the original version.

One thing that stood out right away was the layout split. At the moment, the screen is divided into an even 50-50, which visually gives equal weight to both sides. But since the right-hand side, with the bold color and benefit highlights, grabs a lot of attention, it ends up competing with the form. When I first scanned the page, I actually thought I was looking at two different forms. You could try shifting to something like a 40-60 ratio to give the form more space and make it more obvious that it’s the main action area. That small change could really help with clarity and focus.

Another small UX tweak that could go a long way: the placement of the “Already have an account? Log in” link. Right now, it sits just below the main headline, which makes it one of the first things users see. While that might seem like a good spot logically, it kind of distracts from the main purpose—signing up. Most users expect to find the login option below the CTA, near the end of the form. That’s where their eyes naturally go, especially if they realize they’ve landed on the wrong page. Moving it down would make it easier to find and more in line with common user behavior, without needing to redesign anything major.

Overall, this is such a strong redesign, great work!


This is very nice! I love how you took time to give your process in detail. Well done!

Thank you Jessica for the nice review!

SHAIK JUBER AHMED

SHAIK JUBER AHMED

Nice UI


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