Build Wireframes and Low Fidelity Prototypes

What the deck covers:
- Problem and goal statement.
- Storyboarding
- Low-fidelity and high-fidelity design.
- Principles of information architecture.
- Implicit bias and deceptive patterns in design.

Transcript

1. Build Wireframes and Low Fidelity Prototypes @bethanyjep
2. Bethany Jepchumba • Academic Cloud Advocate 🥑 at Microsoft, for AI & ML • Freelance designer – on break 🔔 • @bethanyjep 📫
3. What we will cover today Problem and goal statement. Storyboarding Low-fidelity and high-fidelity design. Principles of information architecture. Implicit bias and deceptive patterns in design.
4. Problem Statement What does your design aim to solve?
5. [They] need to [this] because [fact/insight].
6. Example: as a businessman I need to sell my product online because that is where my customers are *
7. __________ need to ____________ because ________
8. Goal Statement
9. Goal Statements • What specific action will users take when they visit your application/product? • Who will the action affect? • What positive impact will the action have in solving the users' needs? • How do you measure success of the action performed?
10. Example: our donations app will let users donate second-hand clothes which will affect how users dispose clothes by giving them a platform to give back to those in need, which will be measured by number of donations successfully delivered.
11. Our _____ will let users ______ which will affect _________ by _________. We will measure the product effectiveness by ________
12. Storyboarding
13. Once Upon a Time.....
14. Why Stories Memorable and Relatable
15. Components of a Story • Users - [characters] • Setting/Context of the story. The where and what. • Plot – solution, what does your product offer? • Narrative – journey from challenge to victory
16. big picture vs close-up storyboards. • a “big picture” storyboard shows a user in a setting. • a “close up” storyboard shows interactions with the app screens.
17. Storyboarding Time - https://www.storyboardthat.com/
18. Information Architecture Defining every path users take as they navigate through the application.
19. How do you define the route a user takes? - draw.io Duke University Library Information Architecture
20. 8 principles of information architecture by Dan Brown Exemplar - cognitively, users process items in categories Multiple Classification - design should offer different ways to access information Focused Navigation - each menu should strategically and logically be deisgned to aid in navigation Growth - design to accommodate future changes, scalability
21. 8 principles of information architecture by Dan Brown • Object – it is living, evolves and changes • Choice – Hick's law, the more the choices, the harder the decision making • Disclosure – show enough information that users can be able to process and pique their interest to learn more. • Front door - not everyone will land directly in your homepage, hence each page should be standalone
22. Low vs High Fidelity Prototype • Fidelity is how your design matches the look and feel of the final product • Therefore, low fidelity is a less refined/polished design compared to high fidelity
23. low-fidelity - handrawn
24. Low-fidelity - balsamiq
25. low-high fidelity - Figma
26. hi-fidelity
27. “We must judge the value of our design work by the impact it has on the world, good or bad — and it’s up to you to be aware of that impact.” Mike Monteiro
28. Questions?
29. Thank you! @bethanyjep