Mark Uraine 8:53 pm on January 21, 2016  

New Login Design

Hey community! – My name is Mark and I’m a recent addition at Automattic as a Designer on the Apollo Team focusing on CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. This is my first WordPress.org design project. 🙂

We recently launched the new login redesign for login.wordpress.org. I really enjoyed learning the processes for undergoing this sort of project and have learned even more now that it’s live – thus my post here on the /design blog.

There were a few things that brought this redesign into fruition. The first being the incorporation of OAuth – sort of like a single sign in for some of our sites (coming soon). The other was a desire to differentiate it from the WordPress installations.

wordpress.org-login

For the sake of comparison, here’s what the WordPress.com login page looks like.

With that said, I designed variations that would distinguish this login page from self-hosted sites and still hold true to .ORG’s branding, colors, and tone. As I’m still learning processes here with the community, I reached out to others and got some great feedback during it all.

Another consideration in designing WordPress.org sites is the perceived “dated” appearance. Last summer, @hugobaeta did extensive UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. research. As improvements are made to WordPress.org sites, we want to improve the design incrementally as well.

Here’s the design we launched earlier this week.

new-wporg-login

What’s changed?

  1. A darker background
    1. I wanted to stick to the WordPress.org brand colors and thought this dark background (same as the current .ORG headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.) would provide the contrast and deviation to set it apart.
    2. The dark background here is only meant for the login/OAuth process and not for the entirety of WordPress.org.
    3. There’s also been some concern that the dark background is too different from the rest of design of WordPress.org. We’ve been exploring iterations and concepts, some of which can be viewed here.
  2. The WordPress logotype
    1. I opted to use the full logotype of WordPress to help provide the visual difference as well.
  3. I removed the box from the form
    1. This allowed for more flexibility when inserting some of the partner site information for OAuth onto the page.
    2. There are less constraints as to how the form balances with this information.
    3. The form fields stand out against the background bringing focus immediately to the action required.
  4. The footer
    1. Added smaller text at the bottom stating ‘WordPress.org’ for additional clarity.
    2. Retained the tagline from the inner pages ‘Code is poetry’ here as well.
  5. Tightened up the links below the form to keep things as high on the page as possible, especially on mobile devices.

There’s been great feedback since launching, including a few suggestions for improvement:

  1. The contrast of labels against the background needs improvement.
  2. Revise the button to align better with the styling from wp-admin buttons.
  3. Add some letter-spacing to the footer text.
  4. Revert back to the ‘W’ mark instead of the whole logo. (I’m still at odds with this one for clarity purposes) 🙂 Maybe the logotype should include the “.org” as it does in the site header?
  5. Work in some intro text to explain exactly what this login is for.

Do you have other ideas for the login page? What do you like? What do you hate? What improvements can be made?