KloudData

KloudData is a leading global software solutions provider with comprehensive, leading-edge capabilities in Enterprise, Analytics and Mobility solutions.

July 2016 - Dec 2016

Visit website

My Role

Task Flow
Information Architecture
Wireframes
High Fidelity Mockups
Design Prototype
Infographics design

Challenge

Main challenge is to drive genuine traffic towards the website and improve digital marketing to get business and improve lead cycle.

The new website should be interactive, easy to use and compatible with all the devices.

We want to create a design system which is attractive, intutive and easy to maintain.

Overview

Current KloudData website was done a while back and we found that we are struggling with following pain points :

Old design and not upto the latest trends
It was lagging the engagement part
Hard to navigate and also quite hard to maintain
Unable to aceess the insights we offer like solution sheets, success stories, blogs, news and videos from our experts.

We jot down all the points to find a resonable solution to this.

Major UI/UX Challenges - Inconsistent page layouts

The overall layout of the pages differs from each other. There is no consistency in overall page layout. Similar set of pages too have different layout.

Major UI/UX Challenges - Confusing Navigation structure

Navigation is also too confusing. Tabs/sub links are hidden inside the pages.

Major UI/UX Challenges - Overall design doesn't attract enough user attention

Use of improper graphics/images/colour lacks user attention.

Information architecture

Tried to listed down all the possible links of the website
Categorized the navigation structure
Arranged the navigation as main page > sub page > sub sub page etc
Divided the navigation into various sections, so as to find the information easily

Wire framing the page layouts

Structured the page layouts keeping design/development and page conversion in mind.
The pages which has similar type of content has been identified, so as to keep consistency between them.
Each page has kept some common elements as header/banner/intro section/main content/CTA/footer etc.
Identified the common design patterns which can used as page demands.

Atomic design system

As Brad Frost says "Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner"

Our Design/Development is loosly basen on this principle. This helps us to iterate faster and we can easily plug-n-plug to achieve the desired outcome. Following figure illustrates this : (https://bradfrost.com/blog/post/atomic-web-design/)

Atomic Design Methodology Diagram. B. Frost http://bradfrost.com/blog/post/atomic-web-design/

Atoms

These are foundation building blocks that comprise of all our interface elements which act as a base for us.

Logo/colour palette

Text styles

Grid system

Buttons/icons/form elements

Molecules

These composed of atoms which form a simple group of UI elements functioning as a unit. We started to build parts of our layout from these.

Organisms

More complex elements form as an organism, which consists of atoms/molecules or other organism itself. These are mostly all components which are getting used throughout the website.

Templates

Templates are set of page level objects which consists of various components which act as a design structure. Now we are getting a good shape of our page layout.

Pages

Various templates form a page, which is a real UI representation of content. The actual pages of our website which comprise of all the elements.

Infographics

I also made some of the infographics for this dedicated section.

Outcome

Increase in website traffic
Increase in conversion rate
This all converts into leads which results in projects received.