Designing for social inclusivity
Active Citizens’ website had grown tired — and a tired site was holding back the engagement their mission depends on. Impactful changes and innovative features turned it 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
The redesign started with the organization’s mission, goals, and aspirations. The first step was defining 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?
Active Citizens already had a distinctive brand — their logo, the recognizable brand color #2CD5C4, and the Aktiv Grotesk and SerifaDOT fonts. That brand set the direction: photographs by Ryoji Iwata depicting people in motion, with strong black-and-white contrast.
Since the main message of Active Citizens is “Get Active!”, the content took a horizontal layout — 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
Alongside essential features, user engagement was the focus. A blog section lets the organization publish frequently.
A document section holds 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.
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. A pragmatic approach won out: 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. A visual indicator shows the current page location, to reduce confusion. Thorough cross-browser testing kept it seamless across all major platforms.
Architected and built from scratch
React powers the front end — making the delivered solution easy to build and effortlessly extendable in the future, whether by Kodius or by others.
Next.js was the right fit for the clear benefits of server-side rendering and its dominance as the way to ship React-based websites today. It brought excellent SEO, strong performance, efficient prefetching, and a development experience that translated into a great end result.
Boosting positive change
Hosting and a maintenance support team secure 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.
