calmversation — An Innovative classroom tool for Teachers
Case Study: Website Redesign for a not-for-profit organization that empowers our next generation
About Our Client — calmversation
calmversation is an innovated and unique online toolkit that was designed for teachers to help their teaching in the classrooms. The founder Jena developed calmversation as a unique system to dissolve barriers to learning, leadership, and communication. It is a multi-dimensional approach to authentic, creative and high impact communication. This new model for education helps humans better connect and relate to one another and technology. The model is currently being delivered in workshops and programs in schools and corporate spaces.
Our client Missy Jena explained to us meaning behind their brand name calmversation. She expresses that if people take out the “con” in conversations and start making calmversations and the world will be a more peaceful place. That is also why calmversation is always lowercase because no one should be the bigger person.
Let’s take out the “con” in conversations, and start making calmversations
Opportunity
Missy Jena, our client, spent 15 years working in school systems primarily looking at how to overcome barriers in learning, communications, and practical problem-solving. She saw that there were many gaps or flaws in how education was delivered. For example, kids were never taught any problem-solving skill at a young age and were always given instructions whenever a conflict happens. In a situation when a kid stole another kid’s toy, the teacher would command the kid to give the toy back instead of letting the kids solve the issue with each other. As a result, she designed a whole new model for learning that problem solves, champions creativity, innovation, and leadership.
Teachers are struggling with BC’s new Education Plan and the calmversation program checks all the boxes. It is a solution to bridge the gaps in education in an easy and inspiring way. Their product is available online and makes it much easier for educators to engage in new ways with their students while putting the students in the driver’s seat of learning and discovery. We were very excited we can be a part of this startup, we felt may impact individual way of learning in many exciting ideas and change our current education system.
Problem
As exciting the product is, the current website does not do the product any justice. Jena approached us to redesign calmversation.org, which is one of their sites which targets teacher. Her ask was for us to redesign the website in a more user-friendly way. They also have another site calmversation.com which is their main site targeting multiple audiences such as organizations, parents and schools. calmversation.org is especially hard to navigate, and users can’t find information quickly. It has a high drop-off rate. And as confusing as it is, the site also links to a third party learning platform, Thinkofic, and their main site calmversation.com.
Kickoff Meeting
Meeting Jena was a treat. She has such a unique personality and has so much passion for education and creating a better future for humankind. She educated us on some of the flaws in the current schooling system and how she is trying to change it for the better. In this meeting, we established her business goal and our project goal,
Client goals: To raise enough funds to launch the program in schools, get sponsors, get more people on board, help students understand how to voice their choices while making a difference in their schools, communities,
Project Goals: Make the website easier to navigate because there are currently3 websites embedded and our focus was with .org which cater to education with a user-friendly approach
The user goal is yet to be determined, and we will establish it through our research.
Research
We first did domain research and CC research on some popular online learning platform such as Udemy, Master Class. But most online learning platform caters to individuals whereas calmversation takes a class-wide approach.
Survey
Objective: To learning about users purchasing behaviours and motivations towards online learning platforsm.
Findings:
- 3 factors people consider when looking for an online platform: Price, course description, and sample lessons.
Interview
We also interviewed six individuals that our client provided that have some knowledge of the course or works closely with calmversation and Jenna.
Contextual Inquiry:
To better understand what calmversation is about, our contextual inquiry process involved placing ourselves in the shoes of a student in a demo calmversation class ran by Jena and experiencing 1 of 5 themes that a grade four class usually experiences.
As UX designer I was genuinely surprised about how thoughtful and well rounded the classes are. These curriculums are incredibly engaging and beneficial even for adults like us. And we want to capture that on her website.
Customer Journey Map
We created two journey map based on our interviews and contextual inquiry. One is the emotional journey map of someone going on the website, the other being their emotional journey map when attending a calmversation class session. As you can see in the image below, these are two very different experiences.
Planning
Affinity Diagram
First, we want to organize all the qualitative data we gathered using an affinity diagram.
Persona
Then we created a persona from the information we sorted with the affinity diagram.
User goals: Be able to understand what the education tool is, navigate the website, browse free samples of the packages, and adopt the teaching tool in classrooms
We create a user story to help you understand Margaret’s frustrations.
With our business goal, project goal and user goal in mind, we build a new sitemap and then start designing our paper prototypes.
Design
Design studio
Because we had a lot of text in the original website, it was very challenging for us to come up with visual ways to represent all that text, so we decided to start with a design studio session which involves everyone in the group. It is a 5-minute exercise where we don’t talk, and we individually draw out screens that we imagine the website to look like, and then we reflect on what we like and dislike and come up with the ideal screen.
As part of our design process, we had three different levels of iterations. Starting with the Paper Prototype, which is the low fidelity level, it is a quick way for us to sketch out our ideas by pen and paper.
Then we had the mid fidelity level which is the digitized version where we want to be more specific about how each page is laid out and factors such as font type, size, image size, how they’re all aligned on the page.
Lastly, we have the high fidelity version, which is where the color is put in, and it’s a more refined version that is aesthetically pleasing.
Between each phase, we ran user tests along the way, so we kept refining the website.
Testing
What we do in the testing phase is to get users to try out our paper and mid-fi prototype to see what aspects are clear or unclear
Testing tasks:
- Go to the courses from the home page and learn more about Theme 1/ click through each theme and learn more about them
- Purchase Course
- Donate to Campaign
Finding 1: Contact Form
Below is our Contact us form design, we started using a linear design but found through testing a step by step process form was more intuitive because users were less overwhelmed and there was no information overload.
Finding 2: Homepage
Below is our homepage and when users first entered they were still unsure what the site was promoting even with the text there. Some users did not want to read the text so We had to make it more clear by telling them it was an innovative teaching tool on the hero image which gave indication right away.
Finding 3: Wording inconsistency
Throughout our website, we were inconsistent between the terms “program, course, themes, bundles” and users were unsure what the difference was. On the original site, there were multiple terms referring to the same thing so we decided to use Course and themes because through testing users understood what courses were and that there are 5 themes within the course.
Finding 4: Courses and Grade Level
On our courses page, we originally wanted to section it by grades like on the website but decided to section it by theme because the content is similar throughout the grade levels.
Finding 5: CTA
On our Courses page, we had two CTA (call to action) buttons that said “purchase course” on the same page, one at the top and one at the bottom. Users thought that they were purchasing two different things. So in the final iteration, we kept the CTA button at the top because it was more clear that they were purchasing the calmversation course
Finding 6: Deleting My Dashboard
We originally had a dashboard but decided it was not needed because you have to sign up on thickofic. we deleted it and used our log in to redirect users for easy access to thinkofic since on the original site you could not directly find it without digging through the site. Thinkofic is where users can log in and access their purchased courses from the 3rd party.
Prototype
Web: https://invis.io/27PCV6VPANX
Mobile: https://invis.io/QVPDFAFFCPW
Future Considerations
- Incorporated course package into the website
- Professional Copy Writing
- Organize both calmversation.com and calmversation.org