calmversation — UX Case Study
calmversation is an innovative education curriculum for educators to use from grades K-12.
Our goal for the project was to redesign and simplify calmversation.org as a responsive website.
Jocelyn, Winnie and myself were the UX designers for the project, while Tim was our sole UI designer.
In terms of task allocation, the tasks were distributed evenly amongst the UX designers. However, due to our relatively smaller team, UI and UX provided cross-support for each other along the way.
Our client Missy Jena offers an innovative curriculum for educators teaching grades K-12. In traditional education, knowledge is passed on primarily through 1 way communication from the educator to student. For calmversation, knowledge is fostered by allowing students to express themselves freely in a fun and engaging environment.
The course package is available to be purchased at the classroom, school and district level at a monthly rate. However, they can only be purchased on a third party site called thinkific.
The biggest problem with calmversation is that the website is heavy on text and it’s very hard for a first time user to get a grasp of what it’s trying to sell. Furthermore, navigation is confusing and there is a lot of redundant information throughout the website.
Our project goal was to minimize the amount of clutter on the website and make navigation as seamless and easy for the user by rearranging and reducing content.
It was important to constantly remind ourselves that we should not stray into the realm of copywriting as it is outside our scope.
Through speaking with our client and browsing the website, we came up with the hypothesis that the course packages were not being purchased due to user‘s inability to comprehend what calmversation is and being lost in during navigation.
We started off our research efforts with domain research in order to get an idea of what the marketplace is like and some inspiration on how educational sites are usually designed.
The following sites were examined:
We found that most online learning platform out there cater to individuals as opposed to calmversation’s approach of providing a curriculum for classroom use.
Design wise, there appears to be a common theme of testimonials being displayed on the homepage. Also, videos are very popular not just as a way of delivering lessons, but also previewing them.
Overall, we had a total response rate of 28 people for our surveys.
One important question we asked was:
We found that the top 3 factors people consider when looking for an online platform are:
Knowing that course description was important, we made sure that user’s didn’t have to jump through pages after pages to read about them.
Not only is there a course overview on the homepage, but there is also an interactive graphic on the courses page where user’s can click on different “circles” to read about the different themes of a course without opening new tabs. The circles get highlighted and the description automatically changes, replacing the previous one. This allows us to store a lot of information without cluttering the page.
We conducted 6 interviews in total from a contact list that was provided to us by the client.
The interviewees all had prior knowledge of what calmversation is and have also been on the website before, which allowed us to ask questions more specific to the website experience.
Some important questions asked were:
The respondents indicated that they disliked how the calmversation website was too heavy on text and that it was hard to understand what it was trying to sell, which kind of reinforced our earlier hypothesis.
As far as method of learning goes, the consensus was that visuals are always better than texts, therefore we should strive to use more images and videos.
Here is a quote from one of our interviewees:
To get a better idea of what calmversation is about, we placed ourselves in the shoes of a student inside a sample lesson ran by Missy Jena. During lesson, we got to experience 1 of 5 themes that are offered to each grade class.
Overall, we found the experience to be fun, engaging and thought provoking.
To help us visualize the pleasure and pain points of a typical user’s journey, we created 2 User Journey maps to illustrate it.
The top map illustrates the highs of a user encountering the calmversation website and browsing with anticipation of possible educational benefits. However, that high is short lived as navigation frustration takes over.
The bottom graphic is basically describing the experience of a student inside a calmversation class.
The purpose the Storyboard serves is similar to our User Journey Map, it is also to illustrate a typical user’s pain point.
With so much research information available to us, it was important for us to gather our thoughts and categorize them in order to draw design related implications from it.
With the creation of an Affinity Diagram, our User Persona was also born from that. This is something that we will be using to guide our design efforts along the way.
Simply put, Margaret is a 36 year old teacher that aims to discover new ways of learning to help her connect with all types of learners.
The point of the User Flow that we created below was to help us visualize the paths and decision making process that a typical user may go through. As you can see, the user does not have to go through the entire website to reach the stage of purchase.
Depending on the user’s knowledge, he/she may want to purchase the course package as early as landing on the homepage. The more information the person seeks, the more he/she moves horizontally to the right.
As we mentioned before, with so much redundant information available on the website, we wanted to rearrange and condense this into a structure that users found easy to digest. Therefore, working on the Information Architecture was one of the most important things we did for our project.
First we conducted a Content Audit to analyze the current structure of the website. We ID’d every single page and section of the website, wrote a brief description of it, and also documented any outgoing links.
At the end of the exercise, by looking at duplicate outgoing links and similar descriptions, we were able to identify pages and sections that we deemed as redundant.
We also did open Card Sorting where we labelled each page and section of the old website into cards and asked participants to rearrange them in a structure that made sense to them. After running this exercise with several participants, we found commonalities between each session which helped us come up with a new Sitemap.
With so many ideas flying around it was challenging for us to decide what an ideal design should be, therefore we started our design phase with the Design Studio exercise.
For this exercise, we were all given 5 minutes to drew out what we envision the homepage to look like without talking to each other. At the end of it, we come together and discuss what we liked and disliked and agree on the ideal design.
Throughout our website we were inconsistent with our terminology. Words like “Program, Courses, Themes, Bundles” were all changed to “Courses” since we knew that they referred to the same thing.
calmversation — UX Case Study
Research & References of calmversation — UX Case Study|A&C Accounting And Tax Services
Source
0 Comments