Ataata is an awareness and training platform that is used by companies internally to educate their workforce through humorous and captivating videos. They came to us for UX/UI design and front-end development.
When we first connected with Ataata, one of many Humble VC-backed companies that we’re proud to have worked with, they had a clear vision for creating a better employee training experience. Realizing that many traditional training options were often both boring and unproductive, Ataata came up with a way to make training more enjoyable and more effective. Starting with security awareness, a field the founders were highly experienced in, they worked with a video production company to write and produce short, funny sketches that illustrate important security concepts. They then wrote brief quizzes to accompany each video. With their content in place, they needed the UX/UI design and front-end development that would bring their project to life.
Ataata needed a User Experience that would help to make their platform an enjoyable and educational experience for users. The interface needed to provide smooth video playback, easy navigation and video controls, and immediate scoring on the quizzes. There also needed to be an interface for admins to manage their employees and monitor their progress.
Using Ataata’s existing logo as inspiration and a starting point, we created a complete visual brand for Ataata. Our goal was primarily to evoke a sense of trustworthiness and professionalism, so that users would instantly be comfortable listening to the lessons presented in Ataata’s videos. The shades of blue that dominate Ataata’s color palette have a calming effect, while the organic look of the typography helps to make their branded material look inviting.
The star of Ataata is the content: their videos, quizzes, and data. The UX/UI design needed to play a supporting role, showcasing the content and making it easy to interact with, but never distracting from it. That’s why we opted for a clean, subtle design for the application, letting users focus on the video they’re watching or the quiz they’re taking.
With administrative, managerial, and employee user roles, it was important to clearly map out the experience of the application so that all of these user roles could interact with the application and with each other as needed. Every action needed to be easy and intuitive, from an employee watching a video to a manager changing the required due date of a quiz.
-Matt Cameron
CXO at Checkmate Digital
Our main objective in designing the Ataata UI was to make it easy for the user to understand the information on each page and navigate effortlessly through the application. We worked to create a clear sense of hierarchy and depth using Ataata’s blue in combination with a set of light neutrals, making it simple for the user to distinguish between different elements and quickly find what they’re looking for.
“As the lead front-end developer, I was in charge of building and styling the application and all its components. It required careful and meticulous attention to create a layout that would be consistent across all pages for both types of users — employees watching videos and managers viewing statistics. In the end, I’m proud of every piece of the interface that we made for Ataata. The grid worked very well; the production of reusable components was seamless; and we made stunning UI elements like a date-selection calendar, accordion menu, form cards, video player, and more — all using flexbox.”
- Alex D’Amico
Former Lead Front-End Developer at Checkmate Digital
We developed the front-end of the application using a strong open-sourced back-end UI framework in the form of Angular 2 and its related CLI. We concentrated on solidifying the user stories one at a time working in an agile methodology to build upon what we had defined previously.
“As Tech Lead at the time my job was to ensure that our code and the systems underpinning them were the best they could be. One of the biggest challenges for this product was how quickly the tools we used were changing. The Main UI framework went through several major revisions while we were building the product. The most challenging part of this, and in my opinion the best part, were the changes to the RXJS libraries. They allowed us to dynamically move data between components without resorting to something like redux.”
- Rainer Paskiewicz
Former CTO at Checkmate Digital
“We wanted to take a topic that people usually think is boring and make it fun and engaging. Checkmate’s intuitive designs helped us to reach that goal and make a product that our customers love using and learning with."
- Tim Jackson
VP, Product Management at Mimecast
Ataata used their MVP to get a foothold in the market, quickly gaining loyal users who have responded well to their unique and impressive approach to employee training. In July, Ataata was acquired by Mimecast, a leading email security company.
