Casebrief: What the fuck
- Client Fonds slachtofferhulp
- Live WTFFF!?
WTFFF!?
WTFFF!? is an educative website about online sexual abuse by Fonds Slachtofferhulp
Challenge
The team faced the challenge of creating a portal that seamlessly connected various sites and their diverse URLs. The complexity lay in the fact that these sites were built using different frameworks and codebases. The solution involved developing a navigation portal that worked across all URLs, appearing as a simple navigation interface while functioning with intricate underlying mechanics.
My specific challenge was collaborating with a team of developers while working with React, Next.js, TypeScript, and Tailwind CSS in a professional setting for the first time.
My part
I worked with the Q42 team to develop components in React, ensuring the final design—created by the UI designer from Morrow—was implemented. We focused on maintaining accessibility and preserving the original aesthetic from other pages. This included replicating hover effects, dropdowns, accordions, and headings, all while adapting them to a new framework.
I also utilized Storybook to make interactive components that could be tested and refined before integrating them into the headless CMS, Sanity.io. This approach ensured that the components were well-documented, reusable, and accessible for future development..
Framework
For this project, we used Next.js as the framework, paired with React and TypeScript. Content management was handled through Sanity.io, a headless CMS that empowered Fonds Slachtofferhulp to manage and update their own content. Tailwind CSS was chosen for its efficiency in styling.
This was my first professional experience using these tools, having only explored them in personal projects and initial brainstorming sprints prior to this.
Using storybook
Storybook was instrumental in creating interactive, reusable components for the website. By focusing on these components in isolation, I could fine-tune their behavior across various states and ensure they met accessibility standards before integrating them into the broader application.
This methodology not only streamlined development but also fostered collaboration within the team. Each component was well-tested and easy to adapt, enabling faster iteration and reducing redundancy in the coding process.
Components
During the project, I developed a range of components, including accordions, headers, grids, and buttons. Each component was designed with multiple states in mind, such as hover, focus, and icon-only variations.
I also built larger components using custom hooks derived from these smaller pieces. This approach resulted in a cohesive component library, functioning much like a design system, ensuring consistency and scalability throughout the project.
On the next images, you can see the components created for the WTFFF!? website in Storybook (like these buttons on the left) and after used on the pages in the CMS, making use of the custom hooks.
Want to see some more?
On the Border
Concept Visual Design Front End