DIGITAL INNOVATIVE

THINKING & CODING

M. SrikulwongApple Accredited Personal Development Consultant

Lecturer in Computer Science, University of the Thai Chamber of Commerce

Big Idea Challenge App / WebSolution

DIGITAL INNOVATIVE

THINKING & CODING

why

DIGITAL INNOVATIVE THINKING & CODING

CREATIVITY & DIGITAL INNOVATION

why

DIGITAL INNOVATIVE

THINKING & CODING

what

What COMPUTATIONAL THINKING

DIGITAL INNOVATIVE THINKING & CODING

What

DIGITAL INNOVATIVE THINKING & CODING

USER EXPERIENCE (UX) - HOW A

PERSON FEELS WHEN THEY INTERACT WITH YOUR PRODUCTS / SYSTEMS

http://blog.rillusion.com/10-reasons-user-experience-ux-design-is-important/

What

DIGITAL INNOVATIVE THINKING & CODING

USER INTERFACE (UI) - THINGS THAT A PERSON

WILL ACTUALLY SEE AND INTERACT WITH YOUR PRODUCTS / SYSTEMS

http://bluehillresearch.com/four-tips-for-designing-a-user-interface/

https://www.coursereport.com/blog/why-a-ui-designer-is-not-a-ux-designer

THE DIFFERENCE BETWEEN UX AND UI

DIGITAL INNOVATIVE

THINKING & CODING

how

how

DIGITAL INNOVATIVE THINKING & CODING

Big Idea Challenge App / WebSolution

User Experience User Interface

Computational Thinking

why

What

how

CREATIVITY & DIGITAL INNOVATION

= COMPUTATIONAL THINKING + UX + UI

DIGITAL INNOVATIVE THINKING & CODING

Big Idea Challenge App / WebSolution

DIGITAL INNOVATIVE

THINKING & CODING

how exactly

UX

UI5.Wireframe 8.Mockup 9.Prototype

1.Persona 2.User Journey 3.User Story 4.Scenario 5.Wireframe

6.Site Flow 7.User Flow

ตัวละคร บรรยายลักษณะละเอียด

หนังสือ 1 เล่ม Post-it

จำแนกตามลักษณะงาน

บท 1 บท เขียนเป็นประโยคเน้นเป้าหมาย

ซีน 1 ซีน Sketch /

Storyboard

รายละเอียดในแต่ละฉาก วาดขาวดำ

ผังของทั้งระบบ เส้นทางของ แต่ละ Persona

ต้องทำ User Testing เพื่อทดสอบ เส้นทางทั้งหมดใน Site / User Flow

ตามจำนวน User Story

B&W Sketch UI Design with Visuals with Interaction

User

Testing

A/B

Testing

USER EXPERIENCE

USER INTERFACE

นำ Wireframe มาเรียงต่อกัน

1.1 สัมภาษณ์

Product

Testing

Big Idea Challenge App / WebSolution

UXUSER EXPERIENCE

Big Idea Challenge App / WebSolution

1.Persona ตัวละคร บรรยายลักษณะละเอียด

1.1 Interviewing Your Personas

1.1 Interviewing Your Personas

2.User Journeyhttps://madebymany.com/stories/we-re-building-the-next-stage-of-picle

หนังสือ 1 เล่ม Post-it จำแนกตามลักษณะงาน

3.User Story บท 1 บท เขียนเป็นประโยค เน้นเป้าหมาย

4.Scenario ซีน 1 ซีน Sketch / Storyboard

5.Wireframe

https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/

รายละเอียดในแต่ละฉาก (Information) วาดขาวดำ

6.Site Flow ผังของทั้งระบบนำ Wireframe มาเรียงต่อกัน

https://dribbble.com/shots/2136347-Site-Flow?1436223042

7.User Flowเส้นทางของแต่ละ Personaนำ Wireframe มาเรียงต่อกัน

https://newflux.fr/2016/12/13/flow-patterns-un-kit-pour-concevoir-des-user-flows-et-des-sitemaps /

UIUSER INTERFACE

Big Idea Challenge App / WebSolution

https://www.coursereport.com/blog/why-a-ui-designer-is-not-a-ux-designer

THE DIFFERENCE BETWEEN UX AND UI

https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/

5.Wireframe รายละเอียดในแต่ละฉาก (Information) วาดขาวดำ

5.Wireframe 8.Mockup

Visual design Branding Color Typography Graphics Layout Guidelines

{B&W Sketch UI Design with Visuals

User

Testing

8.Mockup UI Design with Visuals

https://images.freecreatives.com/wp-content/uploads/2016/07/Fancy-Mobile-App-p-UI-Mockup.png

8.Mockup

Usability design Interaction design UX Writing {

UI Design with Visuals

9.Prototype

with Interaction

A/B

Testing

9.PrototypeAll Functions

with Interaction

DIGITAL INNOVATIVE THINKING & CODING

Recap

Big Idea Challenge App / WebSolution

User Experience User Interface

Computational Thinking

UX

UI5.Wireframe 8.Mockup 9.Prototype

1.Persona 2.User Journey 3.User Story 4.Scenario 5.Wireframe

6.Site Flow 7.User Flow

ตัวละคร บรรยายลักษณะละเอียด

หนังสือ 1 เล่ม Post-it

จำแนกตามลักษณะงาน

บท 1 บท เขียนเป็นประโยคเน้นเป้าหมาย

ซีน 1 ซีน Sketch /

Storyboard

รายละเอียดในแต่ละฉาก วาดขาวดำ

ผังของทั้งระบบ เส้นทางของ แต่ละ Persona

ต้องทำ User Testing เพื่อทดสอบ เส้นทางทั้งหมดใน Site / User Flow

ตามจำนวน User Story

B&W Sketch UI Design with Visuals with Interaction

User

Testing

A/B

Testing

USER EXPERIENCE

USER INTERFACE

นำ Wireframe มาเรียงต่อกัน

1.1 สัมภาษณ์

Product

Testing

Big Idea Challenge App / WebSolution

Site Flow / User Flow Flow Patterns http://uxmovement.com/products/flow-patterns-make-site-flows-in-fine-visual-detail/ Sketchappsources https://www.sketchappsources.com 10 Pattern Sites https://www.caxy.com/blog/10-ux-pattern-sites-for-inspiration

Wireframe & Mockup Marvel https://marvelapp.com Wireframe.cc https://www.wireframe.cc UXPin http://www.uxpin.com 10 Free Wireframe Tools http://mashable.com/2010/07/15/wireframing-tools/#x5N_cHp1JZqz

Prototype Adobe XD http://www.adobe.com/products/experience-design.html Invision https://www.invisionapp.com

Tools

CourseReport (www.coursereport.com)Careerfoundry (www.careerfoundry.com)Dribble (www.dribble.com)Scale360 (https://www.scale360solutions.com)Pixabay https://pixabay.com/en/users/sasint-3639875/

References

www.slideshare.net/mayureesrikulwong

AcknowledgementsSpecial Thanks to Juthamas Vadhanapanich for a UX/UI Design Lecture