0

10

20

30

40

50

60

70

80

90

95

96

97

98

99

100

%

This is where our story begins

Someone looks curious...

Fetching our secrets...

Ring...! Ring...! Ring...!

Jewels on our crown !

'Ello There Mate !

Primo Umbrella

Kookies 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.

Client

Accentra Technologies Limited

Project Date

Jan 2020 -
March 2020

Category

UI/UX Design
Website 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

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.

Wireframes

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.

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.

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.

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.

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.

Detail View Screen

While the user does get
important information at
a glance, they might want to
verify some information.

Thus every list
item across items
would expand to
a detailed view.

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 a
the first glance.

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.

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.

UI Design - Website

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

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.

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.

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.