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

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 began the process by creating wireframes to ensure that all key scenarios were thoroughly covered. This initial step allowed us to map out the primary functions and user interactions, providing a clear visual guide for the subsequent design phases

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/wisedrive.webp

Wisedrive

We designed a conversion-focused website for Wisedrive, India's first used car extended warranty service. Given the new concept, we focused on educating the customers while providing crisp information to help the user journey

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