Page Authoring Redesign

During my time at Blackboard, I focused on the Web Community Manager product, a content management system for K-12 school districts. Our page authoring experience was outdated and difficult to use which put a significant strain on the majority of our users. My team set about redesigning the experience to optimize usability and modernize the flow. I was the lead UX designer on this project, working alongside our star team of UX designers and software architects on the product design team as well as our product management and engineering teams.

 
 

 

The Problem

The original page authoring experience had two 'modes' so users had to arrange and edit their content in separate experiences. This was difficult to use, caused confusion and reduced the cognitive relationship between what users saw when they were editing and how their content displayed on the website. 

The original edit mode

The original edit mode

The original design mode

The original design mode

 

 

Planning

At the beginning stage of this project, the lead architect and I created a design brief which outlined personas, design assertions, architectural components and risks based on the problem we saw and the job stories provided by product management. The design brief was used as a tool to get an initial gauge on user needs, the size of the project and our first assumptions of what the solution would involve. 

 

 

Sketching

After the initial evaluation of the project, I started sketching out ideas to quickly find a basic structure that I thought would begin to solve the problems we were working with. I talked through ideas with my team and reworked sketches until I felt I had a solid beginning design.

A preliminary design sketch

A preliminary design sketch

 

 

Wireframing

Once I landed on a design that I wanted to move forward with, I worked through creating low fidelity wireframes to lay out and set interaction specifications for the new page authoring experience. It would give users the power to arrange and populate the content of their pages all in one experience, which would also give them a better idea of how their page would actually display on the site. 

Team Feedback

Our team had weekly meetings to go through designs we were working on. We showed and talked through what we were working on, got feedback and discussed any questions or difficulties we had. Since the team was comprised of software architects as well as designers, we maintained a good balance between pushing the design and anticipating technical limitations even at the early stages of our designs. As I worked through the wireframes, I made adjustments based on discussions in these meetings.

 

One page of the design wireframes. Other pages detailed further interactions and steps through the flow

One page of the design wireframes. Other pages detailed further interactions and steps through the flow

 

 

Prototyping & User Testing

Since this project was for a major feature that would affect nearly all of our users, we made sure we planned time to test the design as many times as we could throughout the design process. After the first wireframes were done, one of the other designers set up an independent working prototype with just enough functionality that we could do initial facilitated usability testing. I recruited and brought in a few teachers (who represented our key persona) and had them attempt to complete several tasks while their screen was recorded. I then shared the videos with the team and other stakeholders to evaluate pain points and strategize possible solutions for weak areas of the design. 

 

 

Wireframe Iteration

Because the prototype was independent of the product code base, we had freedom to iterate on the design before investing resources in development. I reworked the wireframes to quickly compare different solutions and talk through them with the team. I landed on a design which had all the major components and features of the first iteration but had a modified arrangement and interactions which we felt would be more usable.

High Fidelity Mockups

This design involved an all new experience which wouldn't use our existing UI patterns and classes, so our visual designer created high fidelity mockups and assets to pass off. 

The same page of the updated wireframes with a reorganized design

The same page of the updated wireframes with a reorganized design

 

 

Iterate > Test > Repeat

A UX architect on our team did most of the initial development for this design because of limited resources on the engineering team at the time. This gave us even more freedom to iterate as we went because we could discuss changes live if something didn't feel right. After it was mostly developed, I planned another round of facilitated usability testing, this time on location at a client's school district. I had each user go through a set of key tasks while recording their screen and, in addition, I had them complete a System Usability Scale survey afterwards. I took the videos back to the office and again shared them with the team and stakeholders to evaluate the usability of the experience. We iterated on the experience, this time in a live development cycle.

At this point the product manager had planned a pilot with a select group of clients to continue validating the experience. We released the feature to them, gave them some time to use it and set up weekly check-in calls to hear their feedback and any problems they encountered. My director set up a set of release criteria based on System Usability Scale scores, key task success rates and defect counts to ensure that it would be released at it's best, having spent enough time in the pilot to gain feedback. This project is still active at Blackboard. 

A screen recording from facilitated usability testing including the user to capture facial reactions

A screen recording from facilitated usability testing including the user to capture facial reactions

The developed page authoring experience

The developed page authoring experience