A product starts as a simple idea.
With an aim to solve a specific problem with a very easy solution and simple interface. The product starts getting traction. And customers find new ideas and ways to improvements existing features in a more meaningful way. Since these ideas are practical and easy to develop, they get implemented.
Over a period of 2-3 years, depending on the speed of development, hundreds of features are added. And now the solution becomes advanced – pro solution. Each of those features need some kind of UI. Developers design it the way it makes sense to them. Sometimes, relevant options dependent on are unknowingly placed in not just in a different section, but a totally different page!
So a what started with a simple and organized UI is now a very complicated, very hard to understand product. In other words, it is a chaos.
Exactly that’s what happened with Tyche Softwares’ Order Delivery Date plugin. Also known as ORDD plugin in short.
Tyche Software is a known name in WordPress and WooCommerce industry since about 10 years. Earlier, I founded this theme company known as templatic. I planned and oversaw development of over 100 plugins and theme products, some of them had very advanced level UI.
They approached me when they were planning to improve and redo UX of ORDD plugin.
The Problem
I started working with their team and figured out the most important tasks their customers would want to perform. And then I experienced the product as a first time user and penned down several problems. The most notables were…
- To perform a task, you had to be aware of availability of relevant options in a different page!
- Design and readability issues. Help texts were complex and hard to read.
- Relevant options were not grouped properly.
- Options were not organized in a logical order.
- One task was performed via many places
In other words, first time user would get dumb struck by all this.
Solution
As I started to plan the solution, the first thing I did was to work with their in-house support team. Because support team directly interacts with customers every day and they know their pain point. They know how they use the product and where they get confused. They also know what are the most features are used by most and what is the problem with that.
Based on those interaction, I proposed a few approaches and then we worked together on grouping the options. There were a lots of back and forth. And we kept changing the groups and their placements. Adding and removing different pages. In the end, we were able to group them all in a logical order.
A big win for this project was that we combined addition of data and showing the data in a tabular format. Instead of having a different form for Adding the content and showing it, I proposed inline editing.
This helped users to keep track – where the things are and how to manage them. The data table would have “Add more” option at the bottom left. Clicking that button would add a row at the bottom of the table. No surprises, no taking-them to different page or showing a popup etc. The experience was self-explanatory. And very easy to use.
And as you hover the data rows, you are able to “quick-edit” and save the row right there.
And this became a pattern for the UX of the entire plugin.
As we progressed to design solution for more and more columns, we saw showing and in-line row would not be possible in all the cases.
But I didn’t want to break the pattern and confuse the users by taking them to another page or option.
So we started showing options inline – but vertically. It was very challenging the keep things simple for many options. But we kept at it and figured out solutions as we went along.
After a while the forms started becoming more complicated. In some cases, in a form, there were a table inside a table. But we didn’t want to break the pattern and keep it as easy as possible for the users. Keeping all the options in front of them, in the right context. So we followed the same pattern for those tables as the main table. The end result was simple and very easy to use.
And finally, we had “Add Delivery Schedule” – the most important screen to design. This was frequently used and one of the first options a new user would want to add.
Problem was that the “Add Delivery Schedule” form was super super long. Even though grouped logically, in different sections, the form length looked scary. Plus, it made things look complicated.
After thinking much, we realized even though the options were related and needed to stay together, the user didn’t need to use them all at once. Often times, they would want to add just a few options out of all the options available.
Since we already grouped the options under different sections in logical order, we used “accordion” UI for the sections. By default, the first section would remain open. But the Save button would stay at the bottom of the entire form. This way, the user would scroll through all those accordion option while saving the form.
This helped. And it simplified a really long form into easy to understand, one-thing-at-a-time UI. A big win for everyone.
We also designed onboarding screens and welcome screen for the plugin. The idea was to help the users achieve their goal as soon as possible without confusing them. So we showed a video on the welcome page followed by FAQs of the questions that pre-sales team were asked.
Tools:
We used Figma to design this. Changes were constant and design decisions changed almost every day. Using components and auto-layout from the beginning helped us make global changes rapidly.
Frontend HTML Code: We also coded this entire UI into semantic, clean code in Bootstrap framework.
The Result & Takeaways
In a project where a very popular product backend is entirely restructured and redesigned, the biggest risk is angry users if things are not done right. In ORDD plugin’s case, the users were delighted with the new UX.
Along with the new UI release, relevant tutorials and videos were also published – in case the users need to understand what exactly is changed and there are the things now.
Overall, the users were very happy with the update.
Here’s what Vishal Kothari, the founder of Tyche Softwares has to say about this project
@rbhavesh helped us improve the admin experience beyond our imagination & was well-received by customers! [source]
– Vishal Kothari, Founder of Tyche Softwares
Some key learnings and takeaway from this project are…
- Work with the support team: As mentioned earlier, they interact directly with the customers everyday. And know exactly where they are facing the problem. And they would have a possible, practical solution available for this.
- Decide a UI/UX language from the beginning: Right from the start, you should have a UI/UX guideline for the new feature development. This will ensure that things would remain in logical order. Features would be easy to use and locate.
- Group features in “Jobs to be done” order. Define different use cases and group them accordingly.
Hope you loved this case study and maybe learnt a thing or two. Does your business need a design help? Reach out using the contact form on this site and let’s talk.