We're baking kustard
ui-design primo-umbrella-mockup

Primo Umbrella

Payroll Management Application

CLIENT

Accentra Technologies Limited

PRODUCT

Primo Umbrella- Payroll

Management Service

PROJECT DURATION

3 Months (Jan 2020 - March 2020)

undraw-co-working

Kustard helped Accentra team to convert their existing web application into an easy-to-use Mobile application. We also revamped the existing web application with a new look and design language.

Our Role:

- UI/UX design for Mobile App
- Web application redesign
ui-design

UX Audit

The existing web application served as the reference point for our team. We identified the flaws in the current user flows, so that they could be simplified in the mobile application.

After initial analysis we found the following areas for improvement:

- Data representation

- UI components not consistent with the latest trends

- Visual Hierarchy missing in certain modules

- Data tables and lists were not aligned correctly

ui-design
sunglasses
blue-wave

Information Architecture

As an initial step in improving the understanding of the existing application, we laid down all the data handled by the system. Once this was done the data was mapped to the relevant screen. This process is known as Information Architecture.

accentra-ia-mockup
accentra-ai-bottom
pink-wave

Wireframe

After the information architecture the team proceeded to the initial wireframing. We identified the components for each screen and the placements for them. This was the perfect time for feedback from the Accentra team.

accentra-wireframe-top
yellow-wave

Visual Language

As an existing application in the payroll space, the brand colors were something which existing Primo Umbrella customers easily identified with. Our team came up with 2 variants for the visual language for the app based on the brand’s color. The visual language builds the character of any product.

V1 accentra-vl-mockup-1
V2 accentra-vl-mockup-2
white-wave

UI Design - App

Accentra team wanted the app to be very intuitive and easy to use. We designed all the components in line with the latest design trends.

free-phone-xi
screen-1

Onboarding Screen

All contractors on Primo Umbrella need to complete an onboarding process before they can start uploading timesheets. This includes verification using some third party services. We combined all the steps into one seamless flow.

screen-2

Empty Screen

The application has various modules in which the data is visible once the user adds few entries into the system. It is important to provide legit feedback to the user in this case. Each module in the application has an empty state screen to provide this information.

screen-3

List View Screen

In a payroll application there is a continuous inflow of data at regular intervals. We arranged the data in intuitive lists by carefully choosing data points that matter the most at the first glance.

screen-4

Detail View Screen

While the user does get important information at a glance, they might want to verify some information which is not a part of the list view. Thus every list item across items would expand to a detailed view, which provided more comprehensive information about that entry.

screen-5

Messages Screen

The Primo Umbrella had a unique way of handling contractor grievances. The contractors could raise a ticket with the support team. These issues are shown to the user as an Inbox of messages.

screen-6

Chat Screen

The home screen is the crux of the entire application. The current version was very cluttered. We dissected the data on the screen and designed a structure which was clean, minimal and easy to use.

OTHER SCREENS

other-screen-1 other-screen-2 other-screen-3 other-screen-4
blue-wave

UI Design - Web

The Prodigal team wanted a fresh look for their application. We identified the major components across the and redesigned them as per current UI trends.

ui-design-web-circle ui-design-web-mockup
accentra-ud-web-screen-1

Onboarding Screen

The home screen is the crux of the entire application. The current version was very cluttered. We dissected the data on the screen and designed a structure which was clean, minimal and easy to use.

accentra-ud-web-screen-2

Pay Calculator Screen

The home screen is the crux of the entire application. The current version was very cluttered. We dissected the data on the screen and designed a structure which was clean, minimal and easy to use.

accentra-ud-web-screen-2

Message Screen

The home screen is the crux of the entire application. The current version was very cluttered. We dissected the data on the screen and designed a structure which was clean, minimal and easy to use.