Using a WHY-WHAT-HOW model, this material provides a summary of processes required for digital innovation creation which starts with a reason why we should be studying this subject; briefly explains what Computational Thinking (CT), User eXperience (UX) and User Interface (UI) are; and describes step-by-step how to achieve the goal of designing digital innovation through CT, UX and UI design processes.

1. DIGITAL INNOVATIVE
THINKING & CODING
M. Srikulwong
Apple Accredited Personal Development Consultant
Lecturer in Computer Science, University of theThai Chamber of Commerce
Big Idea Challenge App / WebSolution

2. DIGITAL INNOVATIVE
THINKING & CODING
why

3. DIGITAL INNOVATIVE THINKING & CODING
CREATIVITY & DIGITAL INNOVATION
why

4. DIGITAL INNOVATIVE
THINKING & CODING
what

5. What COMPUTATIONAL THINKING
DIGITAL INNOVATIVE THINKING & CODING

6. 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/

7. 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/

8. https://www.coursereport.com/blog/why-a-ui-designer-is-not-a-ux-designer
THE DIFFERENCE BETWEEN UX AND UI

9. DIGITAL INNOVATIVE
THINKING & CODING
how

10. how
DIGITAL INNOVATIVE THINKING & CODING
Big Idea Challenge App / WebSolution
User Experience User Interface
Computational Thinking

11. why
What
how
CREATIVITY & DIGITAL INNOVATION
= COMPUTATIONAL THINKING + UX + UI
DIGITAL INNOVATIVE THINKING & CODING
Big Idea Challenge App / WebSolution

12. DIGITAL INNOVATIVE
THINKING & CODING
how exactly

13. UX
UI 5.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

14. UX
USER EXPERIENCE
Big Idea Challenge App / WebSolution

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

16. 1.1 Interviewing Your Personas

17. 1.1 Interviewing Your Personas

18. 2.User Journey
https://madebymany.com/stories/we-re-building-the-next-stage-of-picle
หนังสือ 1 เล่ม
Post-it จำแนกตามลักษณะงาน

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

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

21. 5.Wireframe
https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
รายละเอียดในแต่ละฉาก (Information)
วาดขาวดำ

22. 6.Site Flow
ผังของทั้งระบบ
นำ Wireframe มาเรียงต่อกัน
https://dribbble.com/shots/2136347-Site-Flow?1436223042

23. 7.User Flow
เส้นทางของแต่ละ Persona
นำ Wireframe มาเรียงต่อกัน
https://newflux.fr/2016/12/13/flow-patterns-un-kit-pour-concevoir-des-user-flows-et-des-sitemaps /

24. UIUSER INTERFACE
Big Idea Challenge App / WebSolution

25. https://www.coursereport.com/blog/why-a-ui-designer-is-not-a-ux-designer
THE DIFFERENCE BETWEEN UX AND UI

26. https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
5.Wireframe
รายละเอียดในแต่ละฉาก (Information)
วาดขาวดำ

27. 5.Wireframe 8.Mockup
Visual design
Branding
Color
Typography
Graphics
Layout
Guidelines
{
B&W Sketch UI Design with Visuals
User
Testing

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

29. 8.Mockup
Usability design
Interaction design
UX Writing{
UI Design with Visuals
9.Prototype
with Interaction
A/B
Testing

30. 9.Prototype
All Functions
with Interaction

31. DIGITAL INNOVATIVE THINKING & CODING
Recap
Big Idea Challenge App / WebSolution
User Experience User Interface
Computational Thinking

32. UX
UI 5.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

33. 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

34. 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
Acknowledgements
SpecialThanks to JuthamasVadhanapanich for a UX/UI Design Lecture