ProProfs designs at scale to support a diverse product line with Adobe XD

At ProProfs, we never forget that software is more than science, it’s also art. We carefully design each screen, write each sentence, and craft our software so that when you use it, it’s a simple, delightful experience.

Our team of designers keep the user experience top of mind as they carefully craft our Quiz, Survey, Online Training, Knowledge Base, Qualaroo, and other SaaS products. We’ve found that the design tools we use can make or break the experience, both for our design team and our customers. Adobe XD has been a tremendous help in creating the most dynamic, effective experiences across our very diverse product range.

Mind the CSS gap

As a company that makes a suite of cloud products, we need to design quickly, collaborate constantly, and keep consistent design guidelines across all of our products. In the past, this has proved to be rather difficult as our team used a variety of design tools to accomplish the job that didn’t always work well together. There was a consistent lack of synchronization amongst the tools and this made design reviews more difficult as well as conveying interactions to the development team.

Another layer of complications for our team was the hand-off from design to development. Our development team used their own tools for converting the designs and some CSS colors and fonts would get lost in the process. Once we realized items were consistently slipping through the cracks between design tools and teams, we started actively looking for alternatives to help us mind the gap.

Collaboration meets pixel-perfection

What our ProProf design team really needed was a suite of tools that could help us make issues the exception rather than the rule. Essentially, we needed to apply UX principles to our entire design process. How might we improve the experience of our teams from design to implementation?

During the search for better design tools, I reached out to Jill DaSilva, founder and head of product design at Digital Karma. She introduced me to Adobe XD and showed me how it could streamline the ProProfs workflow and enhance cross-team collaboration. We helped our team make the switch earlier this year and we haven’t looked back.

With the shift to XD, we’ve seen a marked improvement in the way our teams work together. We love the commenting feature because it allows us to have discussions right inside the design files. Communication between our design and dev teams has vastly improved and we’ve been able to advance conversations around software flows and complex interactions like hovering, scrolling, and animation.

The ProProfs Design team created a shared design system in XD that allows us to maintain consistency across all of our products. The hand-off from Design to Dev is now seamless as our developers are able to get the CSS ready to use right from the XD design file. Passing CSS and assets to developers straight from the design file is a huge win for both our Design and Development teams. They’re now creating pixel-perfect designs and reviews are passing in one go.

Prototyping with XD and Qualaroo

In addition to the way XD has improved our workflow, it has also helped us create better prototypes. Clickable prototypes are amazing for getting internal feedback as we create the designs and for getting better insights from user testing. We’ve even been able to use our own products to advance the testing! We add Qualaroo feedback nudges for prototypes to the design then show it to customers. We then incorporate the insights captured via Qualaroo into the design. The commenting feature allows us to facilitate discussions around customer insights right in the design file.

One of the most challenging types of experiences we create are deep software flows. We recently updated our ProProfs Training Maker which makes the process of creating online courses a lot easier. Designing the updates was extremely complex as there were many continuous flows that had to interact together. Using XD, we were able to create individual designs for each flow then connect them together to create one clickable prototype for insights and testing.

Having a unified prototype to test and iterate on was a huge advantage. We were able to show the prototype to our customer advisory board and leadership team members and get their feedback. We captured the insights directly inside the design using XD’s commenting feature which allowed us to iterate more quickly.

Streamlining the design process

The goal of our Design team is to ensure that the experience across all our products is united and cohesive. They diligently document our processes in order to achieve and maintain that consistency. We use our ProProfs Knowledge Base to keep design knowledge, guidelines, and articles in one place. Now, with Adobe XD, we’re able to ensure all design elements, assets, and systems are available in one place as well.

By folding XD into our toolkit, we’ve developed a streamlined workflow that allows us to design, communicate, prototype, and execute in record time with significantly less roadblocks than previously encountered. Having everything on one platform helps our designs go live faster. Everything is pixel-perfect the first time and the experience is exactly as designed by our team.

The right software makes all the difference

At ProProfs, we believe that software should make you happy. It shouldn’t be clunky or hard to use, rather it should be a joyful experience! We are driven to create delightfully smart software with awesome support so that you can work better, get smarter employees, and create happier customers. This principle applies not only to the software we create, but also to the software our teams use to design and test our products.

Adobe XD has made it easier for us to turn our ideas into finished products. Our design, development, and UI teams collaborate seamlessly and have a single source of truth for the design in one system. Having everything in one place has significantly improved brainstorming and critical thinking. XD is more than just a design tool, it’s a delightful experience that allows our team to create delightful products.