Free quote

Stripes - referee training app

  • Industry: sport.
  • Product type: LMS, e-learning web application.
  • Duration: 200 hours, 2 months.
  • Tools: Sketch, InVision, Zeplin.

Delivery

  • — Personas
  • — UI language
  • — Product Map
  • — Design for all pages
  • — Hi-Fidelity Interaction Prototype
  • — Front-End development

Meet the team

Project manager, UX designer, UI designer.

Roadmap

new module
  • Onboarding and research

    Collecting Requirements

    Estimation

    Personas

    Customer Journey map

    Product map

  • Wireframes

    General layout

    Navigation

    Basic interaction Priceples

    First screens

  • UI design

    Design Language

    First screens

    Delivery

    Changes

  • Development and testing

    Stage 1

    Stage 2

    Design review

Stripes? What is that?

Stripes a referee training application where a user can create different courses or post required information for trainees, so they could learn more efficiently. Application has two user roles: supervisor and trainee, both user types have their one need in the system.

Tools we used

Our priority was fast and quality interaction between all team, for better product understanding and building efficient visual language and logic architecture.

Tools

The Problem & Process

We were asked to improve the usability of the application.
We needed to design two applications for different types of users, supervisor and trainee. The main challenge was that the majority of users are not tech-savvy people, it is harder for them to navigate web applications. Users should be able to easily create courses with the information they have and post educational information for people, they train. Trainees, on the other hand, should have quick access to information and tasks.

Information Architecture

We created Information architecture to account for all information that needs to be included. Based on Information architecture, we could restructure the application to make it easy to use.

Wireframes

After information architecture, we created a wireframes.

At this stage we visualised all user flows, step by step.

More about our wireframe

A Сomplex Style Guide & UI Design Screens

On this stage we developed a design language according to user needs.
It was crucial to create a set of rules to make sure it will be clear and friendly for users.

Typography

PT Sans Regular

abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

PT Sans Regular

abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

Color Pallete

#2D2748 #2462EF #8BB7E6
#F48634 #FFC641 #EAECF1

Navigation

Navigation changed drastically, it became much smaller and easier to use. Some structural changes helped to improve flow, making it more natural, removing the unnecessary separation between relevant data.

Feed

Opposed to doing separate pages for different content, like videos, announcements, etc. , we created feed where user can review all that information more efficiently.
This simplified process of posting different content, as well.

Quizzes

As a part of the feed, quizzes have unique properties to it.
It includes stats for supervisor role in the system, where he can review completion and average grade.
That was made in response to the supervisor role need to understand if the information given was enough to educate trainees.

Tasks

A supervisor can assign tasks to teams. In the page, he can see information about the completion of the task. Once everyone is done with the task in the team, that task will be marked as done.
That helps users control tasks at hand.

Courses

Courses have their own navigation and structure.
Every course has chapters, lessons and quizzes that can be customized by the supervisor. A supervisor has access to courses stats and can review trainees progress.
A trainee receives a simple course view with information that was entered and published by the supervisor.

Results

  1. We've improved user experience on entire project, from initial stage.
  2. We've created friendly UI design.

  3. We’ve built components which helped to make development faster.
These developers were talented, friendly, and organized. We would be happy to work with them again in the future. Would recommend!
Brandon Bourgeois Team Stripes

Similar cases

Augmania — AR content marketing solution

SaaS B2B AR Marketing industry

We're here to help. Start a discussion.

Filed "Your Name" should contain at least 3 symbols
Filed "Company Name" should contain at least 3 symbols
Choose your budget
Enter a valid email address
Filed "Description" should contain at least 10 symbols

Amazing!Thank you! See you soon