HRMS Deck Revamp — Updated Grids, Personalisation and Facelift
Prologue
This story is about our product of Human Resources Management System (HRMS) and it’s boring landing/utility page. We call it deck. This page was built to give quick access to the users to their regular functions with HRMS like applying leave, checking company announcements, company policies, list of holidays etc. as well as provide some social connectivity with company updates, gallery, videos etc.
During the course of this project we did entire redesign of the deck.
This was a long project, took around 6 months of team effort to deliver it.
Problem
Our internal survey suggested that people hardly use the announcement boards, blogs, videos etc posted on our HRMS.
In short — it was boring HR utility page with all cards looking same, not at all exciting or productive !
Our one of strategic customer had great marketing and event photoshoots, videos and information which they wanted their employees to consume and enjoy.
Since our landing page/Deck was also typical old school/get your job done kind of, it was not attracting their employees despite of having great content, we needed an upgrade !
But it was not so easy due to lot of constrains in existing systems !
We had to do it without compromising its customisations, permission based views and backend of deck. Reason was that, many of our current customers were already using current deck and if we change it suddenly with hard release it would mess up their system.
So we had to keep both versions of deck, for anyone who wants to use old, they still should be able to do it.
Upgrade a Complex Customisable system with mesmerising looks without changing most of its features. Wicked Problem !
State Before Upgrade
It was simple 2 X 2 Card based layout.
Automatic Arrangement and moderation was easy because cards just placed themselves one after another. So, whichever card was not visible to a user, it simply did not exist in queue but it did not change the experience.
Say you run a firm and you are admin of deck. You want to show to first level employees only, leave management, calendar, announcements and youtube video card, you can set permissions from admin accordingly.
About content, calendar and leave management automatically fetches data from system so it does not need input. But Announcements and Youtube video does need content, so there you have to put the source link from where content would come and display on data. These employees of yours will see that content on their cards.
It was getting little bit boring as well as confusing since there were no sections or organisation as well.
Brainstorming & Solution
I started by listing out all the cards and its features that currently existed.
So we had around 30 cards which were showing information from multiple modules, blogs, videos, drive files, emails, social media, gallery etc.
Now, initial layout was simple 2 X 2 design where user can change card’s order. but it was simple since all cards had same size, whenever a card was not shown to someone it was simply replaced by card after it.
To experience how different users with different permissions see the deck, I asked a business analyst in my team to help me create multiple views of deck from different companies and people with different rights.
This gave me the perspective that how different a deck can be for different people and how one content is important for one persona and completely invisible for another.
From our research before this project it was suggesting that if company had engaging content to show apart from boring “self marketing” videos, they would actually watch it.
I decided to put my past experience with automatically generating grids in work.
I had to come up with a system which can be automised with minimal input but also isn’t mundane. After trying many combinations and sketches, I came to a solution where grid was autogenerating but also had multi size cards.
The Grid
Group of Cards
Since nothing was categorised in original deck, it wasn’t fast and productive enough.
We decided to give ability to group the cards. This ability was configurable in such way that, admin can decide if they want to group the cards the way they want to or let employees group based on their needs. This added extra flexibility.
This group of cards was called a “section”.
In section, it was allowed to change background color or put an image to make it more attractive.
Personalisation with brand colours and pictures
Deck is first thing you encounter for your formal tasks with your company. We needed it to be felt more personalised with company’s visual assets. Hence, we provided the configuration to update fonts, primary color of action items, background of a section etc. So that deck looks more like it belong to the company and not any third party tool.
Redesign and Configuration of Cards
Each card was separately designed and developed having its own configurations and inputs. We also added extra features such as widgets, headers and footers.
Website-ish Look
After configuring all sections and small things such as quick links names, sections/card names and fonts. Deck truly looks like a company website and not any boring portal.
Glimpse of Wireframes
Here deck is divided between two major sections, one Intranet — for quick utility and another, What’s New for company engagements.
This is made from actual configuration a client had for their deck just with content and pictures replaced a little.
Certain popular sections like gallery, webcast (videos), blogs and job were designed custom to make them more attractive for users. Admin could use them if they please.
Impact
Our strategic client put this into user and it was instant hit. Their team loved it the way we were put recognised people, their event photos and videos. Now it was truly looking personalised without losing any old features. Their HR team also liked the way there were able reflect the company culture on first app their employees use when they start work.
Learning
There is lot to mention over here about this project. One thing I learned is that, redesign of a big product needs very clean and precise documentation. You have to make sure you don’t miss any single feature or detail. Best way to team up and document entire process so that you can have a guide when you feel stuck or lost or can’t figure out why what was done.
Next steps
Since this was custom made for that customer, we did not improve our special modules card which not used by this customer. Next we would take on to those and pitch this deck to our all customers world wide.
