One of the Abila’s core web based applications, netFourmPro needed a UI/UX refresher. The product had not updated for many years and was falling behind its competitors in adoption. Beside the UI being outdated, the user experience needed to be improved for the most used module in the application, event registration. Our clients told us that it was too long and cumbersome for their clients. So, it was my job to find a solution to the problem of improving the UI and UX in the application.
netFORUM Pro's Old UI and Event Registration Process
netFORUM Pro's Old Event Registration Process Flow
Research & Analysis
My first step was to map out the current event registration flow to see how was laid out. After that myself and some members of our Usability Team spoke directly with clients by conducting interviews with usability scripts that we wrote with questions we felt would help us understand their concerns. I also looked at our competitors to see what they are doing differently to gain a sense of what the industry was moving towards. The process also included a heuristic review of the module to see what other usability issues there might be. Below you can see a small sample of that review.
A Sample of netFORUM Pro's Event Registration Module Heuristic Review
After reviewing the usability studies and the heuristic review, I began to brainstorm a new slimed down process for the module. The process took many whiteboard drawings and sketches; however, we were able to get the process flow down from 12 steps to 4.
netFORUM Pro's New Event Registration Process Flow
After getting the new workflow completed I moved into creating personas of who we felt was going to be using our product the most. With a Persona Synthesis created by our Usability Team I was able to create a few personas to help understand our users.
Prototyping and Validation
I began using Balsamiq to create wireframes. Once I had a good foundation I began to create the Hi-Fi mockups to show a more detailed final solution. During the mockup process I did some user testing to get a sense of what the users are thinking when they see the new process. The results showed that users were enjoying the new process but were still getting suck on a few ideas. This help to go back to the whiteboard and see how I could create a solution to these new issues.
Just a few of the wireframes created for netFORUM Pro's New Event Registration Process Flow
For the design we wanted to have a UI that would be consistent throughout all of Abila’s product line. Using that base UI structure, I designed an interface for the module that was clean and simple to navigate. I made sure not to weight down the design with non-essential UI elements.
After more rounds of user testing and refinements to the mockups, the product team and I released the new UI and UX for the module. Below show results our product team received from our clients on the improved average time it took their clients to finish to process and task time comparison. As you can see the new user experience made a big improvement. I’m very happy that our clients enjoyed the new experience.