iconnect360 UX UI Redesign
•Download as PPTX, PDF•
0 likes•300 views
The document discusses the goals and challenges of redesigning the iconnect360 app. The goals were to improve user happiness, readability, navigation, and front-end code standardization while removing unnecessary elements. The redesign adopted a flat design approach using a simplified color palette and layout to make the content easily readable on different devices and guide users through the app in a consistent manner.
Recommended
More Related Content
Viewers also liked
Viewers also liked (8)
Similar to iconnect360 UX UI Redesign
Similar to iconnect360 UX UI Redesign (20)
Recently uploaded
Recently uploaded (20)
iconnect360 UX UI Redesign
- 1. iconnect360 redesign Goals, challenges and how we come up with the fresh makeover By Ramil Rama, UI UX Developer, iconnect360
- 2. Goals • Happy users ;) • Readability • Less is more, get rid of noise • Navigation • Front-end code standardisation • Laying foundation - Theme customisation, Mobile visual language
- 3. 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
- 6. 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
- 7. Layout & Readability Visual weight can be used so the user can focus on one area
- 8. Layout & Readability Fluid navigation increases readability and faster scanning
- 9. Layout & Readability Primary and Secondary Buttons prompts the user on what is the ideal next action
- 10. Design
- 11. Design
- 12. Design iOS app
- 13. Holistic Visual Language Desktop Laptop iOS Devices
Editor's Notes
- Users/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
- 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 pattern
- 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 app
- Here 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 canvas
- This 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 bottom
- Having 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 doesn’t know what is more important on the two
- Here are some design samples of what the iconnect 360 is now, that youd probably seen already
- 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 better