QuickLessons

QuickLessons

SaaS, UX, UI, information architeture, HTML, SCSS

About

Envisioned and implemented:

  • UX Drops: quick and straightforward changes focused on improving user experience;
  • Training sessions on user-centric design aiming to both educate the company team and provide expert counsel;
  • Contextual research;
  • Documents and processes, reducing development time and enhancing focus on user experience such as:
    • User personas;
    • Questionnaires (qualitative and quantitative);
    • Interview scripts.

The main challenge, however, was the product redesign.

Premises

Based on research and user feedback thru customer support, we established premises:

  • Focus on HTML5 library once mobile and responsive design courses were the ones most being used/requested;
  • Upgrade technology to enhance interaction performance and speed development;
  • Prioritize the scene editor function, making it fun to do it. The user should feel empowered but not overwhelmed by the options;
  • Modernize and simplify the interface.
  • A edição de cena deveria ser algo divertido de se fazer. Deve haver um empoderamento do usuário sobre os elementos que aparecem na cena, sem pecar pelo excesso de opções e blank state dos concorrentes.

Execution

Colors

Intending to keep the design recognizable (the product was already some years in the market), blue was held as the primary color but with less saturation.

The rest of the color pallet revamped with a contrasting color and a supporting grayscale.

Typography

Two more contemporary fonts were used to renew the typography: Montserrat for titles and Hind for body text.

Montserrat sample.
Montserrat sample.
Hind sample.
Hind sample.
Wireframe
QuickLessons wireframe.
QuickLessons wireframe.
QuickLessons wireframe.
QuickLessons wireframe
QuickLessons wireframe.
QuickLessons wireframe
QuickLessons wireframe.
QuickLessons wireframe.

Final

A new version of the scene editor function was launched, tested, and approved a few months later. The user feedback was positive and reflected the intended excitement when using the scene editor.

Demo video
Mockups
Notebook simulation.
Notebook simulation.
iMac simulation.
iMac simulation
Desktop screens - full screen
QuickLessons sample screen.
QuickLessons sample screen
QuickLessons sample screen.
QuickLessons sample screen