Designing an experience that helps foster healthy discussions in classrooms
Project background
The Civic Hospitality Project, an initiative by Calvin University, was created to help teachers navigate the current political landscape and educate their students on how to discuss controversial topics in a civilized way. The Project consists of topics with guided lessons to help teachers learn tactics to manage classroom disagreements.
Calvin University
September 2022
Kmotion Design
Lead UX/UI Designer
Dakota W. (Junior UX/UI)
Casey L. (Development)
The ask
Create a friendly and approachable website design to serve as a learning tool for teachers and administrators that helps them foster hospitable classroom environments by educating their students on healthy discussions.
Problem
Over the past few years, the political landscape in the United States has become very divisive. This has led to an increase in disagreements among high school students. There are no clear resources or guides for teachers and administrators that help them educate their students on how to have healthy, productive discussions with fellow classmates.
The goal
How might we design an intuitive learning experience that clearly guides teachers through the topics in an informative way and minimizes content overwhelm?
Discover
Step 1
Visual benchmarks
Before beginning the design process, we wanted to come to a consensus on general design direction that would appeal to the educator audience. To do this, we collected visual references from other education-based platforms. This phase helps us clearly define the visual path of the website while also taking the client’s preferences into account.
Key takeaways
- A clean layout and light color palette helps create an easy-to-navigate interface and a friendly and approachable design.
- Utilizing hand-drawn elements adds life and character into the site.
Opportunities
Based on our findings, we focused on two primary opportunities: strategic navigation with an emphasis on guiding users through the journey and content architecture that minimizes user overwhelm while still conveying the necessary information.
Ideate
Step 2
Information architecture
Beyond the learning and topic content, the rest of the website was very straight forward. The bulk of the strategy work came in when developing the sitemap and journeys for the topic flow. One of the technical limitations set in place was not being able to use an LMS system with user accounts.
To alleviate the problems this caused, we chose to create a user-guided learning flow where the user was allowed to complete the first lesson and then easily advance to the following lessons until the topic was complete.
Wirefames
Once the user research, information architecture and visual direction had been nailed down, we began creating low-fidelity wireframes which then were moved into high-fidelity wireframes after client approvals. Emphasis was placed on getting the user into that initial journey of a topic and then easing them into different lessons with strategic call-to-actions.
Design
Step 3
UI design
Once all the wireframes were complete and approved, we began the UI design phase. Referencing back to the approved visual direction, we created a design that is approachable by utilizing a light color palette, rounded corners and hand-drawn design elements. We also developed an expanded color palette that allows topics to have a unique color associated with them. This helps users easily navigate through the topics by creating a quick visual indicator that differentiates topics.
Outcome
Initial impressions from teachers engaging in the resource have been very positive. Next steps will be collecting user feedback through interviews and then further iterating on the website until another phase is ready to launch.