Outline an eLearning tool, made easy

The first stage of the project was to perform a comprehensive analysis of the platform to have a better understanding of the company, its users and its product. We had three objectives with specific tasks to solve them:

• Understand the business: we conducted a discovery workshop to find the objectives, priorities, pain points and ideas of the Check team.
• Know the users: we defined an empathy map based on real users and the feedback we collected from a couple of surveys we did.
• Review the design: we audited the product according to usability rules, analyzing both visual styles and navigation, and we compared it with other products on the market by doing a benchmark.

The results of this stage laid a solid foundation to start exploring design solutions, aligned with the criteria of the Check team and following its priorities.

The second stage was an iterative and incremental process. First we created a visual sitemap to define the general navigation, and then we designed content blocks to define the structure of the main pages. This tool that we call blockframes are nothing more than boxes that visualize in a very simple and schematic way the layout that the design will have.

We then continued to put together some lo-fi wireframes, still without color or design elements, to give a better reference of what the new user experience would look like and validate with the Check team. This entire stage consists of advancing step by step, exploring different alternatives to rule out and stay with the best option, then move forward with confidence.

Once the main user flows have been validated, we defined a styleguide with spec regarding colors, font styles and basic UI elements. From this guide, we began to build a UI kit that guided the design of the entire platform, ensuring consistency across all instances and allowing the product to scale into the future. Whether it is a card, a table or a form, each component has responsive versions both desktop and mobile, as well as the different states with variable information.

After discovering, exploring and systematizing, we finally designed the desktop and mobile mockups as interactive prototypes. This is where design comes to life, as high-fidelity prototypes can be very similar to the final product. We made sure that all the flows are defined, and we carried out a handoff with the Check dev team. From start to finish, we had great times at each of the workshops and meetups, and really enjoyed helping the Check team outline their product.