This document discusses the importance of prototyping for designing better user experiences for web and mobile. It explains that prototyping helps engage users early, understand how they want to use products, and identify needs, wants, and interaction preferences. Both low-fidelity and high-fidelity prototyping are discussed. User-centered design and prototyping tools like InVision are also covered, with InVision highlighted as a tool that allows for easy design presentation and collaboration.

1. DESIGN BETTER EXPERIENCES FOR
WEB & MOBILE
by Ahmed Badran
@ahmed_badran

2. What's Prototype ?

3. LO-FI vs HI-FI
LO-FI Prototype

4. LO-FI vs HI-FI
HI-FI Prototype

5. UCD & Prototyping
As envisaged by the
business owner
As specified in the requirements As designed by the senior analyst
As produced by the
developers
As finally implemented What the user actually needed

6. Engages users
From the beginning to the end of
a project
Understands
How users want to use the
product
Identifies
Needs and wants
Interaction preferences

7. How Prototyping helps User Centered
Design.
Emphasise: User
involvement – they’re the
ones going to use the
system!
Improve Design concepts Refine: User interactions
Information design Navigation
model

8. Prototyping Softwares

9. But we still missing the most
important thing

10. But we still missing the most
important thing
USER INTERACTION :(

11. Designers in love with ...
Because Presentation is Everything :)

12. Upping your presentation-game can really
make a difference in ..
● How your clients perceive the quality you’re delivering .
● The quality of feedback they can provide.

13. Control of Your Design
- Present your web/mobile products as an
actual browsing experience
- Control over how others see your designs

14. 1. Easy to use by both Client and Designers
1. Real-time design presentation & collaboration
1. Simplify the feedback process by having clients and stakeholders comment
directly on your designs.
1. InVision turns feedback into tidy to-do lists.
1. Actual Mobile / Web Experience
1. Version control and sync for all your design files .
Invision Benefits

17. Real-Time To-Do lists

18. Actual Mobile experience
● Fixed Navbar
● Link screens
● GESTURES
● Transitions

19. Version History and Syncing

20. Who loves Invision too ?

21. Let’s Walkthrough Invision

22. Thank You :)