Simbott Project Bg.

Overview

Problem

Research

Inspirations

Foundations

Buttons

Navigation

Cards

Check box and Input fields

Final Designs

Results

Back Home

Built and maintained a design system for a VR training simulator that
reduced development cycle from 1 month to 2 weeks.

Built and maintained a design system for a VR training simulator that reduced development cycle from 1 month to 2 weeks.

Role:

UI Designer

Timeline:

3 Months

Team:

CEO, PM, 3 Engineers

Company:

Simbott Solutions Inc.

Overview:

Simbott solutions built a VR simulator with no platform to navigate before and after the simulator, no shared visual language and no structured way to build it within 3 months.


I built a token-and-component system the developers shipped directly from, designed focus-state-first for a TV-based platform.

My responsibilities:

  1. Map the user flow of the platform

  1. Built and maintained a design system using in Figma.

  1. Collaborate with PM and Engineers to deliver project on time.

  1. Design wireframes and final versions of the platform

Impact:

2 weeks saved

2 weeks saved

on development cycle of the platform.

90%

90%

Task completion on the sign-in-to-simulation flow, tested with 15 Army officers

Task completion on the sign-in-to-simulation flow, tested with 15 Army officers.

Simbott Solutions had many trainings with assessment and training mode on different simulators.

Simbott Solutions had many trainings with assessment and training mode on different simulators.

  1. The existing simulator was not centralized to be able to navigate easily.

  1. There was no steady platform built which could hold the simulator.

  1. Engineering team would take more than the allotted time to design and develop the platform from scratch.

I first mapped the entire user flow of the platform following with wireframes to understand how the platform functions.

I first mapped the entire user flow of the platform following with wireframes to understand how the platform functions.

  1. Researched how 10-foot devices worked.

  1. Analyzed common interaction patterns.

  1. Mapped out design principles for TV-Screens

Four rules that govern every decision in the system.

Four rules that govern every decision in the system.

Login uses a QWERTY keyboard

Selecting a field auto-focuses the keyboard; Next moves field to field.

10-foot UI

Text and controls have to read from roughly

3 meters away.

D-pad navigation

Components favour a single clear decision, the cleanest way to lower D-pad cognitive load.

Colour means something

Grey and red carry fixed roles across the whole system. Colour is never decorative.

I looked at how consumer TV interfaces like Playstation and XBOX and games like FIFA design for a 10-foot device.

I looked at how consumer TV interfaces like Playstation and XBOX and games like FIFA design for a 10-foot device.

They're built for exactly this constraint: no cursor, no touch, just up, down, left, right, and select.

I checked that pattern against Android TV's own design guidelines rather than relying on it alone.

Every value in this system traces back to two things: an 8-point grid, and Android TV's own guidance on designing.

Every value in this system traces back to two things: an 8-point grid, and Android TV's own guidance on designing.

  1. Colors run on a two-tier variable structure.

  1. Every text size in it is set for legibility at 10 feet, per Android's "10-foot UI" guidance.

  1. Every gap and every radius pulls from 8-point scale.

Components fall into a few groups inputs and selection, navigation, and supporting elements

Components fall into a few groups inputs and selection, navigation, and supporting elements

I organized the file in such a way that mentions the design rules along with the component and its states.

Elements with similar structure were kept together divided into its different states.

One card represents one choice. Pressing Select on a
focused card advances immediately.

One card represents one choice. Pressing Select on a focused card advances immediately.

Labels, Checklist, Client Logo, Input Field, Icon Button, and
Checkbox all inherit the same state set.

Labels, Checklist, Client Logo, Input Field, Icon Button, and Checkbox all inherit the same state set.

The design system made it easy to design the final version

The design system made it easy to design the final version.

The platform is live and in use, and the system has been

carried forward for Simbott's other VR trainings.

The platform is live and in use, and the system has been carried forward for Simbott's other VR trainings.

Neither developer had used Figma or built for a TV screen before, so the
handoff had to explain the system, not just expose it.

Neither developer had used Figma or built for a TV screen before, so the handoff had to explain the system, not just expose it.

I organized the Figma file by component rather than by screen, with each component set showing every state next to its usage notes. Alongside it, I wrote a design-specific document covering when to use each element.

The system was tested with 15 Indian Army users. It reached 90% task
completion on the sign-in-to-simulation flow.

The system was tested with 15 Indian Army users. It reached 90% task completion on the sign-in-to-simulation flow.

The developers had estimated a full month to build the platform, based on no prior

TV-design experience. Working from the component system and rules instead of starting

from screens, they shipped it in two weeks.

The developers had estimated a full month to build the platform, based on no prior TV-design experience. Working from the component system and rules instead of starting from screens, they shipped it in two weeks.

2 weeks saved

2 weeks saved

on development cycle of the platform.

90%

90%

Task completion on the sign-in-to-simulation flow, tested with 15 Army officers

See my other projects.

Enterprise

User Research

Information Architecture

Infor Architecture

Redesigned and launched a feedback collection system for service desk employees

reducing workflow time by 67%

Retail

Onboarding UX

Redesign

Designed a new loyalty-program flow with 70% of the non-member shoppers agreeing to sign-up.

C