Sailing Through Time
Creating a historical database for a 200-year old yacht club
Client
Kungliga Svenska Segelsällskapet
Team
3 UX Designers
5 Frontend Developers
My Role
UX Researcher
UI Designer
Scrum Master
Project Span
March - May
5 Weeks
Summary of The Project
KSSS reached out with the purpose of documenting and digitizing their collection of historical documents. The goal was to create a website that has an easy and engaging visual design that was also effortless to use for their wide range of members that wanted to engage in the club’s history, as well as creating a simple way to maintain the website.
The result became an interactive timeline, which allows the user to see the events happening in the yacht Club’s history throughout the years. The amount of information that the organization wanted to store was not properly stored and organized, which was solved by creating a simplistic tagging system and ability to make more timelines.
The Challenge
KSSS has been wanting to digitize their historical artifacts. To be able to do this they needed to create a database for storage, as well as a platform to visualize their history. They needed a space that was easy to navigate and use due to the large difference in the demographic the club has. It also needed to be easy for the club themselves to be able to maintain and update the database.
The client was very interested in putting the history in a timeline format for added interactivity. There had already been attempts at creating a website based on this criteria. These were simplistic lo-fi designs and the examples were not tested on by users.
Above you can see previous solutions
Project Timeline
User Research
Wireframing & User Testing
Hifi Prototyping
Development
Week One
Week Two
Week Three
Week Four
Week Five
Survey
KSSS’ historical project had been set up without prior knowledge about the users, it was created as passion project. Therefore, I saw that we needed to do some lean research to get a scope of the potential user base and their needs.
responded on the survey
And after this, we set sail on our journey!
First Destination, Research
I decided to send out a survey to the members. This way we and the organization would be able to gauge the interest, get a better picture of the demographic, and be able to understand what they wanted out of an archive.
109 Members
70% Interested
In a website where they could see the organisations history
32% Active
Answered that they would interact regularly
Personas
The client was very pleased with the result of the survey, feeling like they were on the right track with this project!
From the result of the survey we made a persona for the client, to make them understand the audience most interested in an archive like this.
Since they already were mindful of the older generation’s interest, they wanted to also include making it interesting for their younger members as well. With limited information, we created a young persona as well.
And so we reach the second destination
One User Flow, A Bunch of Timelines
With the survey at our back, we began to construct the sitemap for the website based on the client’s ambitions. The main focus points were the timeline feature and the ability to access old yearbooks.
Tagging System
The client wanted a system with multiple timelines about different topics. For this I worked out a tagging system based on the answers from the survey. This is also adaptable for the admin of the website to change and add as they please.
KAPPSEGLING
GOTLAND RUNT
HAMNAR OCH BYGGNADER
VIKTIGA MEDLEMMAR
OLYMPISKA VINNARE
TÄVLINGAR
Destination 3, Wireframes and Tests
User Tests
To make a decision of what timeline that would perform the best, I decided to do some A/B testing. Each test had five participants each, and with the feedback we got the horizontal timeline felt more interactive and more clear to engage with.
“I think the horizontal timeline makes it so easy to follow the sequence of historical events. I can scroll through it easily.”
“It feels straightforward and easy, but it feels like every other site you know. You know what dto do and what happens.”
“Dealing with the vertical timeline is a hassle. Scrolling up and down constantly gets annoying. I often miss key events because the timeline just feels too crowded”
“Using the horizontal timeline is frustrating. The events get jumbled when there are too many.”
Creating Wireframes
I explored both horizontal and vertical timelines, aiming for an interactive version compatible with mobile and desktop. The main challenge was displaying extensive information for each year. To improve readability and searchability, I grouped events by decade instead of yearly intervals, providing a clearer overview.
And finally we reach the last stop…
Finished Designs!
Results
KSSS is currently building on our idea, starting to fill the archive with more information, and are in contact with us to expand the tagging system. There is no set date for official release yet.
Personal Reflections
Next Steps
For the next steps I would suggest doing more user tests with a larger set of their users and members, since this didn’t actually manage to get in contact with their users in time to perform user tests on the yacht club’s members. I also recommend expanding the tags and user testing it more extensively, because my theory is that it makes it both easier to navigate but also easier for the user to manage less information at the same time.
-
The client heavily relied on the frontend developer team and left the UX team with minimal guidance and feedback. Communication regarding UX expectations was poor, and there was little opportunity for user research, causing confusion. User testing, however, provided some clarity. The experience highlighted the value of user research over client feedback, especially given the insufficient client support.
-
This was my first experience as a project manager. Balancing the responsibilities of project management and UX design was challenging, particularly due to how unclear client expectations for UX was. Initial stress was alleviated by seeking help from teammates, which fostered a collaborative environment and built mutual trust between us. The project’s complexity required careful coordination between design and backend development, making the first three weeks particularly stressful.
-
The project introduced me to the agile methodology. Me and my team found the multiple weekly meetings overwhelming and preferred shorter, daily communications. We adapted the agile approach to fit their needs, incorporating roles like project owner and scrum master for better communication. This customized approach was more effective for their work style.
-
The short project duration limited user contact. A survey sent out to users became the primary basis for the project's conclusions. Although the user testing fell short in scope, it provided a basic structure for the website's content. The author believes this foundation can be expanded in future iterations.