Background KSSS

Project by Hyper Island

UX/UI Design

Duration 1 Months

April 2 - April 30 / 2024

Summary.

Create a website for the KSSS- club that showcases their history, while collaborating and create a deeper understanding between the two professions (UX Designer and Frontend Developer).

The company expressed their desire for a dedicated website to showcase their documented history. Their vision was to provide members with an interactive and accessible platform to explore their archives.

bigboat
Homescreen mockup

Challenge.

KSSS sought to create a dedicated website showcasing their complete historical archives. Most clubs presented general historical overviews, none included an interactive feature like a timeline to explore specific events. This gap presented an opportunity for KSSS to stand out by delivering an innovative and engaging user experience.

The challengels they stood in front of was to create a database to store all their history and keep it structured, we are talking about 200 years of history that they have collected and of course would like to share with their club members. 

Home
Timeline
About us
Yearbook

Timeline.

Schedule KSSS
Sabilise & Align
Vertical Timeline
Wireframe 2

Our research began with a competitive analysis, which confirmed the uniqueness of KSSS's vision. We followed this with a survey of 128 members to understand their demographics and interest in the club’s history. The findings shaped our approach, identifying the historical aspects that resonated most with members.

Key responsibilities included designing an intuitive timeline, implementing a flexible content structure, and ensuring a seamless user experience. The age gap was very big when it came to their club members, so this was needed to fit every age in the aesthetics and usability. But one thing they all had in common, and it was being outdoors. So our priority was to make the timeline easy to use on the phone.

Designing the timeline was a critical focus. After brainstorming concepts, we leaned toward a horizontal design, allowing users to swipe rather than scroll. A/B testing with 10 participants validated this choice, confirming that the horizontal timeline was more interactive and intuitive.

Discover & Define
Filter
Visit Timeline

The timeline design needed to accommodate decades of events while ensuring a seamless user experience across devices. To address this we created the Events so they were categorized by decade rather than individual years, providing a clearer overview. The timeline was optimized for both desktop and mobile, ensuring consistent usability. Navigation was streamlined to enhance the discovery while it was fun to use and maintain engagement.

By focusing on user preferences and technical adaptability, the final solution offered a modern and user-friendly way for KSSS members to explore their rich history.

Explore & Create

To preform a better user test and showcase the product for the user we were able to create a mid-fi prototype. This was also something that was appriciated by the committee to see what the accuall website would look like. 

Produce & Deliver
📦

Collaborating with the frontend developers was both an enjoyable and insightful experience. It deepened my understanding of their workflows and enhanced communication between our roles as UX designers and developers. Our responsibility was to provide well-structured deliverables that served as a solid foundation for their implementation process.

Ultimately, we successfully presented a demo to the KSSS committee, showcasing how the database and tagging system would function, along with recommendations for moving forward.

KSSS frontpage 1

More Projects

Evroc (2025)Product Design

Stuckies (2024)UX/UI Design

KSSS (2024)UX/UI Design