Viewing this page on mobile? We created a web story for a better experience. Give it a try (and let us know what you think)!
The client
WordPress.org is an open source content management platform and free to download for all. At UXATT, we love open source and whenever we can, we try to contribute back. According to W3Techs.com, 38,5% of all the websites world wide uses WordPress as a Content Management System.
With thousands of volunteers, we work on improving the software where we can.
UXATT focusses on keeping the software as usable and accessible as possible, within the limits given in open source projects.
The problem
When a WordPress website is set up, you have to enter an admin email address. People use this address over time to give the general site admin a notification. Notifications on software updates, technical problems or recovery emails.
But when owners start using the website, they forget to update this email address, because it’s out of sight . You don’t need it to login. And when the management of the website moves to someone else, there’s still an outdated email address registered on a WordPress website.
So WordPress needed a solution to verify the admin email address that’s registered for a site.
The solution
The goal was to make it easy for people to learn why it is important to keep the admin email up-to-date. The message should also make clear where people could change their email address. It was also important for them to know this admin email address could be different from their login. Especially when a website has more than one administrator.
People from different WordPress teams collaborated strongly on this project. Design, accessibility, frontend and backend development worked together to get to the result. We discussed accessibility, link texts, frequency of showing the message (and to whom).
At last, WordPress users should have an option to dismiss the notification and get a reminder. At the same time, we needed to limit irritation while showing this extra screen on login.
High fidelity prototyping
Looking for inspiration on similar cases helps defining what’s needed.
Research and strategy
We first looked at best practices of email verification screens in other software. We researched the components other software used. And at what point it showed the verification screen.
Next, we examined the login sequence and looked into WordPress design patterns. After that, we posted our first findings in Trac. Trac is a ticket system WordPress uses for registering bugs and improvements. This way, we could get feedback on our ideas in an early stage.
WordPress Style Guide
WordPress after login is currently undergoing a major restyling due to Gutenberg. Yet, the login sequence hasn’t had much care.
WordPress would show this email verification screen before login. So we thought it was best to use the design of the installation screens.
For colors and typography, we followed the predefined WordPress color scheme and fonts.
User flow
The result
We created a clear and quick message to guide WordPress users to update their admin login if needed.
We kept an eye on the WordPress design patters and found most common patterns for these kind of screens. We used these in our prototype.
With this feature, the user experience improved for all WordPress users now and in the future.