Teacher-friendly content editing.
Enabling educators to easily update content for their students and parents.
Overview
In the Schoolwires Centricity Product (which later evolved into the Blackboard K12 Community Engagement solution), content authoring and editing were key features. For two years, our design team focused on enhancing the existing experience before launching it through a pilot program.
While we worked to help schools engage with their communities, one area that we learned teachers were continually challenged with was the ability to communicate with their classrooms and parents regularly and seamlessly.
We looked into existing tools to see what we needed to improve before creating something brand new. We already had a way for them to create a web page of their own, which would satisfy may of the requirements. As we dug in to data and discussions with customers and our customer service team, we learned that it was not being used as frequently as the teachers indicated they needed to be using it.
It became clear that this space was also not utilizing some of our newly added applications. The experience had evolved to include more sophisticated applications and content, and over time that meant the way we originally allowed users to edit content needed to be updated.
We wanted to make sure that:
It was obvious what type of content users were adding to their page
Where it would display
How to edit content
Be able to preview it accurately on both desktop and mobile before publishing it.
The final solution was a more intuitive system for selecting, editing and publishing blocks of functionality to be added to a web page.
Redesign
Drag-and-Drop Interactions
I helped refine drag-and-drop functionality to ensure it was intuitive, accessible, and easy for users to understand, while also factoring in accessibility standards.
UX Designer Kelly Reese led the project, collaborating closely with users and stakeholders to gather feedback, conduct usability testing, and observe interactions with both the existing and proposed experiences. This process of iteration allowed us to refine the design as we gained a deeper understanding of user needs and pain points.
Through these iterations, we developed a business-ready solution and a stakeholder-approved prototype, which was then brought to life by colleague, UX/UI Architect Sara Hardy.
After additional rounds of feedback and refinement, I worked with the team to define consistent component styles and UX patterns that would improve usability while minimizing disruptions for legacy customers reliant on existing workflows.
Constraints
Fitting within existing global interaction patterns that were recently integrated from our acquisition by Blackboard.
Minimizing disruptions for legacy customers reliant on existing workflows.
Considerations
Content Layout Interactions
We worked to define interactions that would streamline content layout, allowing users to easily edit and preview content in a way that closely mirrored the live preview experience.
We made sure to account for technical limitations with more complex modules, which required different handling.
Mobile Considerations
While our primary focus was creating an adaptive experience, we also prioritized responsive input patterns for mobile users, ensuring that interactions were as context-sensitive as possible.
Prototypes and Exploration
Decisions
Using the archetype from the new design language and incorporating it into the current experience without feeling clunky was a challenge. Our system had historically used a tree navigation hierarchy, with dynamic admin/content authoring areas.
This new pattern was to slide in as an overlay, so we decided to go all in with the new language in the introduction rather than playing it safe. We decided that this made more sense than putting so much effort into our original idea of mixing two aesthetics and treading lightly. It also had a bigger impact and feel of “new”, while setting the stage for further aesthetic enhancements to come.
Results
The final solution was a more intuitive system for selecting, editing and publishing blocks of functionality to be added to a web page. This empowered teachers to communicate with their community with ease than many have never experienced before.
Using a pilot program helped to confirm our decision, as the new look and feel packed a punch and felt fresh and smooth.