Case Studies

Human Resource and Payroll Management Suite.

Portico is a secure, web-based, fully-hosted application suite customizable to meet client requirements. The suite includes document archive, HR and payroll, expense management, recruitment, eLearning, and payments processing. It has tiered user levels for employee access to their own data, manager’s access to venue data and senior manager access to all company details.

Challenge

To enhancing efficiency and user experience: Overcome time constraints, prioritise key information, embrace mobile-first approach, and personalise cohort dashboards

The app has been developed organically by developers, solely focusing on meeting the specific requirements of their clients. However, they have been unable to dedicate sufficient attention to user experience. This has led to significant challenges faced by their app, prompting them to approach us for assistance in enhancing its overall user experience.

High level goal

To elevate app engagement and drive business growth by prioritising user-centric design, delivering personalised interactions, and enhance the overall user experience.

Project Approach

From definition to delivery

Alignment Workshop

Workshop Expectations

  • To achieve consensus among all the stakeholders.
  • Understand the long-term and short-term business goals,
  • To gather all the existing knowledge about the company (customer reviews,
  • perception about company, challenges)
  • Identify current and expected user segments.
  • Understand stakeholders aspirations, fears and hopes from the UX intervention.
  • To discuss any benchmarks or design inclinations, if any.

Workshop Insights

Product Goals

  • Provide a consistent experience across all modules.
  • The design should offer a robust platform to managers, enabling them to manage and analyze data efficiently.
  • The revamped user experience should help reduce customer queries by 50% related to completing task flows and overall experience.

Success Measures

  • Reduce customer support queries.
  • Increase referral business.
  • Increase app store and Play Store ratings.
  • Reduce training time.

Scope

  • Portico management has proposed a two phase approach, clearly stating the modules to be addressed in each phase. They also expect a mobile first approach.

Expert Review

Task Agenda

The purpose of this document is to highlight existing usability issues in the PORTICO MOBILE APP and suggest improvements to enhance the app’s functionality from a usability standpoint. The goal is to improve the effectiveness and efficiency of the system.

Findings

  • Inconsistent design – all screens look different, confusing users.
  • The overall design (look and feel) lacks contrast and a fresh colour palette.
  • Information architecture needs be improved.
  • Accessibility issues – Font styles lack impact, and the distribution of weights throughout the design is unclear.
  • Effective navigational tools like tabs, hover tooltips, in-app guides are missing, making it difficult to use the app smoothly.
  • Hand-holding assistance is missing.
  • There is a lack of contrast between the foreground and background, resulting in low readability.
  • A loader appears on every action, which creates a negative user experience.
  • Use of inconsistent and complex icons. Icons can be simplified.
  • No search bar option is available.
  • Number of clicks can be reduced to complete a task.
  • Navigation can be improved with better IA.
  • The entire look and feel of the app appears dull and outdated.
  • Visual weight should be given to prioritize the compare button, whether primary or secondary.
  • The use of infographics can improve the presentation of information.

User Segments

Creation of Proto-Persona

The personas covered the goals, pain points, fears and goals of two main user types. This exercise helped us empathize with the users and ideate effectively.

User Stories

Personas capture user attributes, while user stories bridge the gap by defining user intent while considering user attributes. This approach leads to refined feature requirements in user stories.

Information Architecture

It is designed to organize and categorize information in order to improve usability, findability, and enhance the overall user experience within the system.

Card Sorting

This helped us to focus on organising, structuring, and labelling content in an effective way.

Wireflow

Wireflows visually represent user flows and interactions, combining wireframes and flowcharts. They aid in planning and designing user experiences by illustrating navigation paths and screen interactions.

Wireframes

Wireframes were created to provide stakeholders with a foundational structure of the design and to receive feedback on it before proceeding to the visual design phase.

Style Guide

The next plan of action was to create colour palettes and typography that would help communicate the brand’s identity and also give the product an exciting feel.

Visual Design

A high-fidelity prototype was developed for each flow, incorporating the brand color palette and considering usability factors. This prototype provides a convenient way for users to learn and engage with the product.