Xthon Website
Xthon Website
Type: Web design / Freelance Project
Tools: Figma, FigJam, Zoom
Role: UX/UI Designer
2026
2026
1 Month
1 Month
Type: Dashboard design / Freelance Project
Type: Web design / Freelance Project
Tools: Figma, FigJam, Zoom
Role: UX/UI Designer
Role: UX/UI Designer
Project Overview
Project Overview
I designed the website for the “Xthon” hackathon organized by the University of Tabuk in collaboration with KAUST and SDAIA. The goal was to create a comprehensive digital experience that reflects the event’s identity and allows users to easily access all relevant information. The website includes key sections such as the event timeline, statistics, features and goals, domains and tracks, target audience, schedule, prizes, partners and sponsors, FAQ, organizing team, and footer. Additionally, a dedicated page was designed specifically for hackathon participants to enhance their experience during the event.
I designed the website for the “Xthon” hackathon organized by the University of Tabuk in collaboration with KAUST and SDAIA. The goal was to create a comprehensive digital experience that reflects the event’s identity and allows users to easily access all relevant information. The website includes key sections such as the event timeline, statistics, features and goals, domains and tracks, target audience, schedule, prizes, partners and sponsors, FAQ, organizing team, and footer. Additionally, a dedicated page was designed specifically for hackathon participants to enhance their experience during the event.
My Role
My Role
I worked as a UI/UX Designer, responsible for crafting the full user experience and interface design, from structuring the content and building a clear information architecture to designing interactive and responsive interfaces that reflect the event identity and provide a smooth user experience.
I worked as a UI/UX Designer, responsible for crafting the full user experience and interface design, from structuring the content and building a clear information architecture to designing interactive and responsive interfaces that reflect the event identity and provide a smooth user experience.
Design Process
Design Process
I started by understanding the hackathon context and user needs, then structured the content into a clear layout. I moved on to wireframing to map out the user experience, followed by designing visually engaging interfaces. After that, I added interactions to enhance usability and finalized the design by ensuring full responsiveness across different screen sizes.
I started by understanding the hackathon context and user needs, then structured the content into a clear layout. I moved on to wireframing to map out the user experience, followed by designing visually engaging interfaces. After that, I added interactions to enhance usability and finalized the design by ensuring full responsiveness across different screen sizes.
Outcome
Outcome
The result was a well-structured and user-friendly website that simplifies access to information while professionally representing the event. The interactive elements and responsive design contributed to enhancing user engagement and overall experience.
The result was a well-structured and user-friendly website that simplifies access to information while professionally representing the event. The interactive elements and responsive design contributed to enhancing user engagement and overall experience.
✴︎ The final outcome is a complete website that combines strong visual design with a seamless user experience, high interactivity, and full responsiveness, along with a dedicated participant page that enhances the overall hackathon experience.
✴︎ The final outcome is a complete website that combines strong visual design with a seamless user experience, high interactivity, and full responsiveness, along with a dedicated participant page that enhances the overall hackathon experience.
Landing Page Prototype
Landing Page Prototype
Thank You Very Much For Reaching The End Of The Case Study ✨.
I hope You Enjoy It.
Thank You Very Much For Reaching The End Of The Case Study ✨.
I hope You Enjoy It.
Thank You Very Much For Reaching
The End Of The Case Study ✨.
I hope You Enjoy It.
