Karan Mhatre

2020 - UX Design - Eubrics

Designing an Employee Development Platform

Eubrics Design Hero Image

The Project

Company: Eubrics - Newly founded Human Resources startup.

Timelines: June 2020 - September 2020 (4 months)

The Goal: To help employees improve their office soft skills (like conflict resolution, or negotiation).

Project: To build an Employee Learning and Development product to,

Team: 5 member team, consisting of 2 co-founders (domain knowledge experts) and two developers. I was the sole designer on the project.

My Role

Design Process

Since this was a self-funded venture by the co-founders, timelines were strict and we needed to be as frugal as possible. Minimal user research was conducted by me, and I relied on insights from the market research that the founders that previously conducted.

My Design Process for Eubrics HR The Design Process I followed for this project

Kickoff Meeting

I conducted a virtual 4 hour kick-off sessions with the co-founders, along with a follow-up 1 hour session. I used these sessions to,

I used the format below to help founders define the problem well.

Problem Statement Definition Problem statement definitions: Sample
Ideas to Explore Ideas to explore at the end of the kickoff meeting

The User

I built a persona with the help of the founders. This gave us better insights while crafting the final solution.

User Persona User Persona

User Flow

The User Flows helped scope out the complete project and helped create a single understanding of the product among everyone (founders and devs).

At the end of this phase, developers started architecting the database and creating the APIs.

Overall User Flow Overall Product User Flow

Below I have shown the user flow from the “Onboarding” and “Assessment” phases of the program to give you a better idea.

Assessment User Flow Assessment User Flow
Onboarding User Flow Onboarding User Flow

Interaction Model Design

An interaction model provides a broad framework to be adapted as the user goes through the various stages of the program.

Each section had a clearly defined purpose that prevented misuse in the future.

Interaction Design Model for Eubrics Interaction Design Model for Eubrics

Assessments: Wireframing and Prototyping

I’ve shown the wireframing only for the Assessments.

The design challenge was to make these forms engaging since they were very long.

Assessment Wireframe Assessment Wireframe

Instead of simply taking the HR forms and converting them to digital forms, I wanted to make proper use of our interactive web medium.

One just example is given below. The first is the question as it appears in the HR form. And below is the design solution.

Assessment Wireframes Simplifying HR Form questions

There is also a workable prototype I created to better explain the concept.

See the Pen Assessment - Interaction by Karan (@karanmhatre2) on CodePen.

Design system and component design

I wanted to make sure right from the start that there was maximum reusability of components and consistency in the UI wherever possible.

I made full use of Figma’s Component building capabilities to ensure that any designer could build on this system in the future and use existing components with ease.

Link to Design System

Since this was a new product, there was no branding. I created a mood board. Then I asked the founders to pick the directions that resonated most with their brand. I used this data to create a design system.

Eubrics Design Moodboard Eubrics Design Moodboard
Navigation Item Component Navigation Item Component
Task Item Component Task Item Component
Eubrics Design System Eubrics Design System

Final designs and the developer handover

The final step was creating all the pages and assets for the development team. I worked closely with the development team to make sure that there was clarity in the designs that were handed over.

Also, we were able to make do with minimal screen designs since it was modular and we had to work with states of each modular component. We also made Figma the single source of truth for the developers.

I’ve added some of the screens from the final product below.

Sign in screen Sign in screens
Dashboard screen Dashboard screen
Assessment screens Assessment screens
Types of Assessment Questions Types of assessment questions
Learning hub Lerning hub: Learning Material
Community wall Community wall

Impact

The product was designed in 4 months from concept to developer ready assets.

The process that we followed allowed us to unblock developers very soon in the journey so was to minimum are to market speed.

The product is currently in Beta. The founders are onboarding their first set of 200 employees on the platform.