HReasily
The Case Study
THE CHALLENGE
The client approached us with the objectives of a UX / UI optimisation project. The ask would be redesigning the critical user interactions for the daily interactions and usages, and not a full redesign of the platform. And we were to address these challenges facing the current system.
PLATFORM OVERALL GOAL
"How could we increase the engagement to the platform?" "How might we provide a tailored experience that allows the users to see what’s most important to them?"
The main goal was to make sure that we addressed modularity and the ability of the product to evolve. We wanted to deliver an intuitive go-to platform to users that could scale with their business goals.
THE DISCOVERY
WHAT I DID
As a team, we started with a meeting with all the stakeholders involved in this project. As this was a product that some of them were already using themselves, it allowed me to gather initial requirements from the key user types - The Admin and The Staff (the employee), that would be utilising the platform.
A dummy account was provided to us to familiarise ourselves with the system where we could try out various user flows. It was through this trial and error, I further understood the complexities of the platform.
The discovery phase was a quick, high‐intensity effort that allowed me to define project scope, audit the existing platform, review the competitor landscape, understand the client's needs.
COMPETITIVE REVIEW + UX AUDIT
I had to work fast and work smart to understand the product and market. The UI team tackled the research on good designs and design systems, while I researched on user flows. As most of these systems needed an account that had to be filled with actual data with bank details, I opted out of that and did google search on how certain flows worked (eg apply leave, submit a claim). For some of the flows within the system which needed sensitive information to be keyed in, I got the client to screen record and share with us. The UI team and I worked on Google Slides so that there was easy access to view and discuss our research findings.
USABILITY HEURISTICS
After collecting generative research, I to move forward to getting a deeper understanding of the platform. I conducted a Usability Heuristic Evaluation using Nielsen’s 10 Usability Heuristics.
The Admin Homepage
The Staff Homepage
Upon logging in, the user lands on the Homepage, with unopened boxes. Therefore the user needs to click to expand each one individually, taking up time which could lead to frustration. Empty state boxes/forms are displayed, making the user wonder if they need to populate/ action. There is also no clear differentiation between an Admin user or a Staff user.
The two most commonly violated heuristics on the platform were:
-
Loading time for each screen, and each click action takes very long. There are no indicators to show that the system is loading either (eg, a spinning wheel, or loading bar).
-
Every action required the user to click to expand the box (this particular module was utilised throughout the whole platform).
-
The left navigation menu was represented by icons with a lack of labels.
Visibility of System Status
-
There is no quick access to the key user flow actions (eg apply claim, apply leave etc). The User needs to click to expand boxes individually which was extremely tedious and time-consuming.
Flexibility and Efficiency of use
Click link to view: Usability Heuristic Evaluation
"How might we provide a tailored experience that allows the users to see what’s most important to them?"
THE DEFINITION AND DEVELOPMENT
CREATIVE SOLUTIONS
As a group, we carried out a number of timed sketching sessions to think of creative solutions to our problem. We started with the most creative and then worked on the ideas and feature sets. We combined a number of ideas in the end to form our final solution.
I brainstormed together with the team and agreed that for a system like this, a Dashboard view as the first page would be useful for the user (Admin and Staff), as well as incorporating widgets that users could move around to personalise. (Concurrently, this then allowed the team to kick start on some initial design ideas to start on the UI proposals. )
FOCUSING ON FLOWS
Apply Leave
Apply Claim
There was a huge gap (some up to 7 screens!) between an Application call-to-action button to the actual Application screen itself. Let's not forget overall the slow system. This on top of the lack of clear left navigation made it extremely frustrating to complete ONE action.
With the proposal of the dashboard view with widgets, this made the Application Flows much more clearer. Staff apply > Admin Approve > Summary on both Staff and Admin screens.
An example of the newly proposed Application Flows shows that they were inter-dependent between each user (Staff and Admin). The UI designer used these user flow to help structure what screens were needed to be designed.
The focus for the user journeys for the Admin and Staff included:
-
Landing page
-
Leave application and approval process
-
Claims submission process
-
Time and attendance feature
On the Desktop View, there was an instance which I discovered the Payroll flow had what looked like an infinite-scroll page of expand boxes for entry user actions.
Not only did I composite the 'infinite-scroll' screens to better understand each element within the flow, I physically printed it out and stuck them all together to show the literal breath of information the user would have to go through. (That's 9 pieces of A3 paper sheets stuck together!). I took this to the client and immediately this further 'sealed the deal' that we were on the right track to go ahead with the newly proposed user flows.
INFORMATION ARCHITECHTURE
On the face of it, the user's journey seemed simple (with the lack of information on the first load main homepage.) I uncovered the complexity behind the flow. This allowed us to hide this complexity from the user and provide them with a simple and easy to use product with the proposal of the dashboard view.
Existing system with complex flows
Revised sitemap with Dashboard view as Homepage
The UI Designer checked back frequently with me on the flows and relied heavily on the revised IA to redesign the key flows and screens
VISUAL DESIGN
I worked closely with the UI designer, who took the user flows and designed them to fit within the visual system of a larger rebrand that they proposed. I did not create the visual designs below but just including them to give an indication of the design UI work.
TALKING TO USERS
We wanted to find out how the real users would react to the new redesign. The client narrowed down 4 of their biggest users (types) for us to interview face-to-face. We shared the design screens with them and asked them:
-
How would they go about to apply leave or claim?
-
And what was their overall feel for the first log-in page?
After the usability test, I referred back to my notes and recordings and then synthesized the data collected.
WHAT WE WERE DOING RIGHT
Definitely moving in the right direction
(Pointing to left
navigation) Now is logical way to get to things, can find things easily.
I know what to do when logged in.
ROOM FOR IMPROVEMENT
What do these icons mean?
I am not comfortable to have my money displayed upfront.
Where are some of the buttons that were from the previous system?
Overall interviewees felt that the new design screens were more modern and user-friendly. Upon first load of the page, they understood that it was their Dashboard, and therefore a summary of entry points that needed immediate actions.
Moving forward, they addressed the need for an easy to understand On-boarding processes and Action flows while including new Super Admin and employee flows. We could also add a form of tooltips, clear notifications/error messages, sorting/chunking of information, and potentially include the training module.
These findings were shared with the team and they refined the visuals based on the feedback
POLISHING THINGS UP
The mock for testing
SENSITIVE INFOMATION
Both the clients and the users interviewed mentioned they were not comfortable to show their payroll information upfront.
The CTA button to manage their payroll would lead the user into the page for viewing instead at their discretion
The iteration
USER VIEW SELECTION
Both the stakeholder and the users interviewed want to switch easily between admin and staff view. Rather than placing at bottom of left navigation, it is moved to the top as this is the first action user would be taking before looking at the dashboard
The mock for testing
The iteration
THE DELIVERY
DESIGN. CHECK. REPEAT.
The heavy work of the working file in Sketch was done by the UI designer with me checking the file after each version before the final handover.
I also looked at the details right down to the icons set and made sure that each stroke was outlined to ensure that when they were used as symbols in various sizes, the line weight would re-size consistently.
THE RESULT
Together with the UI team, we developed the prototype, and finalised the final file for the handover.