Portfolio: Types Redesign – Case Study
Types is the most mature plugin in Toolset family. Thanks to working at OnTheGoSystems for 5 years, I know this product and its users inside out. Types is a great and successfully used product, but in-depth analysis showed that the time has come to re-design it and get rid of flaws and very old codebase.
Redesign Types plugin so that we get rid of technical debt and old code base allowing for quicker and easier changes in the future. Improve usability and flow of creating a fully functional Post Type on one screen. Make the product more in line with modern WordPress looks.
This is a huge project. Not a little tweak, not a tiny patch. This is a re-implementation of the entire plugin. We knew that we have to do this right, so we decided to go through full design process.
I am very proud that for the first time I convinced the team to go by the full model UX Design process starting with proper UX research, benchmarking the product with competition, getting to know who our clients are and what they really need, gathering information from company support, marketing, business and developers.
My role in the UX research was to perform careful desk research – get to know who our competition is, perform benchmarking to know what are the differences between our products and theirs, where we could improve and what are our advantages.
Another very important task was to get to know what people say about us and about our competition, how and why do they create Post Types, what are the main pains of our customers during this process.
Our support forums and Facebook group turned out to be a brilliant source of information. During workshops with the support team we managed to point the most problematic parts of Types.
Gathering information from marketing, sales and interviews with clients gave us much clearer picture of who our clients are and who are we designing for.
We have found answers to the most important questions. Some of them are:
- Why do people create post types?
- How important is creating new taxonomies, and custom fields during that step?
- What is the difference between creating a new post type and editing existing one?
- Which options are the most important and most commonly used?
- Which options present in the current design are redundant or not important?
- What are the biggest pains concerning current design?
- What features would make our clients work more effective?
Last step of the research was the technical side of Types. Clients’ insights showed that they are much more likely to trust a product that look modern and consistent with its environment.
The objective was to make Types more in line with the new WordPress Gutenberg design. On one hand we did not want to use original Gutenberg elements and tweak them heavily to suit our needs, and on the other hand we definitely did not want to reinvent the wheel and devote time for creating yet another style guide.
I did my research, introduced several React-ready complete and modern yet subtle looking frameworks and organized a meeting with developers to consult which of them would be the best. I must proudly say that they fully agreed with my suggestion for the best candidate.
Ideation process in a remote environment is much more challenging than in the same room with piles of colorful post-its, but it is definitely possible.
We organized on-line workshops with supporters, developers and designers where people could share their findings, conclusions and ideas on how to improve Types Plugin.
Our on-line design studio was a thing to see! People used all variety of tools, from simple notes, and screencasts, through sketches on paper or in paint, to balsamiq wireframes.
We made decisions on the redesign directions based on research, expert knowledge and vision coming from different company departments.
After these fruitful discussions I gathered all the information and prepared in-detail paper wireframes combined with UI design notes. I think I have found the very thing that relaxes me the most ;)
I consulted wireframes with developers and senior UX and passed them for prototyping.
Prototyping & Testing
Our Senior UX Designer prepared Axure prototype based on my wireframes. Then we discussed it between ourselves and introduced some more changes based on knowledge from research.
We organized online workshops with company supporters and with developers to introduce the project and gather their feedback.
After some more iterations and discussions prototype was ready for testing.
We set up several testing sessions with our clients knowing that we have to gather feedback from experts, average users and people who have just started using the product. I took part in these tests as an observer and then.
New clients had no major problems in understanding the interface and successfully finish tasks from test scenarios. “Old” clients were thrilled to see these changes and said that these will make their every day work much easier. They also suggested some more changes they would like to see there.
I helped to organize conclusions and introduce them into the prototype which is now ready to be implemented.
The project is tested, improved and ready to be implemented. I keep my fingers crossed for our great developers to do their job smoothly. I cannot wait for this to be ready for clients. I am sure that these changes will make their lives much easier.
I am really proud that I had such a big role in this UX process. This was a calm research-based work. The fact that the entire design process was placed before actual development sprints, we were able to perform as many iterations on the project as we needed to make sure that we are going in the right direction.
This exactly is the kind of projects that I would love to work on every time.