Academy allows organizations and schools from all over the world to create tests and evaluations to their students to give them digital professional certificates.
The goal for this project was to create all the user interface of the platform from scratch. One of the main challenges was that the web app would be used for different roles and diverse of user types so was really important to create an interface friendly and practical for a large of user’s audience.
The platform will be used for 3 different types of users like organizations, teachers and students, so we defined users profile based for 3 roles.
Now with a clear idea of the users that will use the platform we proceed to planning the architecture flow of sections and content, pretty helpful for designing features.
Professors can access more modules like categories, certificates and students but with permissions provided by the organization - otherwise will only access by default to the main map of the professor.
As you can see students was the easy flow, only will have modules for present tests and see their results, and if they approve one test they will have the option to download the certificate.
Click here to see in more detail the customer journey maps.
Note: Now I’m using FlowMapp to do these maps, I found some features better like collaboration, the figures built-in and connections system makes the process much faster.
We decided to go with the light theme in the first version, give a fresher overlook and make a good environment that fits well with the education industry.
Decide a color palette now that we know that will be used in the light version, so the combination of colors that we are looking for is an aspect of professional but still fresh and modern – so that is the reason for a lot of grey shades and blue for bringing motions like calm and security (important for reinforces the trust for the platform).
As a large project with a lot of sections is usual to go with reusable components so that was what we did. Modern minimalistic and well-crafted interface focused on giving prompt feedback to any user action – also pretty inspired in the Material Design 2.0 that at the moment was something fresh.
The dashboard is the main screen for every user, here will appear all the modules and sections that a user has available. We used friendly illustrations very intuitive as icons for each module and additionally a short description making clear the functions of every module.
Tables are essentials in the platform to show a lot of data and are used in a large of sections, so making a good table that makes easy to read information was important.
One section that has an impact. Making the test builder easy to create a test and edit one was key. On the left side will be the questions and answers and on the right side panel all the information test like name, number of chances, minimum note to approve, time, etc.
Another key section, when a user presents a test. We wanted something clear that doesn’t distract the user for the main purpose that is answering the questions.
So we keep the information that we show here minimal apart from the Q&As we put a timer and navigation questions.
As usual, I uploaded all the designs into a Zeplin project to facilitate the developers in the front-end process.
Also back then a major version update from Adobe XD was released, the video feature was included, so prototyping for a clear user flow was improved and this made it easier for developers to get the idea of animations transitions between each element and section.
This one was one of my favorite projects, I enjoyed to be part of this. If you want to see a more visual style of the project you can check the case in Behance here. If you are interested in collaborating with me in a project feel free to contact me.
