Ubann

Home > Portfolios > UX/UI > Ubann

Ubann

'อยู่บ้าน' เป็น e-commerce App ที่สร้างขึ้นเพื่อตอบสนองผู้ที่ชอบเลือกซื้อของแต่งบ้าน ที่ในปัจจุบันมีทางเลือกที่หลากหลาย จึงอยากรวบรวมและนำเสนอ Experience ของคนที่ชอบแต่งบ้าน ไม่ว่าจะเป็น การซื้อ การขาย รวมไปถึงการแบ่งปันความรู้ เรื่องราวเกี่ยวของแต่งบ้าน หรือเคล็ดลับเฉพาะ ให้มาอยู่ในที่เดียว เพื่อความสะดวก และสร้าง community ใหม่ต่อผู้ใช้งาน

Prototype Figma

Mobile Apps (Case study)

Roles

UX Research, UX Design, UI Design

Duration

4 weeks (Mid-2022)

Tools

Figma, Illustrator, Photoshop

Design Process

ขั้นตอนการทำงานนี้ได้เลือกใช้ “Design Thinking” มาใช้ เพื่อขั้นตอนในการทำงานจะได้
วางแผน วิเคราะห์และมองเห็นถึงปัญหา เพื่อให้ไดตรงตามความต้องการของผู้ใช้งานให้ได้มากที่สุด

Empathy

ขั้นตอนนี้เพื่อให้เข้าใจผู้ใช้งานและกลุ่มเป้าหมาย โดยการทำ User Research
จึงเลือกวิธีการเก็บข้อมูลแบบ Qualitative Research (การวิจัยเชิงคุณภาพ) ที่เป็นการเก็บจากแหล่งข้อมูลขนาดเล็ก ให้สอดคล้องกับเวลาที่ทำ และเลือกเก็บข้อมูลด้วยการสัมภาษณ์กับตัวบุคคล เพื่อที่จะได้สังเกตและถามผู้ใช้งาน ถามถึงความต้องการ โดยจะหาคำตอบจากศูนย์ แบบที่จะไม่ใช้อคติส่วนตัว

Interview Questions

ตอนนี้คุณอยู่ที่พักอาศัยแบบไหน ?
อยู่กันกี่คน ใครบ้างคะ ?
แยกห้องนอนกันมั้ยหรือนอนรวมกัน ?
ปกติใครเป็นคนซื้อของแต่งบ้าน ?
ชอบของที่พ่อกับแม่ซื้อมามั้ย ทำไมเล่าให้ฟังหน่อยว่าเป็นยังไง ?
เคยได้ช่วยพ่อแม่เลือกซื้อของเข้ามามั้ย ?
แล้วในห้องเราก็เคยเลือกซื้อของเองมั้ย ?
ปกติเลือกซื้อของแต่งห้องจากที่ไหน ทำไมถึงซื้อที่นี่ ?
แล้วของชิ้นเดิมเอาไปไว้ไหน เคยเอาลงขายมั้ย ?
เวลาเลือกซื้อของแต่งห้อง จะไปดูที่ไหน ?

Define

เพื่อให้ได้กำหนดปัญหาของผู้ใช้งาน จึงได้เลือกการวิเคราะห์โดยการทำ

Empathy Map เพื่อจะได้เข้าใจผู้ใช้งานในหลากหลายมุมมอง

User Journey Map เพื่อที่จะได้เจาะลึกไปยังรายละเอียดในแต่ละขั้นตอนของเส้นทางนั้น ๆ แบบเห็นภาพ (Visualize) ทำให้เราสามารถวิเคราะห์หาปัญหาต่าง ๆ ที่เกิดขึ้นเพื่อออกแบบใหม่ได้ง่ายดายและดีกว่าเดิม

User Personar เพราะจะสามารถให้ได้ภาพที่ชัดเจนได้ของกลุ่มเป้าหมายที่จะใช้งานของเราจริง ๆ

User Personar

Empathy Map

User Journey Map

Ideate

เมื่อได้วิเคราะห์ข้อมูลจากขั้นตอน Define แล้ว จึงได้ทำการระดมไอเดียเพื่อแก้ปัญหา และได้หาแนวทางออกได้หลากหลายแนวทาง จนได้เลือกมาเป็น สร้างแอปพลิเคชัน เพื่อให้ตอบโจทย์กับ feature ใช้เพื่อแก้ปัญหา และตอบโจทย์กับพฤติกรรมของกลุ่มเป้าหมายที่ใช้มือถือในการเลือกซื้อสินค้าอยู่แล้ว

User Flow

Prototype

หลังจากได้ไอเดีย ขั้นตอนนี้จะได้ทำการนำมาขึ้นโครง โดยเริ่มจากทำ Low-fidelity wireframes คร่าวๆ จากนั้นจึงขึ้นเป็น Medium-fidelity wireframes ขั้นตอนสุดท้าย High-fidelity wireframe ที่จะมีรายละเอียดที่เหมือนจริง กำหนด wording ที่ใกล้เคียงกับงานจริงมากที่สุด และในขึ้นตอนนี้ เพื่อการออกแบบให้ทำงานอย่างมีระบบ ได้เริ่มมีการกำหนด Design System จะทำให้ในแต่ละหน้าที่ออกแบบมมีความสอดคล้อง (consistency) ไปในทิศทางเดียวกันอีกด้วย

Low-fi wireframes

Mid-fi Wireframes

Visual Design

เมื่อได้มีการออกแบบ Mid-Fi Wireframe แล้ว ขั้นตอนนี้จึงได้ทำการออกแบบ Hi-fi wireframe ได้ลงสี และใส่รายละเอียดข้อมูลเสมือนจริง

โดยคู่สีที่เลิือกใช้ ได้เลือกสีที่ Contrast ผลรวมที่ได้มารตฐาน เพื่อการมองเห็นของผู้ใช้งานที่สายตาปกติและ ตาบอดสี ตามหลัก WCAG (Web Content Accessibility Guidelines)