iconnect360 ux ui redesign

Download iconnect360 UX UI Redesign

Post on 14-Jul-2015




0 download

Embed Size (px)


PowerPoint Presentation

iconnect360 redesignGoals, challenges and how we come up with the fresh makeover

By Ramil Rama, UI UX Developer, iconnect360

GoalsHappy users ;)Readability Less is more, get rid of noiseNavigationFront-end code standardisation Laying foundation - Theme customisation, Mobile visual languageUsers/Clients that are happy usually spread the news to their peers about the software.

So the emphasis of our new redesign is the content, make it easier for the user to spot what is important to them

The old design has so many noise that the user find it difficult to navigate. Colours was not consistent, borders everywhere breaks the users navigation flow.

Changing the layout and moving the action buttons to where the user would find it easily

The goal is not only to change what the user would see but the current codes as well, organizing it better so it would be easy for future changes and making the size as small as possible so it would be faster to load

We also consider future branding or customization for the new design when coding

2Flat DesignIts the in thing (For a reason)Simple, doesnt get in the wayPerformance (Especially for mobile)Front-end coding cost: Upfront & Long termClear typography

So after considering all the points from our goals we arrived at using a flat design

This design uses flat colours than gradient ones, and removes layers of unwanted borders which hinders user eyes from scanning the content quickly

Minimal codes means faster load time

Easy to change the code and is future proof

Typography is very important for readability

3Colour Pallet

Flat colours are self explanatory, so we only use flat and no gradient or textured colours, this get rids of using images as an alternative making the file size bloated. That could also be the difference between having 5 lines of codes to just 1 line

We use the same colour for the iconnect360 logo as the primary colour to have the brand experience, and a neutral secondary colour to compliment the primary one.

Out of the two colours we added subsets by using opacity create more colours. Its easier to make colours like this than having to just pick a random colour a designer likes.

Sample is we can use the 75% for a mouseover of a button, use 50% for disabled etc.

4Colour Pallet

These are the other colour pallets use in the pattern5Layout & ReadabilityThe content must be the first thing the user would noticeThe user must be guided on what to do nextUse white space rather than borders to separate objectsConsistency of the layout throughout the app

Again content is king for the redesign

Next slides should explain this

White space is very important for readability, it gives the user time to breath when scanning content

Holistic approach on design, for the user to have familiarity throughout the app6Layout & Readability

Visual weight can be used so the user can focus on one areaHere are a few samples on the layout and patterns we added to the new design:

Visual weight and layout patterns can guide a user what to focus on, like the one on the left, the users eyes will force the user to focus the content body

While on the right the user is forced to focus on the whole canvas7Layout & Readability

Fluid navigation increases readability and faster scanningThis is a sample of how to guide a users eyes into faster scanning by placing the controls or content from left to right and top to bottom8Layout & Readability

Primary and Secondary Buttons prompts the user on what is the ideal next actionHaving more weight on the color for the confirm button, prompts the user that it is the most ideal action to make

As for the right one the user doesnt know what is more important on the two9Design

Here are some design samples of what the iconnect 360 is now, that youd probably seen already10Design

Design iOS app

We changed the mobile app also to have the same design as the one in the desktop, making the branding and familiarity for the user better12Holistic Visual Language

DesktopLaptopiOS Devices13