INTRODUCTION
AdnexioHR
Adnexio is a data-driven platform designed to improve HR efficiency by 20% within 6 months by streamlining your entire talent management process. It consists of 3 inhouse products:
adnexioHR
adnexioEDU
adnexioJobs
Role & Team
Ahmad Rafiuddin - Design Lead
My Role - UIUX Designer
Aimi Nadila - Project Manager
Irsyad Murtadha - Frontend Dev
Norshaffan Mohd - Backend Dev
Duration
Project: January 2024 - May 2024
Website
Our team is looking for design explorations and recommendations to intergrate 3 products into 1 solution portal called Adnexio.
Project Scope
Competitor analysis, conducting user research and mid-fidelity to discuss with developers.
What I accomplished
Create a new user flow with addition of some new features and information architecture. Produce high-fidelity for developers handoff.
Daily Sprint Meeting
Problem Statement
PROBLEM #1
Outdated UI and lack of design system for consistency.
New design system are created to cater for the product merge operation. Therefore, we will overwrite the old UI's with newly created design systems.
PROBLEM #2
Too many user flows to access the whole ecosystem.
Each of the product mentioned are a standalone platform before the merge. Despite some of their user flow's are connected such as adnexioEDU are connected with adnexioJOB. This will affect user's navigation experience and time spent.
Design Process
Discovery
Understanding the core product before attempting a revamp is crucial so that the new ideas are aligned with the original goals of the product.
Visual Design
NEW FEATURE #1
Upskill Progression
This feature are available for admins only. Admin can monitor staff's applied courses, their progressions such as attendance and work submission to ensure they are actively involve with the courses.
NEW FEATURE #2
Upskill
This feature are for staffs to enroll on courses that are available for them to upskill themselves or career pivoting.
Ideation
Experiment - Sketches - Wireframes - Hi-fi
There is no wireframes or low-fi crafted because we are using existing structure. I work closely with our developers to see which components can or cant be used, This will give me a clear vision of what should be done and quickly adjust according to the requirements.
Figma | Adnexio
Dean Studio
https://
figma.com
/dean/adnexio
Design File.png
Final Design
Upskill
Idea Breakdown
Few iterations, discussions and experimenting, this is what we came up with.
Figma | Adnexio
Dean Studio
https://
figma.com
/dean/adnexio
Upskill Dashboard
Figma | Adnexio
Dean Studio
https://
figma.com
/dean/adnexio
Approval Layer Modal
Rebranded with new information architecture, reorganizing side bar navigation, updated icons and some new feature added.
Choice of icon are from MaterialUI. Reasoning for that particular icon is that the 3 small squares represent “skills” and “plus” icon represent additional. Therefore, it aligns with “upskill” where it is a place for people to seek or learn new skills.
The icon on the left are meant to put the course title acronym such as Digital Marketing = DM. The idea here is for user to easily know what are the courses they are browsing at a glance. Course title on the right and below the title are the the applied date so that user can know when they applied.
These status tags allow user to quickly know the current status without having to go deeper into the breadcrumb to find out the current state of the application. There are 3 states available - Approved, Awaiting Approval and Rejected.
The idea for this section is actually related to the employee’s profile score as well as work personality. The score will affect the courses that appear at the recommended list. This is to ensure that the employee has some idea what is best for them to explore or even spark a new interest.
Drawer will slide from the right side when user clicked on any courses available on the list to show the approval layer and status.
Withdraw button using the secondary button type as to not encourage user to click it.
Upskill Progression
Idea Breakdown
Upskill progression are only accesible by Admin (HR). Below are the page layout.
Figma | Adnexio
Dean Studio
https://
figma.com
/dean/adnexio
Upskill Progression Dashboard
Figma | Adnexio
Dean Studio
https://
figma.com
/dean/adnexio
Upskill Progression 2
Figma | Adnexio
Dean Studio
https://
figma.com
/dean/adnexio
Upskill Progression 3
Introducing search box in any table list content are always a plus for users to easily find the desired data. In this case, admin can save time if they know who are they looking for.
A straightforward table design that tells the name of the employee, numbers of courses they enrolled and a CTA “view” for admin to check on individual details.
With the new IA, groups are made to tidy up the sub pages that belongs to the same category. Therefore Upskill Progression are grouped under Performance Centre where anything related to employee growth will reside here.
Breadcrumb are always convenient if there’s sub page within a page. In my case we have 2 sub pages (Dashboard > Individual Employee > Score Breakdown), hence the breadcrumb. Originally, we had 3 sub pages, but decided to just make it as a right side drawer to shorten the flow.
This list will show number of courses for that particular employee enrolled, the statuses as well as their score. The score meter are just to show that the employee are actively engaging in the course and their performance.
This drawer will show the details of the scoring system which is a combination of attendance and assignment submitted. Another tab is assignment submission, this is still in discussion whether should we implement it or not.
Wrap Up
What Next ?
Involving in a revamp project is fun and challenging. Through ideation process, I was able to validate and find out why and how the previous design are made and think of a better solution for UX perspective as well as UI.
I’m happy with the end result and so is the team. This project helped me improved not only my UI design skills, but also my UX research skills.
Discover More
Next Project
Dean Studio
A personal side project portfolio using Framer.
Figma | Dean Studio
Dean Studio
https://
figma.com
/dean/deanstudio
Responsive
Interactive
Figma
Framer
Pacific Trustees
Design a new feature called "Vault" page.
Decoris
