1. เริ่มคุย เก็บความต้องการ

ก่อนเริ่มงาน โดยส่วนใหญ่ลูกค้าจะแจ้งความต้องการ เป็น TOR มาว่าต้องการทำอะไรบ้าง แต่ถ้าเป็นลูกค้าที่ไม่มีประสบการณ์ในงานนี้ ก็จะไม่มี TOR ลักษณะการพูดคุยจะเป็นการเก็บข้อมูลว่าลูกค้าต้องการอะไรบ้าง โดยส่วนใหญ่งานทำเว็บทั่วไป สามารถอธิบายทางโทรศัพท์ได้ ถ้ามีเอกสารประกอบสามารถส่งมาทางอีเมล info@bangkoksolutions.com ได้เลย แต่สำหรับงานระบบที่มีระบบเดิมอยู่แล้ว ต้องการปรับปรุงหรือสร้างระบบใหม่ ลูกค้าจะแชร์การทำงานของระบบเดิม Flow งาน ปัญหาที่พบ และรูปแบบของระบบใหม่ที่ต้องการ

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

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

ในขั้นตอนนี้ อยากให้ลูกค้าแจ้งงบประมาณที่ตั้งใจลงทุน เพื่อให้เราสามารถประมาณเนื้องานตามที่ลูกค้าคาดหวังได้

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

2. Research หาข้อมูลเพิ่มเติม

จากข้อมูลที่ได้มา เราจะเริ่มศึกษาหาข้อมูลเพิ่มเติม

ถ้าเป็นงานออกแบบพัฒนาเว็บไซต์ เราจะศึกษาเว็บคู่แข่ง ดูเว็บในกลุ่มธุรกิจเดียวกัน ทั้งในและต่างประเทศ ดูจุดแข็งจุดอ่อน ข้อดีข้อเสียของแต่ละที่ ดูจนเราเห็นภาพต้นแบบของเว็บที่กลุ่มธุรกิจนี้พึงจะมี Features และ Functions ต่างๆที่มีประโยชน์ ช่วยลดต้นทุน ช่วยเพิ่มยอดขาย ช่วยสร้างรายได้ ให้กับลูกค้าได้ ไอเดียต่างๆจะถูกนำมานำเสนอเป็นแนวทางในการออกแบบพัฒนาเว็บไซต์ให้กับลูกค้าของเรา

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

3. เก็บความต้องการเพิ่มเติม

หลังจากคุยกันในครั้งแรก เราไปทำการบ้าน หาข้อมูลเพิ่มเติม และกลับมาพร้อมกับคำถาม เพื่อเติมเต็มสิ่งที่ขาดหายไป อาจมีหลายเรื่องที่ลูกค้าไม่ได้แจ้ง บางเรื่องที่เราไม่รู้ และจำเป็นต้องมีข้อมูลเพื่อพัฒนางานต่อ ยิ่งได้ข้อมูลครบถ้วน ยิ่งดึงประสิทธิภาพในงานออกมาได้มาก

4. ออกแบบโครงสร้างเว็บ

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

5. ออกแบบแนวคิดเริ่มต้น Initial concepts

เมื่อมีข้อมูลเพียงพอ เรานำข้อมูลที่ได้มาวิเคราะห์ ออกแบบ และวางแผนการทำงาน งานส่วนนี้เปรียบเสมือนการออกแบบวางโครงสร้างหลักของบ้าน เป็นส่วนที่เจ้าของบริษัทร่วมออกแบบ วางแผนการทำงาน เพื่อให้มั่นใจว่า การออกแบบระบบในแต่ละครั้ง ไม่ตกหล่นส่วนประกอบสำคัญใดๆไป ทีมงานจะเริ่มจากการวาด user flow / work flow เพื่อให้เข้าใจตรงกัน ทีมออกแบบสเก็ตโครงร่างเว็บ ทีมโปรแกรมออกแบบ database เราใช้ทั้ง post-it, whiteboard วาดกันทั้งบนกระดาษ และร่างบน software จนได้ wireframe ได้ prototype มานำเสนอการทำงานให้ลูกค้าพิจารณา 

6. เสนองาน Proposal

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

เมื่อลูกค้าพึงพอใจในงานที่นำเสนอ ผลงานผ่านการพิจารณา ตกลงราคากันได้ (ซึ่งส่วนใหญ่จะผ่าน ^_^) หลังบริษัทฯนำเสนองาน จะเปิดโอกาสให้ลูกค้าแสดงความคิดเห็นต่องานที่นำเสนอไป เพื่อนำไปพัฒนาต่อยอดให้ตรงความต้องการของลูกค้า

จากนั้นลูกค้าจะให้ CI (Corporate Identity) มาให้ทีมงานออกแบบให้เข้ากับอัตลักษณ์ขององค์กร ถ้าไม่มีทีมงานเราจะออกแบบให้เหมาะสมที่สุดกับรูปแบบของธุรกิจ

7. Mockup

งานออกแบบ theme เว็บไซต์ เป็นงานดีไซน์ชุดแรกที่ลูกค้าจะได้ตรวจสอบ โดยจะออกแบบหน้าหลักๆ 3-5 หน้าให้ลูกค้าได้เห็นแนวทาง หลายๆบริษัทฯจะนำเสนอดีไซน์ 3 แบบให้ลูกค้าเลือก จากประสบการณ์ทำงานที่ผ่านมา ลูกค้าไม่เคยเลือก ดีไซน์ 1 ใน 3 จากที่นำเสนอ แต่ลูกค้าจะเอาส่วนนี้ของ แบบที่ 1 มาใส่แบบที่ 2 

วิธีการนำเสนอที่ใช้ได้ผลดีมาตลอดคือ

• ลูกค้าส่งดีไซน์ตัวอย่างที่อยากได้มา 
• ทีมงานนำเสนองานดีไซน์ 
• ลูกค้า comment จุดที่ต้องการปรับ แล้วปรับจากตรงนั้น 
• ทีมงานนำเสนอดีไซน์ที่ปรับเรียบร้อยแล้ว ส่วนใหญ่จะปรับกันไม่กี่ครั้งก็ผ่าน 

เมื่อตกลงสี ฟอนต์ และรูปแบบในการนำเสนอแล้ว 

• ฝ่ายศิลป์จะออกแบบ User Interface Design ขึ้นต้นแบบทุกหน้า
• ทีมงานตรวจสอบความสัมพันธ์ข้อข้อมูล ถูกต้องตาม work flow ความต่อเนื่องของข้อมูล ไม่ตกหล่นส่วนใดไป
• ตรวจสอบ User Experience Design ให้ผู้ใช้ เข้าใจฟังก์ชันต่างๆใช้งานได้ง่ายๆ
• จากนั้นจะส่งให้ลูกค้าตรวจความถูกต้อง

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

ในขั้นตอนนี้ทีมงานจะ share files ให้ตรวจสอบกันออนไลน์ เมื่อปรับปรุงแก้ไขจนพอใจแล้ว จึงนำเสนอกรรมการให้ตรวจรับงานส่วนออกแบบ 

8. Prototype

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

9. Back Office Development

10. Add content

สำหรับ static website เราสามารถวางเนื้อหาในแต่ละหน้าตามที่ออกแบบไว้ได้เลย

สำหรับงาน dynamic website เมื่อพัฒนาระบบหลังบ้านแล้ว สามารถป้อนข้อมูลเข้าระบบรอได้เลย เมื่อหน้า Front End พัฒนาเสร็จ ข้อมูลที่ป้อนไว้ จะถูกเรียกขึ้นมานำเสนอ

11. UI Development/Front End Coding

โปรแกรมเมอร์จะเริ่มสร้างหน้าเว็บตามดีไซน์ต้นแบบที่วางไว้ จากนั้นจะลงโค้ด เพื่อให้เรียกข้อมูล ส่งข้อมูล ให้แสดงผล ตามที่ต้องการ 

14. Mobile friendly test

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

15. เก็บงานดีไซน์

งานที่ออกแบบมาครั้งแรก เมื่อลง code แล้วอาจมีการนำเสนอที่เปลี่ยนไป ดังนั้นหลังจากลง code แล้ว ดีไซน์เนอร์จะต้องกลับมาเก็บงานดีไซน์อีกครั้งให้เรียบร้อย

16. Application Test

ระหว่างการทำงาน เราเปิดเว็บภายใต้ชื่อ yourname.bkksol.com ให้ตรวจงานระหว่างการพัฒนาระบบ เมื่อระบบเรียบร้อยพร้อมใช้งาน เราจะย้ายเข้าสู่เครื่องจริง ลูกค้าจะได้ตรวจสอบงานอีกครั้งทาง uat.yourdomain.com งานที่ผ่านการตรวจสอบที่ uat จึงจะถูกส่งเข้าเว็บจริง

17. Test forms

ทดสอบแบบฟอร์มในทุกๆหน้า ให้แน่ใจว่าข้อมูลถูกส่งไปตามเส้นทางที่กำหนด และส่งถึงผู้รับผิดชอบ ลูกค้าสามารถกำหนดอีเมลผู้รับ ให้ส่งเข้าหลายอีเมลได้ ถ้าต้องการ

นอกจากส่วนงานออกแบบ และพัฒนาเว็บไซต์ มีงานอะไรที่ต้องทำอีก

1. Domain name & Web Hosting

Domain Name หรือชื่อเว็บไซต์ เป็นเสมือนบ้านเลขที่ ส่วน Web Hosting เป็นเสมือนที่ดินที่ตั้งบ้านของคุณ Internet เป็นถนนที่จะพาคนเข้าไปถึงบ้านคุณได้ คุณจะต้องมีทั้ง 3 อย่าง เพื่อให้เข้าถึงเว็บคุณได้

ถ้าหน่วยงานของคุณมี Domain Name และ Hosting อยู่แล้ว เราสามารถพิจารณาว่าจะใช้ที่เดิมต่อ หรือเปลี่ยนผู้ให้บริการ Web Hosting ก็ได้ทั้งนี้เป็นเรื่องทางเทคนิค สเปคของเครื่องรองรับระบบใหม่ไหม

หากคุณยังไม่มี Domain Name เรามีบริการจดทะเบียนชื่อโดเมน เช่าพื้นที่วางเว็บไซต์ โดยทีมงานจะนำเสนอแพคเกจที่เหมาะสมที่สุดตามความต้องการในการใช้งาน

2. Email Account

ถ้าคุณยังไม่มีอีเมลในชื่อเว็บตัวเอง หลังจากจดชื่อมาแล้ว เรามีบริการเปิดบัญชี Google Suite สร้างอีเมลให้ได้ โดยส่วนใหญ่จะเปิดอีเมล yourname@yourdomain.com, info@yourdomain.com, sales@yourdomain.com, contact@yourdomain.com และ enquiries@yourdomain.com

3. ปรับความเร็วในการเปิดหน้าเว็บ Page load speed

ก่อนจะปล่อยเว็บออกไปใช้งาน เว็บจะต้องถูกปรับแล้ว ปรับอีก ปรับไปทีละเรื่อง เรื่องหนึ่งที่อยู่ใน to do list คือ การปรับความเร็วในการเปิดหน้าเว็บ ให้เร็วที่สุดเท่าที่ทำได้ การปรับความเร็วเป็นหนึ่งในงาน MA ที่เราคอยเฝ้าระวังให้ลูกค้าเมื่อมีปริมาณข้อมูลมากขึ้น

4. ส่ง sitemap ให้ Google Search Console

Using Yoast, we can connect your website directly to Google. This means they can provide you with extra data about your website, and send you an email if you have any errors going forward.

We then provide Google with a list of web pages from your site so they can start listing them in search results. This is known as your “sitemap”. Chances are they would find your site over time anyway but this way they will keep their records up to date every time you make a change to your site.

5. ติดตั้ง Google Analytics

ในการติดตามพฤติกรรมการใช้งานเว็บ เราใช้ Google Analytics เป็นเครื่องมือที่ให้ข้อมูลผู้ใช้อย่างที่คุณอยากรู้ เช่นจำนวนผู้ใช้รายเดือน หน้าที่มีผู้เข้าชมมากที่สุด และขอบคุณ Google ที่ทำให้ใช้ฟรี

สรุป

จากขั้นตอนต่างๆที่กล่าวมาข้างต้น ทำให้คุณเห็นภาพคร่าวๆในการทำงานแต่ละขั้นตอน งานที่เราทำยังลงรายละเอียดอีกมาก โดยเฉพาะในส่วนที่เทคนิคที่ไม่ได้เขียนลงรายละเอียด ทุกๆขั้นตอนมีความสำคัญในตัวเอง หวังว่าลูกค้าจะเห็นภาพชัดเจนขึ้นถึงวิธีการทำงาน กว่าจะได้เว็บไซต์หรือระบบมาระบบนึง การทำงานจึงต้องอาศัย team work ความร่วมมือทั้งจากลูกค้าเองในการเตรียมข้อมูลให้พร้อมที่สุด คอยตรวจงานทุกขั้นตอนไปด้วยกัน เพื่อให้งานออกมาตรงใจที่สุด หากมีข้อสงสัย ต้องการสอบถามเพิ่มเติม ยินดีนะคะ