Transcript
Page 1: iconnect360 software user interface redesign

iconnect360 redesignGoals, challenges and how we come up with the

fresh makeover

By Ramil Rama, UI UX Developer, iconnect360

Page 2: iconnect360 software user interface redesign

Goals

• Happy users ;)• Readability • Less is more, get rid of noise• Navigation• Front-end code standardisation • Laying foundation - Theme customisation,

Mobile visual language

Page 3: iconnect360 software user interface redesign

Flat Design

• It’s the “in” thing (For a reason)– Simple, doesn’t get in the way– Performance (Especially for mobile)– Front-end coding cost: Upfront & Long term– Clear typography

Page 4: iconnect360 software user interface redesign

Colour Pallet

Page 5: iconnect360 software user interface redesign

Colour Pallet

Page 6: iconnect360 software user interface redesign

Layout & Readability

• The content must be the first thing the user would notice

• The user must be guided on what to do next• Use white space rather than borders to

separate objects• Consistency of the layout throughout the app

Page 7: iconnect360 software user interface redesign

Layout & ReadabilityVisual weight can be used so the user can focus on one area

Page 8: iconnect360 software user interface redesign

Layout & ReadabilityFluid navigation increases readability and faster scanning

Page 9: iconnect360 software user interface redesign

Layout & ReadabilityPrimary and Secondary Buttons prompts the user on what is the ideal next action

Page 10: iconnect360 software user interface redesign

Design

Page 11: iconnect360 software user interface redesign

Design

Page 12: iconnect360 software user interface redesign

Design iOS app

Page 13: iconnect360 software user interface redesign

Holistic Visual Language

Desktop Laptop

iOS Devices


Top Related