UX/UI What is UX and UI? UX Process User Research User Research - - PowerPoint PPT Presentation

▶
ux ui what is ux and ui ux process user research user
SMART_READER_LITE
LIVE PREVIEW

UX/UI What is UX and UI? UX Process User Research User Research - - PowerPoint PPT Presentation

Jan 23, 2024 332 likes •1.02k views

UX/UI What is UX and UI? UX Process User Research User Research Creating User Profiles (Personas) Competitive Analysis User Goals & Business Goals Information Architecture Wireframing & Interaction Design

slide-1
SLIDE 1

UX/UI

slide-2
SLIDE 2
  • What is UX and UI?
  • UX Process
  • User Research
  • User Research
  • Creating User Profiles (Personas)
  • Competitive Analysis
  • User Goals & Business Goals
  • Information Architecture
  • Wireframing & Interaction Design
  • Testing
  • Setting up tasks
  • User testing
  • Analysing
  • Revise and Test
slide-3
SLIDE 3
  • UI Process
  • Getting Brief from UX
  • Visual Design
  • Devices/Canvas
  • Corporate Identity (CI)
  • Font/Color
  • Layout
slide-4
SLIDE 4
  • What is UX and UI?
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
  • UX Process
slide-10
SLIDE 10
  • User Research
  • User Research
  • Creating User Profiles (Personas)
  • Competitive Analysis
  • User Goals & Business Goals
  • Information Architecture (IA)
  • Wireframing & Interaction Design
  • Testing
  • Setting up tasks
  • User testing
  • Analysing
  • Revise
slide-11
SLIDE 11
  • User Research
slide-12
SLIDE 12
  • User Research*** (Heart of UX)
slide-13
SLIDE 13

Target Group Journey

กลุ้มลฺกค๊าทั้วไป1 General People 1

slide-14
SLIDE 14

Target Group Journey

กลุ้มลฺกค๊าทั้วไป2 General People 2

slide-15
SLIDE 15

Target Group Journey

slide-16
SLIDE 16

Web Users

  • กลุ้มลฺกค๊าทั้วไป1
  • Freelance (Engineer/Interior/Architect)
  • Call Centre
  • Consult
  • Sale

General People

slide-17
SLIDE 17

Prioritise!

slide-18
SLIDE 18

Find Out More ! (as much as possible)

  • Which device they are using to check through the site?
  • How old they are?
  • Which gender is your main target user?
  • What do they think?
  • What functions would be helpful for them if there is

any?

  • …
slide-19
SLIDE 19
  • Creating User Profiles (Personas)
slide-20
SLIDE 20

ลฺกค๊าทั้วไป(1) กรอายู 35 แต้งงาน ยางไม้มึลฺก กรเป่น เจ๊าของร๊านกาแฟ ชอบทิอะไรด๊วยตาวเอง พีถึพีถานในทูกๆอย้าง ไม้ชอบวุ้นวายกาบใคร กรเพิ้งซื๊อบ๊านในหมู้บ๊านแต้ต๊องการตกแต้ง เอง จะได๊บ๊านในแบบที้ต๊องการ ค้อยๆทิ กรเริ้มเสีรํทหาข๊อมฺลทางอีนเทอรํเน่ต กรอ ยากทราบว้าต๊องใช๊สึแบบไหนยางไงราคา เท้าไหร้ มึกี้ประเภท ต้างกานยางไง ข๊อดึข๊อ เสึยคุออะไร มึเฉดสึอะไรให๊เลุอกบ๊าง และ จะไปซื๊อได๊ที้ไหนได๊บ๊าง มึตาวอย้างคนที้ใช๊ มั๊ย ความคีดเห่นเป่นอย้างไร ข๊อดึข๊อเสึย แรงบานดาลใจต้างๆในการใช๊สึนี๊ และมึสึ อะไรที้เอามาใช๊ด๊วยกานได๊บ๊าง

Primary Target Audience

General People 1 Nop is 35 year old. He is married. He has no kid. He is the owner of coffee

  • shop. He love to do things by
  • himself. He does things meticulously.

He is individualist. He just brought a new house but he would love to redecorate it as his style. He started to look for information on the internet. On paint, he wants to know which type of paint, which shade, what are the differences, what are pros and cons on each, and sample of using those shade.

slide-21
SLIDE 21

Freelancer เบล อายู 26 ปึ เบลเป่น interior freelance designer เบลต๊องหา ข๊อมฺลเรื้องสึและอาพเดทนวาฒกรรม สีนค๊าตลอดเวลาเพื้อจะได๊มึข๊อมฺล ไปเสนอและให๊คิปรืกษาแก้ลฺกค๊า เบลต๊องเลุอกเฉดสึที้จะเอามาใช๊ บางทึไม้มึ Color Fan ก่ต๊องเปีด เทึยบดฺเอาจากเว่บจากapp ถืงจะ ไม้ค้อยตรงมาก แต้ก่พอได๊ค้าสึไป เทึยบจรีงๆอึกทึที้ร๊าน

Secondary Target Audience

Freelancer Bell is 26 year old. She is a interior freelance designer. She has update her knowledge on innovation and colours of paint so she can give advise to clients. Sometimes she does not have color fan in hands she has to look up color from an application and note down color code then compare to the real paint again at the shop.

slide-22
SLIDE 22

Call Center , Sale ต๊องคอยตอบคิถามลฺกค๊า เลยต๊อง ไปลองเล้นลองดฺ ว้ามึอะไรตรงไหน จะได๊ตอบคิถามได๊อย้างรวดเร่ว และมึประสีทธีภาพ และอาพเดท ข๊อมฺลสีนค๊าบ๊างเวลาที้ยางไม้ถฺกเท รนดํ

Tertiary Target Audience

They have to answers questions from clients which sometimes they look for product on the website. They have to know what clients are talking about, which product, and where it is in the

  • site. Sometimes there is new product

that sales have not get to train they can update their knowledge via information on the site.

slide-23
SLIDE 23

Key Functions

  • Find Product and Information
  • Find Retail Store
  • Contact (Call Center, Sale Person, Live Chat)
  • Get Color Code and Specification
slide-24
SLIDE 24
  • Competitive Analysis
slide-25
SLIDE 25

Competitive Matrix

COMPETITIVE ANALYSIS

Brand Ecommerce Responsive Color Trends Site Search Content Blog Live Chat บริการออกแบบสี app แต่งบ้าน หน้ารวมE-Catalog หาร้านค้า กลุ่มลูกค้า Contact/Complain Project Ref. ผสมสี Social Media Language #Yes

TOA No แต่มีProduct Detail (มี related product) No Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes No มีแต่ต้องเข้าไปดู ในแต่ละproduct Yes Yes คนทั@ว ั@วไป Architecture Architecture Designer Designer Engineer Engineer ผู้ร ู้รับ ับเห เหมา Yes (Online) Yes (Online) Yes Yes อยู่ใ ู่ใน About About Yes Yes Yes Yes (Fb,Twitter,g+, (Fb,Twitter,g+, pinterest,youtube) pinterest,youtube) No

11

Beger No แต่มีProduct Detail (มี related product) No Yes Yes Yes Yes Yes Yes ดีม ีมาก Yes Yes Yes Yes Yes (On web + Yes (On web + Download) Download) Yes Yes Yes Yes คนทั@ว ั@วไป No (มีข้อมูลที@ footer ที@เดียว) Yes Yes Yes Yes Yes (Fb,youtube) Yes (Fb,youtube) มีแ ีแปะเป เป็น ็นfeed feedบนหน้า ้าhome home No

12

Jotun No แต่มีProduct Detail (มีคํานวณปริมาณสี ) Yes Yes Yes Yes Yes Yes Yes Yes ดีม ีมาก No No Yes (On web) Yes (On web) No มีแต่ Tech.Sheet Yes Yes อยู่ใ ู่ใน About About คนทั@ว ั@วไป Professional Professional Yes (Offline) Yes (Offline) No Yes Yes Yes (Fb) Yes (Fb) Yes Yes (เป เปลี@ย ี@ยนเว เว็บ ็บเป เป็น ็น ประเท เทศนัFน ัFนไปเล เลย)

11

Dulux ICI No แต่มีProduct Detail (มีหาตัวแทนจําหน่าย,คํานวณปริมาณ) Yes Yes Yes Yes Yes Yes Yes Yes ดีม ีมาก No Yes Yes Yes Yes No Yes Yes คนทั@ว ั@วไป DIY DIY Yes (Online) Yes (Online) มี มี E-Letter E-Letter No Yes Yes Yes (Fb,twitter Yes (Fb,twitter ,pinterest) ,pinterest) No

11

Nippon Paint No มีหน้า Product แต่ไม่มี Product Addaptive Addaptive Yes Yes No แต่มีsitemap No No Yes Yes No No Yes Yes คนทั@ว ั@วไป DIY DIY Architecture Architecture Auto Auto Industrial Industrial Yes (Online) Yes (Online) มี มี Quick Ask Quick Ask No Yes Yes Yes (Fb) Yes (Fb) Yes EN/TH Yes EN/TH

9

Captain No แต่มีProduct Detail No No No No No No Yes Yes No No Not Specific Yes (Online) Yes (Online) มี มี complain online complain online No Yes Yes Yes (Fb) Yes (Fb) มีแ ีแปะเป เป็น ็นfeed feedบนหน้า ้าhome home No

4

JBP No แต่มีProduct Detail No (Use Flash) No มีแต่ตัวอย่างห้อง No Yes Yes No Yes Yes No No Yes Yes Not Specific Yes (Online) Yes (Online) มี มี E-Letter E-Letter Yes Yes แต่ไ ่ไม่ด ่ดี Yes Yes No No

5

Pammastic No แต่มีProduct Detail No No No No No No Yes Yes No มีแต่ Tech.Catalog Yes Yes อยุ่ใ ุ่ใน Service Service Not Specific Yes (Offline) Yes (Offline) No No No No

3

จระเข้ No โปรดักเป็นหนัาแยกเป็นmicrosite ใช้งานยากมาก (แต่มีเปรียบเทียบโปรดัก) No No No Yes Yes No No No Yes Yes ดี ดี No แต่มี Logo ร้านค้า Not Specific Yes (Online) Yes (Online) Yes Yes ในแผ่น ่นดาวน์โ ์โหลด และ และ ในเว เว็บ ็บไม่อ ่อัพเด ัพเดท No No Yes EN/TH Yes EN/TH

5

Hato No No No No Yes Yes น้อ ้อยมาก No No No No มีแต่ต้องเข้าไปดู ในแต่ละproduct No Not Specific Yes (Online) Yes (Online) Yes Yes แต่ไ ่ไม่ด ่ดี No Yes (Fb Yes (Fb ,pinterest) ,pinterest) Yes EN/TH Yes EN/TH

5

slide-26
SLIDE 26

Competitor#1 : Beger

slide-27
SLIDE 27

Competitor#1 : Beger

Beger ทิเว่บเพื้อให๊คนทั้วไปกลุ้ม1 ใช๊เป่นหลาก เมื้อเทึยบกาบ TOA

slide-28
SLIDE 28

Competitor#1 : Beger

มึการจาดลิดาบความสิคาญของ ข๊อมฺลไม้ถฺกต๊องทิให๊ ผู๊ใช๊เข๊าถืง ข๊อมฺลที้ต๊องการได๊ยาก

slide-29
SLIDE 29

Competitor#2 : Dulux

slide-30
SLIDE 30

Competitor#2 : Dulux

Dulux ทิเว่บเพื้อให๊คนทั้วไปกลุ้ม1 ใช๊เป่นหลากเช้นกาน เมื้อเทึยบกาบ TOA

slide-31
SLIDE 31

Competitor#2 : Dulux

slide-32
SLIDE 32

Competitor#2 : Dulux

slide-33
SLIDE 33

Competitor#3 : จระเข๊

เปรึยบเทึยบสีนค๊า

slide-34
SLIDE 34

Competitor#3 : จระเข๊

คินวณวาสดูที้ต๊องใช๊ในฉาบ/ทา ในแบบต้างๆ

slide-35
SLIDE 35

Competitor#3 : จระเข๊

Project Reference ที้แบ้ง Category back

slide-36
SLIDE 36
  • User Goals & Business Goals

back

slide-37
SLIDE 37
  • Information Architecture (IA)
slide-38
SLIDE 38

Home

Product About Download Gallery Contact Product Detail

back

slide-39
SLIDE 39
slide-40
SLIDE 40

www.cotto.com/site/grande/

slide-41
SLIDE 41
  • Wireframing
slide-42
SLIDE 42
slide-43
SLIDE 43
slide-44
SLIDE 44

back

slide-45
SLIDE 45

www.cotto.com/site/grande/

slide-46
SLIDE 46
  • Interaction Design
slide-47
SLIDE 47
slide-48
SLIDE 48
slide-49
SLIDE 49
slide-50
SLIDE 50
  • Testing
slide-51
SLIDE 51
  • Setting Up Tasks
slide-52
SLIDE 52
  • Task 1 : Purchase yellow lamy roller ball pen.
  • Task 2 : Process to check out
  • Task 3 : Find store near by
  • Task 4 : Add Store’s Line
slide-53
SLIDE 53

Paper Testing

slide-54
SLIDE 54

Prototype Testing

slide-55
SLIDE 55

https://youtu.be/Bq1rkVTZLtU https://youtu.be/9wQkLthhHKA https://youtu.be/V8LNDqMIapY

slide-56
SLIDE 56

Tools

  • Paper
  • https://usabilityhub.com
  • https://www.invisionapp.com
  • Sketch
  • Experience Design CC
slide-57
SLIDE 57
  • UI Process
slide-58
SLIDE 58
  • Getting Brief from UX
slide-59
SLIDE 59
  • Visual Design
slide-60
SLIDE 60
  • Devices/Canvas
slide-61
SLIDE 61
slide-62
SLIDE 62
  • Corporation Identity (CI)
  • Font/Color
slide-63
SLIDE 63
slide-64
SLIDE 64
  • Layout
slide-65
SLIDE 65
slide-66
SLIDE 66

Case Study