iconnect360 software user interface redesign
DESCRIPTION
These slides share the redesign process taken by the team when coming up with the new look and feel for the cloud software iconnect360. With a web based software the usability of the design and the user experience were top considerations and extremely important in the design of the system. Our UI UX Developer Ramil Rama shares the process he undertook when doing the redesign to the software and the mobile app that accompanies it too. Ramil Rama is one of our iconnect360 team members based in our Kuala Lumpur, Malaysia office. He is a leading design developer who really cares about creating the best design for the user.TRANSCRIPT
![Page 1: iconnect360 software user interface redesign](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/1.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/2.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/3.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/4.jpg)
Colour Pallet
![Page 5: iconnect360 software user interface redesign](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/5.jpg)
Colour Pallet
![Page 6: iconnect360 software user interface redesign](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/6.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/7.jpg)
Layout & ReadabilityVisual weight can be used so the user can focus on one area
![Page 8: iconnect360 software user interface redesign](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/8.jpg)
Layout & ReadabilityFluid navigation increases readability and faster scanning
![Page 9: iconnect360 software user interface redesign](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/9.jpg)
Layout & ReadabilityPrimary and Secondary Buttons prompts the user on what is the ideal next action
![Page 10: iconnect360 software user interface redesign](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/10.jpg)
Design
![Page 11: iconnect360 software user interface redesign](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/11.jpg)
Design
![Page 12: iconnect360 software user interface redesign](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/12.jpg)
Design iOS app
![Page 13: iconnect360 software user interface redesign](https://reader034.vdocument.in/reader034/viewer/2022052412/5589a0d3d8b42ac9608b4602/html5/thumbnails/13.jpg)
Holistic Visual Language
Desktop Laptop
iOS Devices