Gamifying the employee engagement with Extramile Play

  • UI UX Design
  • React JS
extramile/extramilebanner.webp

The Job of the platform

extramile/extramilejob.webp

The Challenge

Research

User flow map

In the beginning, we needed to define the main flow for two scenarios: Start a new game by scheduling it with the team and Join game from scheduled list. Also, Dashboard for viewing stats of games played in an organisation.

extramile/extramileflow.webp

Wireframes

We started with wireframes to cover key journeys, this helped us in defining the basic information architecture and validating it with the internal team including the client to gain input prior to initiating the UI phase.

extramile/extramileWireframe1.webp
extramile/extramileWireframe2.webp
extramile/extramileWireframe3.webp
extramile/extramileWireframe4.webp
extramile/extramileWireframe5.webp
extramile/extramileWireframe6.webp
extramile/extramileWireframe7.webp
extramile/extramileWireframe8.webp

Typography

extramile/extramiletypo.webp
extramile/extramilecolor.webp

Home page

A dynamic home page that visually adapts to the type of user, The homepage has all the games listed as cards. They are chronologically ordered starting with the newly released or top 10 picks from an organization.

extramile/extramilehome.webp

Dashboard view for Admin:

One of the most primary needs of admin is to view the employee engagement - no of employees being active, hours spent & most played games in the platform.

extramile/extramiledashboard.webp

OtherScreens

  • Game Detail page

    extramile/extramilescreens.webp
  • Scheduled Games

    extramile/extramilescreens2.webp
  • Manage Team

    extramile/extramilescreens3.webp
  • Game Reports

    extramile/extramilescreens4.webp
  • Plans & Wallet

    extramile/extramilescreens5.webp
  • Settings

    extramile/extramilescreens6.webp
extramile/extramilescreens.webp
extramile/extramilescreens2.webp
extramile/extramilescreens3.webp
extramile/extramilescreens4.webp
extramile/extramilescreens5.webp
extramile/extramilescreens6.webp

Responsive Design

extramile/extramileresponsive.webp

Similar Portfolios

projects/algobulls.webp

Algobulls

We simplified the algo trading web application to create content flow and structure that’s easy to discover and scalable. Our atomic design approach created a systematic design system.

View case study
projects/yabx.webp

Yabx

A fintech platform that aims to provide financial access to over two billion unbanked people on their mobile. Given our target audience is new to technology and the application was complex. We focused on simplifying information architecture with multiple filters to ensure that app was simple & accessible.

View case study

Come Experience - The Sketch Brahma Difference

our-service/sbPath.png
icons/arrowTop.svg