FloreoTech

A new world of learning

floreotech-logo
floreotech-app-screen
Industry
Virtual reality
Scope
Wireframe,
Prototype,
Design
Platforms
Web,
VR

Project Origin

Using virtual reality to help kids with autism

FloreoTech leverages the power of virtual reality to provide a supplementary method of teaching individuals with Autism Spectrum Disorder (ASD) social and communication skills.

The lessons are fun and engaging for learners, while providing supervising adults with the ability to monitor and track their progress.

7ninjas is proud to be a part of it!

vr-app

Project

What we have packed

table-screen-app

User
Flowchart

monitor-screen-app

Low-Fidelity
Wireframe

monitor-app-screen

Website
Design

Technologies

Weapon of choice

Project management

We used Trello to keep track of the project and Slack to communicate with the client. The InVision App comments mode proved to be a great tool to discuss all, even the slightest details with the customer.

Product design

We are always using the best tools available. That’s why we have chosen Sketch App, InVision App and Axure RP to prototype and wireframe each single view. PhotoShop and Zeplin complete the whole picture when it comes to the design integration.

logo-sketchapp

Sketch
UI Design

logo-photoshop

Photoshop
Image retouch

logo-axure

Axure RP
Prototyping

logo-zeplin

Zeplin
Export designs

logo-slack

Slack
Communication

logo-invision

InVision
Preview & Prototyping

Team pic

Team

One man army

One experienced product designer was enough to complete the entire design process.

The product manager was responsible for coordinating all of the activities required to bring the product to the finish line.

Milestones

Achieving the goal step by step

The final effect has gone far from the initial assumptions. We have received 32 blocks from FloreTech Team. We delivered 79 new blocks and
+20 new flow connections.

millestones-relations

Milestones

Achieving the goal step by step

The final effect has gone far from the initial assumptions. We have received 32 blocks from FloreTech Team. We delivered 79 new blocks and
+20 new flow connections.

millestones-relations

Color contrast ratio

WCAG 2.1 approved

Web Content Accessibility Guideline is an International established set of guidelines for accessible content on the Internet.

These guidelines are mainly for people with various disabilities, but also for different devices used for browsing websites.

Basic
Green
Contrast
Navy blue
Completive
Gray
Spatial
Blank space
monitor app screen

About rounded corners

Genesis of the symbol creation

As a part of the branding elements we introduced a dashed rounded shape which reminds of VR headset. You can also notice a light green grid fitted nicely into the design.

vr-screen

Transform an idea into reality

Wireframe vs Design

Since we got the flowchart ready, it was time to gather all thoughts with FloreoTech Team and create some low fidelity wireframes.

After a few brainstorming sessions we managed to create the final version of the site we are proud of.

vr-screen
background-screen

Powered by VR

Lessons to build real world skills

The learning tool is based on social and communication techniques intended to help individuals with ASD build real world skills.

screen-page-2
screen-page-3

Ease of use

Client area panel

The client area panel is a combination of custom features and eye-catching design. It could not more user friendly than this.

profile-screen
laptop-screen
in-vr-screen

Challenges

Gather all the details in one place

Dozens of calls, hundreds of notes, several concept changes. That’s what we had to face while discussing the project.

Once again, it turned out that frequent conversations with the client bring measurable benefits. Here is a short summary of all stages.

floreotech-graph

Multiple users, one goal

Hit different types of audiences

  • Trainers
  • Scientists
  • Companies and individuals
chart
ratings

Outcome

Statistics

Each file counts when it comes to the final effect. This way, we managed to complete the goal, that is, to create a completely new, fresh and eye-catching design for the FloreoTech website.

Got a project?

You might also like

Check out other projects that we’ve worked on.
SportyHQ-banner

SportyHQ

Sports management platform

qollabi-banner

How About Sales

Sales management app

Freightable-banner

Freightable

Freight and shipping app