WorkAboutContact
Ronik
WorkAboutContact
Our WorkAbout UsGet in Touch

iCivics

Digital platform design for a vision-driven EdTech brand

  • Strategy
  • UX
  • Design
  • User Testing

iCivics is the nation’s leading provider of K–12 civics education resources. Ronik translated a renewed strategic vision and visual identity into a comprehensive iCivics digital education product and an elevated presence for their vision brand from scratch.

Visit site

iCivics has grown tremendously since its start in 2009 as an e-learning nonprofit startup founded by former Supreme Court Justice Sandra Day O’Connor. Today, iCivics is used by over 9 million students in classrooms across the country, and the EdTech brand is continuously expanding its offering and ambition.

Ronik partnered with BBMG, who led the brand strategy and defined the organization’s new brand strategy and visual identity. With an extremely diverse set of audiences—ranging from large donors and policy advocates to teachers, students, administrators, parents and homeschoolers–iCivics’ new web presence and education product needed to effectively attract, guide, and deliver on varying goals across multiple platforms for a new two-brand system.

Ronik's scope encompassed digital properties for both the newly-formed vision brand and the existing education brand—as well as the educational product itself: the iCivics teaching and learning experience.

Our challenge was to tell an expanded story and speak directly to new types of users without deterring or disorienting iCivics’ established base of teachers and students, who rely on familiarity, ease, and student-friendly web practices for classroom implementation. The new brand architecture called for a digital presence for the Vision brand to be created from scratch.

three smartphone screens featuring iCivics Vision website design

More than this, iCivics’ new website had the demand of elevating the message of its evolved identity and illustrating its deep impact to change hearts and minds and bring more people into the fold of its work with advocacy and legislation. iCivics users found the former brand and website difficult to navigate and comprehend—research confirmed that users not only failed to enjoy the great variety of free resources on offer, but could not see past the online games to the big picture work being done by iCivics for young people, policy, and the nation’s future on a grand scale.

side by side images of iCivics Vision website pages

Building on interviews, audience surveys, and brand analysis, Ronik undertook an in-depth research phase to uncover not only essential requirements but opportunities for iCivics to shine in its new space with an expanded mission and mandate.

iCivics’ own research offered not only extensive reporting on site traffic and user behavior, but numerous surveys, interviews, and workshops with educators and administrators, to guide our work and uphold the commitment to listening to their base and prioritizing the needs of the classroom.

The derived key to success was a UX strategy that would funnel users across a new multi-site system for distinct “Vision”, “Education Marketing”, and “Digital Product” entities, utilizing expanded navs, multiple access points between brands, and call-outs catered towards getting each user type where they need to go.

a hand holds a smartphone featuring the iCivics website on its screen surrounded by floating modules from the website

To validate our earlier hypotheses, explore solutions to common pain points, and ensure that we struck the balance between fresh and familiar with the redesign, we interviewed and tested static prototypes with current iCivics teachers during the wireframing phase for feedback on restructured pages and proposed new features. Having an educator-sounding board at this crucial juncture helped steer the final UX and provided a solid foundation for the visual design phase.

iCivics Education Product website in desktop and mobile views

User testing with existing teacher-users provided laser-focused insight into the specific needs and frustrations of a busy educator administering a digital curriculum.

On top of the learning- and play-oriented design language, Ronik crafted all modules and templates to be highly responsive and mobile-first, in keeping with the current norms of classroom technology and habits we learned from teachers; use of color, animation, and interactivity all underwent extensive review for maximized accessibility; and we leveraged an expanded visual and graphical lexicon to work in parallel with textual messaging and support iCivics efforts to expand their resources for ESL/ELL users.

5 vertically stacked sections from the iCivics website desktop view showcasing UX and navigation

The new iCivics Education sitemap and navigation make finding help and inspiration easy. The site provides intuitive pathways to help teachers digest a grand scope of materials beyond the core product: how-to guides for the various resource types, real-life teacher tips, and professional development — all putting knowledge at the teacher’s fingertips, providing an easy in for newbies and constant opportunities to level up.

side-by-side images of educator blog on the iCivics Education website desktop view

Web users — students and time-strapped teachers especially — rely heavily on graphical cues and patterns to move quickly through content and reach destinations, so our design system included custom iconography for each resource type, lending the brand identity to a fun and clear wayfinding language of the educational products, and helping teachers and students intuitively identify content types and navigate the massive and growing library of materials.

a grid of 12 iCivics resource icons and a large scale instance of a folder icon on top of a digital design grid

In the new digital ecosystem driven by this strategy and a flexible design language that stretched across brands, the key message of civic education as indispensable to our nation is front and center as an exhortation with a variety of ways to get involved.

The marketing team now has a suite of content tools befitting a thought leadership brand at its fingertips; teachers and students still find their desired destinations with no time lost; automated and staff curation aid educators’ discovery of new and alternate offerings; and classrooms enjoy the playful interface they’ve come to know and love with an accessible refresh and extensive functional and organizational improvements based on real teacher input.

Ronik helped the iCivics Product and Tech teams to identify opportunities for future enhancements, and have set up a new digital brand language and design system that allows for unrestricted expansion of their product and messaging, creating a platform that will be further enhanced with features and functionality, new cross-tool integrations, and powerful customizations to promote, preserve and improve civic education.


The new languages, libraries, patterns, templates, and practices developed allow iCivics to continue listening to teachers and students and incorporating feedback to make a better educational product that suits the real needs of its diverse users as they evolve over time.

“The Ronik team was a pleasure to work with. They were articulate, attentive, and friendly, making the design process enjoyable. Their expertise in creating beautiful and user-friendly interfaces was evident in the exceptional foundation of design components they provided, which will undoubtedly serve us well for years to come.”

Libby Falck

Director of Research and Product Design, iCivics
Up next

JFK Terminal 4

A digital ecosystem for New York’s largest airport terminal

©2024 Ronik Design LLC. all rights reserved