UI/UX for Mobile @valentinerutto -ValentineRutto- 

ABOUT ME ● Android Developer ● Fashion model ● Poet @valentinerutto [email protected] @valentinerutto Linkedin | github | twitter Medium | Instagram | FB 

UI/UX for Mobile User centered design @valentinerutto -ValentineRutto- 

○ Eliciting feedback on usability ○ Validating concepts ○ Clarifying vision 

What is UI/UX? ● UI(user interface) The look and feel of an application ● UX (user experience) Is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product. 

“UI/UX is like a joke, if you have to explain it then it is not working” 

UX DESIGN PROCESS User centered design 

“Designing is not something that you just create and start using it. Draw and draft and redraw and redraft, thus creating an unmatched experience.” “To be a great designer, you need to look a little deeper into how people think and act.” — Paul B 

No content

UX DESIGN PROCESS: 1-UNDERSTAND ACTIVITIES ● Meet, talk, observe and understand users in their environment ● Analyze requirements to understand and clarify them ● Define user personas and use-cases OUTCOMES ● User persona a fictional representation of your ideal customer ● Use cases ● User stories -user journey 

UX DESIGN PROCESS: 1-UNDERSTAND User Persona Use case 

UX DESIGN PROCESS: 2-RESEARCH ● Understand market competition ● Learn about your domain ● Get inspirations and ideas from your competitors” 

UX DESIGN PROCESS: 2-RESEARCH ACTIVITIES ● Study of competitors’ approaches ● Research on similar features in the world ● Analysis of latest UI/UX trends, design principles and rules ● Keep an eye on your own UX guidelines OUTCOMES Ideas and material on which you can build your design on 

UX DESIGN PROCESS: 3-SKETCH ACTIVITIES ● Generate ideas and work on basic sketches ● Brainstorming sessions with stakeholders to get their feedback from technical perspective ● Re-draw sketches and re-test them with stakeholders OUTCOMES ● Sketches ● Wireframes, Mockups ● User flows 

UX DESIGN PROCESS: 3-SKETCH 

UX DESIGN PROCESS: 4-DESIGN Activities ● Design UI images ● Define final theme, specs, and guidelines required for implementation ● Design icons to display on screens Outcomes ● Design images ● Detailed design specs like colors, theme, styles, guidelines ● Icons 

UX DESIGN PROCESS: 5-IMPLEMENT Activities ● Implement back-end functionality and front interface Outcomes ● Developed UI with complete functionality and experience following the designed theme and style 

UX DESIGN PROCESS: 6-EVALUATE Design team validates the product in terms of user flow and experience and identify areas where improvements are needed. Activities ● Go through the flow and feel the experience ● Perform a comparison of implementation and defined interface Outcomes ● User feedback ● UI audit reports ● Areas marked where improvement is required 

UI DESIGN 

Decluttering ● Keep the content and interface elements to a minimum ● minimal information doesnt overwelm users ● Use the technique of progressive disclosure to show more options 

Decluttering 

Speed and Responsiveness ● Loading time is important in UX ● 47% of users expect a page to load in 2secs or less 

Skeleton screens Vs loading indicator ● SS-Shows your app is fast and responsive ● LI-Shows something is happening ● A skeleton screen fills out the UI as content is loaded incrementally. 

OFFER A VISUAL DISTRACTION ● Users pay less attention to the wait itself ● Like interesting animations 

PERMISSIONS ● Avoid asking permissions at the start of your application unless it is crucial for your app ● Ask for what your application clearly needs ● Explain why your app needs the permision if not obvious ● Always ask permision in context 

Permission ● Always ask in context Prompt users to accept permissions only when they try to use the feature 

Optimize Push Notifications 

Optimize Push Notifications ● Push the value Users won’t mind getting notifications, as long as the value they get is sufficiently greater than the interruption 

Optimize Push Notifications ● Time your notificatios The best time for push notifications is peak hours of mobile usage: from 6:00 pm till 10:00 pm. 

Optimize Push Notifications ● Use other channels 

Prototyping tools Invision Adobe xd sketch 

RESOURCES ● UI design Inspiration Uplabs Dribble Muzli material.io guide to mobile app design 

Thank You…!!!! [email protected] @valentinerutto Linkedin | github | twitter Medium | Instagram | FB