Case Study: Redesign User Registration UI design
Easy Drag and Drop Form Builder
Introduction:
User Registration is a drag and drop form builder plugin for WordPress which helps in the creation of registration forms for the WordPress websites. It has its own drag and drop form builder which helps make the form building experience seamless and convenient for its users. User Registration is quite arguably the best user registration plugin available in WordPress with spanning 40,000+ active installs, and it is ever-growing.
My Role:
My responsibility was primarily to make the User Interface more pleasant and User-friendly. I also worked closely with the front end developers to deliver ease-of-use first approach in UX, which was responsible for the plugin’s popularity. I was also involved in many important design decisions, which led User Registration to the place it is at today.
The Challenge:
I am a believer of the concept that designing and building something from scratch might often be the easier approach, as it’d grant me the creative freedom to test boundaries, and come up with innovative designs, rather than redesigning existing elements that are present. It is also why User Registration boasts of innovation, and impeccably recognized facets to it’s UI/UX.
The functionality was already preset when I was assigned in working with them. It was an exhilarating experience — I was tasked with trying to come up with innovation whilst still constrained upon already expected behavior from the development team. Designing a simple user interface with a sleek and modern look as well as adhering to the existing HTML structure at the moment was the biggest challenge. As the saying goes, “Less is more”.
Tools:
Adobe XD, Adobe Illustrator, and Adobe Photoshop
How did I start?
When I was assigned for the redesign of the User Registration, it was already clocking 10k+ active installations in the WordPress directory. Above all else, I prioritized the most important tasks for this design process, which had the biggest impacts on User Experience.
- Logo Design
- Icon Design
- User Interface
1. Logo Design
Every product needs a unique identity to stand out over the market. The logo is that face which introduces the product among the people get hearing the name of the product that they are using. So, logo design is not just about visual perception or verbal message. It’s about making a brand recognizable and transmitting the appropriate message about the product.
As the plugin name ‘User Registration’ itself reflects the meaning and purpose of the plugin, I tried to combine the icon and lettermark representing two basic letters ‘U’ and ‘R’ of the plugin name. Additionally a user and a pen icon as a sign of the registration.
2. Icon Design
User Registration previously implemented the already limited Dashicons available in WordPress. As they were pretty generic, it ended up being irrelevant to the users, often resulting in confusion, and delayed registering of what button is supposed to take what action exactly. The resultant frustration from already duplicated icon usage led to bad User Experience, which I undertook in eliminating.
3. User Interface
The main purpose of the redesign concept was to make the form building experience even better and easy-to-use for the users.
In the process of research and analysis of existing design and layout, I concentrated my efforts on UI solution which put bright accents at the most important features and introduced some more important features which ultimately provide fast and easy form builder.
The first thing I noticed while using the previous form builder was that it was an interactive playground for the user, where they could experiment with changes to see what fit their requirements. It gave the user a rough idea about how the form is supposed to look during the form building process, without having to preview and rebuild forms in a back and forth fashion. So no doubt I would have to embrace this kind of interactive process of building forms where the user can make changes, and see the changes reflected almost instantly. I took it upon myself not to miss the vision of what made User Registration stand apart from its competitors.
The first problem I tackled, was to approach form naming in an accessible manner, so I added the editable form name field to edit the form name inside the builder, which would save changes retroactively.
It came to my attention that very often users would get confused as to how to create a login form for their websites. In order to address this, I introduced the popups as well as a help button from which the user can get helpful links while building the form. Upon saving, the user would be able to see an informative popup, which would then present helpful links to documentation in order to get started with User Registration. The remedy also resulted in what is today a resourceful button that allows users to access any documentation for User Registration within their form builder interface.
Additionally, to minimize distractions from the WordPress Admin dashboard User Interface, where the form builder is present, I proposed a fullscreen mode. This allowed users to focus on only building forms that suited their needs with no intrusions of notices, popups, and messages that’d lead to a bad User Experience.
Conclusion
I thoroughly enjoyed the entire overhaul of design facet within the User Registration ecosystem. While it was challenging at times, I was able to work together with some brilliant minds to produce what is arguably today’s leading WordPress plugin for registering users. At the end of it all, I noticed the project not only enabling growth for me as a designer, but I was also able to understand what makes a great user interface tick.
That’s all fellas! Thanks for taking the time to read my personal account. Feel free to share with me your own similar experiences on redesigns.
