Business overview

Birthmark คือบริษัท Digital Agency ที่เก่งเรื่องการทำ Online Marketing ผ่าน Social Media ต่างๆ อาทิ Facebook, Google, Line หรือ Linked In ลูกค้าของ Birthmark ประกอบด้วยธุรกิจหลากหลายประเภท หลากหลายขนาด เช่น ธุรกิจอสังหาริมทรัพย์ ร้านขายปลีกมอเตอร์ไซต์ ฯลฯ

Requirement

ทาง Birthmark อยากปรับปรุงหน้าเว็บไซต์เดิมให้มีหน้าตาที่สวยงาม มีลูกเล่น Effect ที่เหมาะสมกับ Branding ของบริษัท นอกจากนี้ยังต้องการให้เราปรับปรุง SEO ของเว็บเดิมให้ดียิ่งขึ้น

Process

Design

01. Sitemap & Wireframe

หลังจากได้รับบรีฟจากลูกค้า ทีมได้เริ่มจากการนำปัญหาและข้อเสนอแนะที่ได้มา นำมา research จากตัวเว็บเดิมที่มีอยู่ก่อนว่าพอมีข้อมูลตรงไหนที่ควรเก็บไว้และข้อมูลไหนควรตัดออกไปเพื่อให้ตรงตาม objective ของลูกค้า

จากนั้นทีมได้เริ่มสร้าง sitemap ของเว็บไซต์เพื่อดูโครงสร้างของข้อมูลที่จะมีในเว็บไซต์ และนำข้อมูลที่ได้มาสร้างเป็น low fidality wireframe เพราะเป็นเว็บไซต์หน้าเดียว และไม่ได้มีข้อมูลที่ซับซ้อน จากนั้นจึงเริ่มออกแบบหน้าตาการใช้งาน (User Interface) ในทุกๆ ขั้นตอนการทำงาน เราจะมีการ confirm กับลูกค้าก่อนเริ่มไปขั้นตอนถัดไปทุกครั้ง

[Low-fidelity wireframe]

02. User interface design

ก่อนเริ่มขั้นตอนการออกแบบ ทีมจะเริ่มจากการนำเสนอ moodboard ให้ลูกค้าเลือกสไตล์ที่ชอบ เมื่อได้สไตล์ที่ลูกค้าชอบมาแล้ว ทีมจะเริ่มออกแบบโดยเริ่มจากการทำ styleguide ของเว็บไซต์เพื่อให้เว็บไซต์ทั้งหมดดูเป็นไปในทิศทางเดียวกัน (Consistency) เพื่อ represent ตัวตนของแบรนด์ให้ได้มากที่สุด

หลังจากที่ได้ Styleguide แล้วทีมจะเริ่มออกแบบหน้าตาเว็บไซต์ (User interface) ในเว็บไซต์ Birthmark ทีมได้เลือกใช้มีที่มีความหลากหลาย สื่อถึงตัวแบรนด์ที่ทำงานให้กับหลากหลายลูกค้า อีกทั้งยังนำเสนอผ่านทาง symbolic ที่สื่อถึงความเป็น digital media agency เช่น icon Like, play เป็นต้น

Development

เราทำ Website อย่างพิถีพิถันให้รายละเอียดตรงกับไอเดียของ Designer มากที่สุด (Pixel Perfect) ดังนั้นทุก Element จะถูกทำขึ้นมาใหม่ทั้งหมด ไม่ได้ใช้ Template อย่างเว็บไซต์ทั่วๆไป 

เราเลือกใช้ React.js ซึ่งเป็น Framework ที่ถูกพัฒนาโดย Facebook และเป็นที่นิยมอย่างมากในวงการ Website Development  ทำส่วน Frontend ของเว็บไซต์  และใช้ Next.js ในการทำ Serverside Rendered ให้เว็บไซต์ดีต่อการทำ SEO ในส่วนของ Backend เราใช้ Node.js ในการทำ API และวางระบบทั้งหมดไว้บน Firebase หนึ่งใน Service จาก Google Cloud Platform ซึ่งเป็นหนึ่งใน Cloud Service ที่ม่ี Reliability สูงมากที่สุดในโลก