2020 - UX Design - Eubrics
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,
- let users take assessments,
- based on their assessments give them a report with their strengths and weaknesses,
- give them study material and a mentor to help improve on their weaknesses,
- get users to apply their new learnings in their work life.
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
- Conducting structured ideation and requirement gathering sessions with the co-founders
- Interaction Design
- Developer handover and acceptance testing
- Working directly with cofounders instead of product managers
- Working on a product that doesn’t have a branding or a design system
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.
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,
- Understand the vision
- Define problem statement
- Ideate in a structured manner
- Build Collabortive user flows
- Explain my UX process, Project Plan, and Timelines
I used the format below to help founders define the problem well.
Problem statement definitions: Sample
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 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 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
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
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
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.
Simplifying HR Form questions
There is also a workable prototype I created to better explain the concept.
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.
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
Navigation Item Component
Task Item Component
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 screens
Dashboard screen
Assessment screens
Types of assessment questions
Lerning hub: Learning Material
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.