Designing for social inclusivity
Kodius implemented impactful changes and integrated innovative features to the Active Citizen’s website.
About active citizens
Inclusivity and social transformation
Active Citizens (Aktivni građani) is a Croatian non-profit organization dedicated to the resocialization of
marginalized individuals and raising awareness about social issues. The organization primarily comprises young
professionals and students actively engaged in social work.
Members contribute their efforts to various areas, including social protection, fostering a democratic political
culture, promoting sustainable development, advancing education, science, and culture, advocating for human
rights, and fostering international cooperation.
The challenge
Objectives to reach
- creating interactive content intended for the young audience
- using existing photos that are of bad quality in a creative way
- improving site speed, performance, security, and search engine rankings
Development phases
01 Getting to know users
We delved into understanding the organization's mission, goals, and aspirations for the website redesign. First
step was to define user personas that reflect students who are engaged and committed to creating positive change
for marginalized communities.
This insightful research laid the groundwork for crafting a tailored strategy to meet organisations’ specific
needs.
02 How about horizontal scroll?
When we met the Active Citizen’s team, they already had their distinctive brand, which consisted of their logo
and recognizable brand color: #2CD5C4, along with the Aktiv Grotesk and SerifaDOT fonts. That was our
inspiration for the website design: we chose photographs by Ryoji Iwata that depict people in motion, with a
strong contrast of black and white.
As the main message of Active Citizens is "Get Active!", we opted for a horizontal layout of the content to make the
process of getting to know the organization somewhat unusual and encourage users to engage through horizontal scrolling.
Incorporating photos of members and events further enriched the design layout, allowing us to effectively convey
the vibrant atmosphere of the organization.
In the process of adding essential features, we focused on enhancing user engagement. We designed and
implemented a “blog section” that empowers the organization to publish content frequently.
Additionally, we introduced a “document section” to house various important documents. Both these features prove
indispensable for their day-to-day operations, enabling them to proficiently showcase completed projects,
workshops, and other impactful activities.
03 Development and launch
The approved design quickly transitioned into development, swiftly handled by our front-end team.
The primary challenge involved shifting the mindset from considering the usual width as a limiting factor in
design to viewing height (monitor/screen height) as the new constraint for fitting the design within the screen.
In simpler terms, the main challenge revolved around the absence of vertical scrolling, a standard feature in
web development.
Crafting horizontally-scrolling websites that perform seamlessly across a diverse range of devices presented
intricate challenges. To address this, our development team embraced a pragmatic approach: implementing
horizontal scrolling for desktop devices while retaining the familiar vertical scroll for the mobile version, as
users are accustomed to it.
The actual implementation of horizontal scrolling relied on traditional CSS techniques in tandem with event
handling on React's end, enabling control over scroll position. Additionally, we integrated a visual indicator
to display the current page location, aimed at reducing confusion for visitors. Thorough cross-browser testing
was essential to ensure seamless functionality across all major platforms.
technologies
Architected and built from scratch
For this project, we leveraged the powerful React front-end library, ensuring that the delivered solution is
not only easy to build but also effortlessly extendable in the future, whether by our team at Kodius or by
others.
Our choice of Next.js was driven by the clear benefits of server-side rendering, and it's the most widely
adopted approach for building React-based websites. This decision streamlined the development process,
resulting in a seamless experience and a remarkable end-result. Next.js provides an extensive set of
out-of-the-box features, including exceptional SEO friendliness, outstanding performance, efficient
prefetching and much more.
01
React
02
Next.js
The Results
Boosting positive change
We provided our hosting service, in which we secured the performance of the website with a maintenance support
team, providing a fast, stable, and scalable service.
The impact of the trendy and vibrant redesign of Active Citizen’s website was fastly evident. The company
witnessed a significant increase in website traffic engagement.
Average session
duration increase
81%
Bounce rate
went from
76%
down to
48%
For the people, by the people
At our company, we deeply value inclusivity, friendliness, sustainable development, and education. It has been
an honor for us to support the organization in promoting these cherished values within our society.
Check out Active Citizens and join the positive change.
Get active!
ANA MARIA MUNJAKOVIĆ
Co-Founder and President
“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.”
Next case study
Transforming loans for millions with Fiona
Financial technology
Engine by MoneyLion