Scribd
Upload
67 views39 pages

User Experience (UX) - 1

This document outlines the agenda for a hackathon on user experience (UX) design. The agenda includes five sessions: [1] an introduction to UX; [2] discussing good and bad examples of product UX using bananas and Google Search; [3] an overview of the design thinking process; [4] a hands-on session with sticky notes and user flow diagrams; and [5] a session on prototyping techniques like sketching, wireframing, and clickable mockups. The goal is to help participants understand UX design principles and use design thinking to solve problems and prototype solutions.

Uploaded by

Mohammad Kaml SH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
67 views39 pages

User Experience (UX) - 1

This document outlines the agenda for a hackathon on user experience (UX) design. The agenda includes five sessions: [1] an introduction to UX; [2] discussing good and bad examples of product UX using bananas and Google Search; [3] an overview of the design thinking process; [4] a hands-on session with sticky notes and user flow diagrams; and [5] a session on prototyping techniques like sketching, wireframing, and clickable mockups. The goal is to help participants understand UX design principles and use design thinking to solve problems and prototype solutions.

Uploaded by

Mohammad Kaml SH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

19/11 GLOBAL SHAPERS - H A I FA HUB H A C K AT H O N

User Experience

(UX)​
By Hasan Heidar
AGENDA H A C K AT H O N

№01 №04

Intro to UX Hands On

№02 №05

The Good & The Bad Prototyping

№03

Design Thinking
19/11 GLOBAL SHAPERS - H A I FA HUB H A C K AT H O N

Intro to UX

1
INTRO TO UX H A C K AT H O N

What is User Experience (UX)?

- The design of experiences for users.

- An experience is any interaction someone can have with a product.

-Users? Anyone.

-Product? Any product.(Not only digital)


19/11 GLOBAL SHAPERS - H A I FA HUB H A C K AT H O N

The Good & The Bad

2
THE GOOD & THE BAD H A C K AT H O N

Product which built to satisfy our needs looks


impressive, right?

But what that actually mean? And how anyone


can design that?
THE GOOD & THE BAD H A C K AT H O N

It's time for examples :)

Let's think about something easy to use.


THE GOOD & THE BAD H A C K AT H O N

A Banana
THE GOOD & THE BAD H A C K AT H O N

A Banana

Comes with a case

Can be eaten when and wherever

It's mobile

Are not messy


THE GOOD & THE BAD H A C K AT H O N

A Banana

Comes with a case

Can be eaten when and wherever

It's mobile

Are not messy

Built-in accurate visual cue


THE GOOD & THE BAD H A C K AT H O N

A Banana

Green Banana

Wait a little longer


THE GOOD & THE BAD H A C K AT H O N

A Banana

Green Banana Brown Banana

Wait a little longer Waited too long


THE GOOD & THE BAD H A C K AT H O N

A Banana

Green Banana Brown Banana Yellow Banana

Wait a little longer Waited too long It's time :)


THE GOOD & THE BAD H A C K AT H O N

A Banana

Designed to be obvious
THE GOOD & THE BAD H A C K AT H O N

GOOGLE Search Engine


THE GOOD & THE BAD H A C K AT H O N

GOOGLE Search Engine

Type
THE GOOD & THE BAD H A C K AT H O N

GOOGLE Search Engine

Type Hit the Enter key


THE GOOD & THE BAD H A C K AT H O N

GOOGLE Search Engine

Type Hit the Enter key Done!


THE GOOD & THE BAD H A C K AT H O N

WhatsApp Delete Message


THE GOOD & THE BAD H A C K AT H O N

Apple Magic Mouse


19/11 GLOBAL SHAPERS - H A I FA HUB H A C K AT H O N

3
Design Thinking
DESIGN THINKING H A C K AT H O N

Phase 1 Phase 2 Phase 3 Phase 4 Phase 4

Empathize Define Ideate Prototype Test


DEMO E X P L O R AT I O N

Empathize Prototype

-Research your users' needs. -Start to create solutions.

Define Test

-State your users' needs & problems. - Try your solutions out.

Ideate

-Challenge assumptions and create ideas.


DESIGN THINKING H A C K AT H O N
DESIGN THINKING H A C K AT H O N

1997

Started a rental system that shipped


directly to customer's mailboxes

No need to leave the house

Subscription model to keep the DVDs as long as


they wanted and to avoid late fees
DESIGN THINKING H A C K AT H O N

After 10 years

1997 2007

Started a rental system that shipped


directly to customer's mailboxes

No need to leave the house

Subscription model to keep the DVDs as long as


they wanted and to avoid late fees
DESIGN THINKING H A C K AT H O N

1997 2007

Started a streaming services and brought


entertainment to where the customer
was, when they wanted, on demand

It can be streamed on computers, mobile


phones, tablets, smart TVs …

Powerful algorithm to personalize content and


recommended movies & shows

Supported by powerful users data & analytics

Creating its own proprietary content


19/11 GLOBAL SHAPERS - H A I FA HUB H A C K AT H O N

Hands On

4
HANDS ON H A C K AT H O N

Sticky notes

- You better know something about the problem before

you bother trying to solve it!

- Write all the pain points

- Write all the features that your product will have.


DEMO E X P L O R AT I O N

User Flow Diagram


DEMO E X P L O R AT I O N

User Flow Diagram

www.creately.com
19/11 GLOBAL SHAPERS - H A I FA HUB H A C K AT H O N

Prototyping

5
P R OT OT Y P I N G H A C K AT H O N

How to make it real?


P R OT OT Y P I N G H A C K AT H O N

Phase 1 Phase 2 Phase 3

Sketch Wireframe Clickable Mockup


P R OT OT Y P I N G H A C K AT H O N

Sketch

Start making your app different pages


P R OT OT Y P I N G H A C K AT H O N

Wireframing

Use the following website to make

your design looks better.


P R OT OT Y P I N G H A C K AT H O N

Prototype

Make your product real!

Tools: Adobe XD, Figma, Canva,


Adobe Photoshop.
19/11 GLOBAL SHAPERS - H A I FA HUB H A C K AT H O N

Any question?
19/11 GLOBAL SHAPERS - H A I FA HUB H A C K AT H O N

Thank you
Hasan Heidar

You might also like