Start

Start

UX, UI, information architeture, HTML, SCSS

About

The challenge was to convert a client from an LMS native solution to a web app so the experience could be light and responsive, while also reducing implementation time.

Basic flow map:

Start wireframe.
Mapping and initial Start wireframe

Premises

Product scope:

  • Product cycle: log in and content consumption.
  • Minimalist e-mail communication: registration, password recovery, course enrollment, and course conclusion.
  • Some content was excluded, such as HTML, infographics, and others.
  • Once the product is validated: add social features.

Execution

Wireframe

Wireframe proved to be useful since we were able to improve the flow and the information in each screen, compared with the native app.

Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Start wireframe.
Colors

Since it was designed to be a white label web app, primary colors are customizable by each client. Only support colors were defined.

Typography

Fire Sans for titles and Roboto for body text.

Fira Sans Sample.
Fira Sans Sample.
Roboto Sample.
Roboto Sample.
Tablet, landscape orientation
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Start screen - landscape orientation.
Tablet, portrait orientation
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.
Start screen - portrait orientation.

Final

Simple, straightforward, light, and responsive design.

Start uses a reduced number of images. It has a short loading time and allows the content to be king.

Mockups
iPad simulation, landscape orientation.
iPad simulation, landscape orientation.
Mobile simulation.
Mobile simulation.