iconnect360 ux ui redesign
Post on 14-Jul-2015
Embed Size (px)
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
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.
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