ออกแบบและทำระบบเว็บ Bitkub ICON

Updated: Oct 19

Client: Bitkub

Website: https://www.bitkubicon.com


ผมจะมาเล่าเรื่องราวการออกแบบระบบเว็บ Bitkub ICON ให้อ่านกันครับ เป็นเว็บที่รวบรวมระบบการแลกพอยท์และ NFT เข้ามาไว้ในเว็บนี้ จะสนุกและท้าทายแค่ไหน ไปอ่านกันครับ

ผมได้ออกแบบ Journey ร่วมกับทีมบิทคับ เพื่อทำให้เว็บใช้ง่าย โดยกว่า 90% ของผู้เข้ามาใช้งานใน Phase แรก ใช้ Device มือถือ จึงเริ่มต้นการออกแบบระบบที่แบบมือถือก่อนครับ

หลังจากทุกทีมโอเคกับการออกแบบในแบบมือถือเสร็จแล้ว ผมจึงได้ออกแบบในแบบ Desktop ต่อครับ




ในส่วนของ Bitkub ICON ทั้ง 16 คน ผมได้ออกแบบให้เชื่อมต่อไปที่หน้ารายละเอียดของแต่ละคน ที่สามารถดูข่าวของ Bitkub ICON ของคนนั้น รวมถึงเข้าไปติดตามใน Communication แต่ละช่องทาง ทั้งทาง Facebook fanpage, Youtube, IG และเลือกติดตามมหาวิทยาลัยที่ชื่นชอบได้ เพื่อให้ไม่พลาดข่าวสารของคลับที่ user ชอบ


หน้านี้เป็นการโหวตอันดับของ Bitkub ICON แต่ละคน โดย user จะต้องสมัครสมาชิกผ่าน bitkub next และทำภารกิจ เพื่อนำพอยท์ที่ได้ นำมาโหวตในหน้านี้


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


หน้าโปรไฟล์ส่วนตัว หน้านี้ทางบิทคับอยากให้มีการทำภารกิจเพื่อแลกพอยท์ แล้วนำพอยท์ไปโหวตหรือแลก NFT


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


ความล้ำของเว็บนี้ คือสามารถแลก NFT ได้ เมื่อทำภารกิจสำเร็จ ต้องขอบคุณน้องโอม Dev และทางทีม Bitkub ที่ช่วยกันทำให้การเชื่อมต่อระบบสำเร็จ



ในหน้านี้ ผมต้องการออกแบบให้ user ที่ต้องการรู้จักกับน้องๆ bitkub ICON แต่ละคน ได้เข้ามาหน้าที่รวบรวมเรื่องราวและช่องทางการติดต่อ และ Engagement


โดยผมได้ใส่ปุ่มโหวต เพื่อเป็นปุ่มลัดไปสู่หน้าโหวต, ช่องทาง social media เพื่อให้ user ได้ติดต่อพูดคุย และติดตามเรื่องราวของน้องๆ, user สามารถกดติดตาม club เพื่อให้ไม่พลาดเรื่องราวของ club ที่ชื่นชอบ, และผมได้ใส่กิจกรรมของน้องๆเข้าไปด้วย โดยแยก tag ของแต่ละคนได้ เพื่อให้หน้านี้ เป็นที่รวมเรื่องราวของน้องคนนั้นครับ

สำหรับ user ที่ชื่นชอบในมหาวิทยาลัยไหน ก็สามารถเข้าไปติดตาม และร่วมโหวดให้กับน้องๆที่ชื่นชอบได้ครับ

หน้าข่าวสาร มีวิธีการใช้งานและข่าวสารของน้องๆครับ โดยสามารถหาข่าวของน้องๆ ได้จาก tag สามารถ filter เลือกวันที่ได้ครับ

7 views0 comments