← Go BackPortfolio

Neeyamo

Brand, Reimagined Through UX

Scope

Design discoveries, Mood-boarding, Conceptual Thinking, Design trends, User Interviews, Micro-Interactions, Prototyping.

Duration

8 weeks

Year

2022

Role

Product Designer

When Neeyamo set out to modernise their brand for a new generation of users, we were brought in to reimagine the website experience. It began with an intensive week-long discovery workshop, the foundation for truly understanding the business and the people it serves.

Service desk article

Trending Events

Let's Explore The Best Global Payroll & HRO Events Around The Globe

February 5-8, 2022 | Chennai, India

Let's Work Together - A New Remote World

02
Days
:
18
Hours
:
30
Mins
:
00
Secs
Let's Work Together
Let's Understand Payroll Management
Physical Event
Student testimonials
Thank you mailer

Workflows

01
Discovery
Understand the business, users and the problem space.
→
02
UI Audit
Review the current site for gaps, debt and inconsistencies.
→
03
Design Trends Research
Explore current patterns, references and directions.
→
04
Concepts
Shape insights into multiple design directions.
→
05
Final UIs
Refine and hand off polished, responsive screens.
Scroll inside
Neeyamo concept, desktop
Neeyamo concept, mobile

Final Designs

Scroll inside to view the complete UI

Press and Media Landing Page
Press and Media landing page, full UI
Events Landing Page
Events landing page, full UI
CSR Landing Page
CSR landing page, mobile
Events Listing
Events listing, mobile
Contact Us
Contact us, mobile

Style Guide

During the revamp of the website we have curated few new colours, gradients and button styles referring to existing brand guidelines of the site. Whitespace was used generously to give prominence to the content and simple fonts like Avenir Next and Arial were used. To bring in the real life connection human imageries were added.

Typography

Font Family Selection

Avenir NextSANS SERIF
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
~!@#$%^&*()_+-={}[]?:;"',./\<>
ArialSANS SERIF
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
~!@#$%^&*()_+-={}[]?:;"',./\<>

Font Pairing Breakdown

Heading Font - Avenir Next
Body - Arial
Links/Buttons - Avenir Next

Type Scale

The type scale will be based on an 8pt scale, using 16px as the base font-size

Display

Used for desktop

Display - 58px
Demi Bold

Heading Bold

Heading 1 - 48px Bold
Heading 2 - 40px Bold
Heading 3 - 32px Bold
Heading 4 - 24px Bold   Heading 5 - 20px Bold

Heading Demi Bold

Heading 1 - 48px Demi Bold
Heading 3 - 32px Demi Bold   Heading 5 - 20px Demi Bold

Paragraph Medium

Body 1 - 24px MediumBody 2 - 20px MediumBody 3 - 16px Medium

Body Italic

Body 1 - 24px ItalicBody 2 - 20px ItalicBody 3 - 16px Italic

Body Copy

These fonts can be used both for mobile and desktop

Body Heading Large - 16px BoldBody Heading Small - 16px BoldLABEL - 14PX SEMIBOLD CAPFooter - 12px Regular

Color Palette

Neutral

These colours are used as supporting secondary colours in Backgrounds, text colours, seperators, modals etc

0#FFFFFF
50#CAD8ED
900#45546B

Primary

This primary colour palette is used across all the interactive elements such as CTA's, links, inputs etc

50#F2F7FF
300#CAD8ED
500#8CAAD7
700#0B5ED7
900#031B3D

Gradient

This gradient is used for bold headings, background banner etc

#0B5ED7#BAD80A

Warning

Can use for error messages, text field error labels etc

#ED1C29
Components

Button Styles

Main interactive call to action on the page

Primary Buttons
DefaultExplore More
HoverExplore More
PressedExplore More
Secondary Buttons
DefaultExplore More
HoverExplore More
PressedExplore More
Dark Buttons
DefaultExplore More
HoverExplore More
PressedExplore More
All Topics▾
Payroll++
Time & Attendance
Benefits
Relevance▾
Latest
Toggle
Checkbox✓

Live site

https://www.neeyamo.com/
Scroll inside
Neeyamo live homepage