Designing for social inclusivity
Kodius implemented impactful changes and integrated innovative features into Active Citizens’ website — turning a tired site into a tool that drives engagement and amplifies their mission.
Inclusivity and social transformation
Active Citizens (Aktivni građani) is a Croatian non-profit dedicated to the resocialization of marginalized individuals and to raising awareness about social issues. The organization brings together young professionals and students who are actively engaged in social work.
Members contribute their efforts across social protection, democratic political culture, sustainable development, education, science and culture, human rights, and international cooperation.
Objectives to reach
- create interactive content for a young audience
- use existing low-quality photos in a creative way
- improve site speed, performance, security, and search rankings
Getting to know users
We dug into the organization’s mission, goals, and aspirations for the website redesign. Our first step was to define user personas reflecting students who are engaged and committed to creating positive change for marginalized communities.
That research laid the groundwork for a tailored strategy built around the organization’s specific needs.
Goals:
- Access research materials
- Engage in activism and community projects
Pain point:
- Limited time due to studies
- Need for credible sources
Goals:
- Finding volunteer opportunities
- Connecting with like-minded peers
Pain point:
- Juggling coursework and volunteering
- Needing guidance on making an impact effectively
Goals:
- Accessing educational resources to promote empathy, mental health awareness, and understanding of marginalized groups
Pain point:
- Limited time due to rigorous coursework
- Need for concise and engaging resources
Goals:
- Creating connections between students and local marginalized communities
- Facilitating partnerships for mutual support
Pain point:
- Establishing meaningful connections
- Navigating potential cultural sensitivities
How about horizontal scroll?
When we met the Active Citizens team, they already had a distinctive brand — their logo, the recognizable brand color #2CD5C4, and the Aktiv Grotesk and SerifaDOT fonts. That became our inspiration: we chose photographs by Ryoji Iwata depicting people in motion, with strong black-and-white contrast.
Since the main message of Active Citizens is “Get Active!”, we opted for a horizontal layout of the content — making the process of getting to know the organization feel unusual and encouraging users to engage through horizontal scrolling.
Photos of members and events further enriched the design, helping convey the organization’s vibrant atmosphere.
Content that compounds
While adding essential features, we focused on boosting user engagement. We designed and implemented a blog section that lets the organization publish frequently.
We also introduced a document section for important files. Both features have become indispensable in their day-to-day work — helping them showcase completed projects, workshops, and other impactful activities.
Development and launch
The approved design quickly moved into development, handled by our front-end team.
The main challenge was a mindset shift: from treating width as the limiting factor in design to treating height (the monitor/screen height) as the new constraint — because there was no vertical scrolling, which is a standard in the web.
Building horizontally-scrolling sites that perform across a wide range of devices presented intricate problems. Our team took a pragmatic approach: horizontal scrolling on desktop, but the familiar vertical scroll on mobile, where users expect it.
The implementation relied on traditional CSS techniques combined with event handling on React’s side to control scroll position. We also added a visual indicator showing the current page location, to reduce confusion. Thorough cross-browser testing kept it seamless across all major platforms.
Architected and built from scratch
We leveraged React for the front end — making the delivered solution easy to build and effortlessly extendable in the future, whether by our team or by others.
The choice of Next.js was driven by the clear benefits of server-side rendering and its dominance as the way to ship React-based websites today. It gave us excellent SEO, strong performance, efficient prefetching, and a development experience that translated into a great end result.
Boosting positive change
We provided hosting and a maintenance support team that secured fast, stable, and scalable performance for the new site.
The impact of the trendy, vibrant redesign was immediate — Active Citizens saw a significant lift in website traffic and engagement.
Engagement, lifted.
duration increase
76% down to 48%
For the people, by the people
At Kodius we deeply value inclusivity, friendliness, sustainable development, and education. It has been an honour to support Active Citizens in promoting these values across our society.
Check out Active Citizens and join the positive change. Get active →
There’s nothing I’d have them improve — they were absolutely stunning. I have a little experience with developers and designers and this was something new for me; everything went smoothly and the cooperation was great.
Transforming loans for millions with Fiona
