Learning can be fun!

Get a better grade with personalised mathematics lessons anytime, anywhere.

Screen tile

Research

Styleboards to define the direction

Finding the right visual language was key in creating a fun learning experience. We used styleboards to hone in on the right visual style direction for the product based on our audience, their needs and our values. The style we landed on can be described as: colorful, soft, open, approachable and simple. Right on par with the brand goals of Stairway.

Overview of the research done for Stairway. Overview of the research done for Stairway.

This styleboard references designs from other products. We are not associated with these images.

Personas

Design for the right target audience

We created a persona to work around. A persona is a representation of a typical user with their wants and needs. This is a great reference point throughout the design process to see if our product fits the user's primary needs.

Emily

16, student

Gains

Benefits the customer's needs
  • Reduce the time to learn a concept
  • Revising for an exam/test
  • Keep track of progress

Pains

Negative experiences
  • No teacher available on demand
  • Missing lessons at school
  • Textbooks are not engaging

User jobs

Functional, social and emotional tasks
  • Keep up with exams
  • Get better scores
  • Enjoy learning

Personality

Benefits the customer expects and needs
  • Fun
  • Helpful
  • Friendly
  • Engaging
  • Personal
  • Simple
Overview of the Stairway process, shown as an illustration. Wireframe phase of the Stairway process, shown as an illustration. Visual phase of the Stairway process, shown as an illustration. Wireframe phase of the Stairway process, shown as an illustration. Overview of the Stairway process, shown as an illustration.

From wireframe to design

Each design goes through three different stages: wireframe, visual and motion design. In wireframes we can really focus on what content to include, while in visual design we focus on how we can augment this content through elements like color, typography, spacing and motion.

Stairway process, shown as an image.

Illustrations

Clean, playful and comprehensive

Illustrations play a vital role in the style of Stairway. They invite the students to learn and add sparks of visual interests between all of the textual content. We’ve made a set of clean and playful illustrations for each different theme.

Style

Cheerful colors and typeface

We created a color palette with vibrant and bold colors to enhance the learning experience, and give it a more unique feel. Together with that, we used a typeface with soft shapes, while still being very readable in longer passages.

The color palette used for Stairway.
The fonts used for Stairway.

"This is going to be really useful for learning. Happy to sign off on everything here, really excited about what we have."

Oliver Hunt, Founder at Stairway Learning

The final version of the Stairway webapp.

Web application

The webapp consists of a modular card system that generates a flexible layout. When you dive into a course you are shown a fully immersive experience with all the tools that you need at hand.

Marketing website

The website is an integral part of showcasing the key features of Stairway. By using a lot of illustrations and playful layouts we target our audience directly.

The final version of the Stairway website.

"Already better than any app or website I’ve tried before and totally telling my teachers and peers about it!"

Student using Stairway Learning

Stairway is here!

Stairway is up and running, feel free to try it. It’s already being used by thousands of students in the UK, and the number of schools is growing every single week.