iconnect360 UX UI Redesign

Download iconnect360 UX UI Redesign

Post on 14-Jul-2015

23 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

<p>PowerPoint Presentation</p> <p>iconnect360 redesignGoals, challenges and how we come up with the fresh makeover</p> <p>By Ramil Rama, UI UX Developer, iconnect360</p> <p>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.</p> <p>So the emphasis of our new redesign is the content, make it easier for the user to spot what is important to them</p> <p>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.</p> <p>Changing the layout and moving the action buttons to where the user would find it easily</p> <p>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</p> <p>We also consider future branding or customization for the new design when coding</p> <p>2Flat DesignIts the in thing (For a reason)Simple, doesnt get in the wayPerformance (Especially for mobile)Front-end coding cost: Upfront &amp; Long termClear typography</p> <p>So after considering all the points from our goals we arrived at using a flat design</p> <p>This design uses flat colours than gradient ones, and removes layers of unwanted borders which hinders user eyes from scanning the content quickly</p> <p>Minimal codes means faster load time</p> <p>Easy to change the code and is future proof</p> <p>Typography is very important for readability</p> <p>3Colour Pallet</p> <p>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</p> <p>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.</p> <p>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.</p> <p>Sample is we can use the 75% for a mouseover of a button, use 50% for disabled etc.</p> <p>4Colour Pallet</p> <p>These are the other colour pallets use in the pattern5Layout &amp; 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 </p> <p>Again content is king for the redesign</p> <p>Next slides should explain this</p> <p>White space is very important for readability, it gives the user time to breath when scanning content</p> <p>Holistic approach on design, for the user to have familiarity throughout the app6Layout &amp; Readability</p> <p>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:</p> <p>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</p> <p>While on the right the user is forced to focus on the whole canvas7Layout &amp; Readability</p> <p>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 &amp; Readability</p> <p>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</p> <p>As for the right one the user doesnt know what is more important on the two9Design</p> <p>Here are some design samples of what the iconnect 360 is now, that youd probably seen already10Design</p> <p>Design iOS app</p> <p>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</p> <p>DesktopLaptopiOS Devices13</p>