Designing a Community For Elementary CS Educators
Springboard Capstone Project
A few years ago, I joined a small team of educators and designers, at 9 Dots Community Learning Center, a CS education non-profit based in Los Angeles. Despite the fact that we were seasoned teachers in the classroom, the task of teaching CS to our elementary students felt daunting.
What’s the problem?
As we work to expand CS education throughout our community, we rely heavily on our classroom teachers to lead the development of a sustainable CS program at their schools. Unfortunately, the pool of CS teachers at the elementary school level is limited. Additionally, our teachers are an island on their campuses. To support teachers effectively, everyone at 9 Dots works to foster a sense of collaborative community between professionals in the CS field as well as professionals in schools. In these gathering, we’ve arranged various opportunities for teachers to to learn, try, fail, explore, share, reflect, and lead together. Through surveys, we identified that a learning community for teachers was going to be a big factor in sustaining CS programs at our schools. The problem was that our teachers had limited windows of time to connect and build relationships with other educators during and outside of work hours.
An Attempt at a Solution
The 9 Dots Community Features I’ve designed consist of two simple components: a community chatroom and forum, and a message inbox. Currently, our PixelBots we have a classroom and curriculum management portal. The rationale is that by adding these two features, our users can draw supports through questioning, learning, and sharing from the greater CS community, without having to wait for email responses or in-person trainings to address their needs.
User Research
I started with the following assumptions:
- Most of our users have little experience in teaching CS
- Most of our users are not involved in a supportive CS educator community.
- Our users believe that community is necessary for collaboration.
The result of the research showed that our sample of users were composed of varied levels of experience in teaching CS. All users believed collaboration to be important for instruction. Majority of users were part of an educator community. Of those users, half of them indicated involvement in a CS community, 30% of which was online.
Users also expressed reservations about being part of an online community. Although they also expressed that an online community would be most effective as a supplementary form of support.
Competitor Analysis
In my user research, I asked users to indicate their familiarity with other CS education products, and identified two main competitors as a result: Code.org and CodeSpark. Code.org is a non-profit that has been nationally expanding access to computer science in schools. CodeSpark provides its product free to schools, and aims to turn programming into play for K–3 students.
I analyzed two key features of their product:
- User support via FAQ, forums, and messaging
- User Community
The information architecture of user support in code.org, distributes specific user support needs into three pages: bug reports, general and technical support, and teacher community. The most notable function in their support platform is the teacher community, which is organized by categories that users identify with, whether it’s the curriculum they teach or the type of community they want to be a part of. Community activity data is visible and topics are broad. All user created content is easily searchable.
CodesSpark supports their users through a Community/FAQ/Feedback page. Users can search their question or submit it via “contact support”, but the stand out feature of CodeSpark’s support is the transparency of what they do with user feedback. Users can leave feedback regarding functions they would like to see developed or updated, which is then backed by votes from other users in the community. If the feedback makes it to development, status on the development of the suggestion is announced.
Code.org provided the most thorough user support. That said, I found that I relied heavily on the search function, and topics were specific and narrow. Responses were generally provided by a Code.org staff or facilitator lacking input from teachers and other community members.
User Personas
My research indicated that users were reluctant about online communities. They felt that relationships developed in-person were essential to the success of a community. In such relationships, teachers could feel safe to share and try ideas. At 9 Dots, our instructional facilitators are the main point of contact with classroom teachers. I created two user personas based on these factors:
MVP Features and User Stories
Next, I settled on three MVP features and a few corresponding user stories:
Content Strategy
I developed more personalized user tasks based on my MVP and user stories to conduct an online card sort, which was used to create my site map and user flows. The card sort analysis generated three critical groupings:
- Homepage, classroom, and curriculum
- Community, FAQ, and messaging
- Profiles
With the influence of these groups, I created the site map below:
Here are the task-based user flows that correspond to each feature:
Wireframes and Prototype I
Currently, 9 Dots only supports web browsers on desktop and laptop computers. However, I chose to build out the prototype based off of a standard tablet frame to ensure that the platform could render well on smaller screens, and with the hope that our users could access their CS community with greater mobility in the future.
I referenced these sketches to create low fidelity wireframes that hinted at how each page would flow to the other based on three general user tasks:
- Sending and receiving messages
- Posting and searching a topic
- Managing privacy settings
Below is a selection of high fidelity wireframes.
User Testing
Users were given three tasks that corresponded to one of the general tasks used in designing the prototype. Tasks were given out of order.
Task A: Read and respond to a message.
- Users were able to make it through the process without much trouble.
- 75% of users chose to access their message by clicking on the “Inbox” tab in the sidebar navigation.
- A user voiced that the inbox icon at the top right was slightly deceiving because it reminded her of writing messages, but instead lead her to an inbox.
- 50% of users chose to click “reply” to respond to the message. The other 50% of users chose to respond through “compose a message.”
Task B: Set your privacy setting to your network and save.
- All users were able to access and change the setting on the profile page. Nothing notable or out of the ordinary occurred, however, one user suggested having secondary navigation selectors that allowed additional customization options.
Task C: Post a question about a “3rd grade loops lesson”.
- 75% of users attempted to solve the problem by clicking on Community, then selecting the “#3rd” topic and selecting a 3rd grade loops lesson, or by selecting “#loops”.
- 50% of users asked their question using the input bar at the bottom of the page, 25% of users click to respond to a thread, and 25% of users used the post button to post a message. None of the users tried to search the topic.
- One user was confused by how the post button worked. They assumed it would post the message that they wrote at the bottom of the page instead of leading to a posting card.
- None of the users felt that the task could be completed by selecting “help” from the navigation menu. They felt that the “help” they would receive would be unrelated to teaching concepts, and more for how to do things on the website.
Test Summary
All users who participated in the test had prior experience using PixelBots and other related platforms. The testing went well as users were able to accomplish all three tasks without major issues. The following were suggestions or comments users made during testing:
- Visible date and time so that post and messages can be properly organized by urgency (this was immediately implemented)
- Secondary navigation within features such as profile (i.e. profile may be a cumulation of part such as information, privacy, notification, etc)
- One message or class to be expanded at a time
- Some users found the dual way to post something on the community chat room confusing (this has been removed)
Visual Design
I decided to start with the current style guide for 9 Dots and modify it as necessary.
The style guide below shows slight modifications to saturation of color as well as a consolidation of colors. The main hues of blue and green were kept, and the gray was slightly darkened to create more contrast against the white. The font was simplified to a single font family.
Next Steps
In this process, I identified additional opportunities to gather data on user needs around sustaining and having greater stakes in their communities as contributors and leaders. Additionally, user privacy concerns revealed more opportunities for strategizing around messaging and managing networks.
Conclusion
The ultimate goal of this design is to create a supplemental but useful space where educators can stay in touch with each other, inform product development to increase the quality CS education in our schools, and have access to immediate content support and informal professional development spaces online.
If you are interested in the progression of this project, or want to know more about what we do with code, students, and teachers in Los Angeles, click our 9 Dots link to find out more, or contact me directly at hedy.lee@9dots.org.
