Lead Designer
dashboard01.jpg

Pixel Perfect Responsive Dashboard Redesign

 
 
 

Pixel Perfect Responsive Dashboard Redesign

Developing a user learning dashboard with scalable and reusable components

 
 
 

As CFI continues to evolve as an e-learning platform. The need for more and better features, products and courses, becomes increasingly high. The idea of using 3rd party applications becomes more narrow as the team grows. It is time to bring our digital applications in-house.

This is the case for our student dashboard. Our aspiration is to create a cohesive space for our learners to engage with our courses and improve their learning experience.

 
 
 
 
 
 

Analyzing what’s working and what’s not

Our first dashboard only consisted of enrolled courses, course progress and access to profile settings. With the launch of our certification and premium features, the dashboard became an opportunity to help upsell our featured courses.

Besides the opportunity for upselling courses and other CFI products, we needed to tackle how to keep the learner engaged and make them come back for more.

Gamification

Some gamification features were implemented, things like course progress, certification progress, learned skills, user engagement, and badges.

Our goal is to make the dashboard feel like the home of our learners, a place to learn, have fun, feel part of a community and discover new things. We want our users to feel proud of their achievements.

 
 
 
 
 
 
 

From content to pixels

The first step was to create a table of contents and ensure the structure followed a clear logic. This lead to the development of the dashboard’s side-bar menu and header. Most of the content of each page was already built so it was now a matter of applying a theme to the content. Thanks to our design system, building the dashboard was a lot like building blocks.

We imported our form styles, headings, buttons, and standard grid. Some elements like tables, drop-downs, modals and icons were created from scratch and added to our theme library.

 
 
 
 
 
 
 
 

Putting it all together

 
 

Once we had everything in place, it was time to test the information architecture and UX design. The entire dashboard was created as a full working prototype using Figma, modals and error alerts were also included.

The prototype started from the login/sign up page, the steps to “forgot your password” where an alternate path, as well as signing up for the first time and landing to an empty dashboard that focused on upselling courses and premium features.

The third path showed a full-program enrollment with all courses available, some in progress, some not started. This path focused more on guiding the user to continue where they left off, or access other resources from CFI such as case studies, achievements, premium features and submit feedback to CFI.

The prototype also included a dark theme option which was based on Google’s material guidelines for dark themes.