The assignments app is a place where all class materials live for both student and teacher, often including homework, class presentations, tests and grades. In 2019, we iterated on and streamlined this experience based on early feedback from educators. We refreshed the UI and provided a clearer, more focused view for students that mapped to how they thought about and completed homework, and for teachers, we focused on how they created, assigned and then graded homework to help streamline their process.

*

*

When we initially launched the assignments app, the experience was a calendar that replicated the physical student and teacher diary found throughout schools. Whilst initially well received, our top request was to have assignments show up on Outlook (their school calendars).  We realised the calendar view we provided wasn’t substantial enough to be a substitute for Outlook (and nor should it have been). We also knew we could help better solve the problems students encountered, for example a research paper due in six weeks that wouldn’t show up on the calendar until the week it was due. The same was true for teachers, having no reminder for either themselves or their students, especially for projects with phases that required more than a week of work. With further iterations we explored tasks and to-do lists, working alongside fellow teams to explore and test existing patterns found throughout Microsoft, and specifically Microsoft Office.

The primary difference we discovered is with lists, a single person is marking the task as done, this isn’t accurate for the school scenario since students and teachers need to mark the work as completed (turned in), and graded. We tested our theories and a student viewed their work as complete once a teacher had turned it in, but the teacher didn't view that as complete until they had finished grading everything turned in for that assignment. With this, we developed our own system, using the guiding principles leveraged from other teams during our explorations as a baseline.

*

Once we better understood the jobs to be done of the assignments app, we narrowed our focus down further to the assignment cards themselves. To begin redesigning the Assignments view, we began with the assignment cards themselves. We revisited our card sorting exercise to identify information that was the most useful at a glance and what they were comfortable searching a little harder for. This helped us to develop a metric to evaluate our designs moving forward, and to keep the focus at what works better for our customers. This proved especially helpful as guidance during critiques with stakeholders and team members who weren't as familiar with our product or our audience but found a perspective they could relate to. (Whether this be their own experience using a task focused app, having taught or mentored others before, or being familiar with homework through having kids of their own).

We explored everything from blue sky visions, to mapping 1:1 with the current Microsoft Teams UI, all the while striving to develop a personality for Education at Microsoft with each iteration. We aimed to develop a sense of delight within the task flow for both students and teachers, and knowing the app still had a lot of potential growth, we also designed with scale and flexibility in mind. We fought for simplicity throughout and the result maintained the familiarity of Microsoft that classrooms are used to, but allowed us to begin to weave our own personality into the experience too. This was highlighted by subtle UI updates, such as increasing our use of illustration and colour, increasing the text size where appropriate and giving cards more friendly, slightly rounded corners. From an experience perspective, we were more purposeful on the content we surfaced, keeping to a minimum and providing hierarchy on a must know need to know basis.

Another common pain point is the many hats teachers find themselves wearing on a daily basis. Not only do they instruct and teach classes, they also troubleshoot and problem solve technology for every student in every one of their classes. How swiftly a teacher can solve these technical issues also has an affect on their student’s trust in them and their perception of Microsoft as a company. For our team, this was reflected in the product by ensuring that even though teachers and students had different tasks to fulfil, their views and interactions with the app felt familiar no matter what they were looking at. (Later on, we’d also go on to launch a student preview mode for teachers, allowing them to test and view any assigned work before the student could see it).

*

This update was well received, both internally and externally. Our team was grateful that we’d closely aligned with existing patterns, but maintained a friendlier and less rigid application of it that it felt more inviting than the current system built with a much more tech savvy audience in mind. Our students and teachers were appreciative that they now had easier access to the information they needed and at a glance, they could now get a sense of how much they had to complete and by when.

As next steps, we wanted to continue to make the assignment list and Teams space in general more personal to each student, and look for ways we could incorporate more moments of delight throughout the end to end experience. This applied as much to students as it did with teachers! Looking back, we also were focused on late middle school to high school students (13 to 18). Although this was our primary audience at the time, we could have pushed further to look at how this app grows with students as they progress through school, how does what’s important to them change over time and how does this impact their connection with our products?

Microsoft Teams was originally imagined as a compete for Slack within the workplace, to ease communication and allow employees to keep up-to-date on developments across their company. Within schools however, it felt forced and educators quickly uncovered that this tool wasn't initially built or designed with them in mind, being overly complex and containing a lot of features the majority never saw themselves using.

*

*

We realised the constant notifications and stream of information was creating noise within the app and frustration amongst teachers and students. By notifying students of conversations happening in Chemistry and not pertaining to the English Literature class they were currently in, classes would be disrupted and focus would quickly shift elsewhere. The UI was also overwhelming, with a total of 54 buttons present on the screen at any one moment, okay for those familiar with workplace technology, not so much for a teacher with 30 twelve year olds they need to help get where they need to be. Teachers needed to feel in control of the tools they were using in order to help feel in control of their classroom, and we needed to simplify and better match the tools they were already familiar with and comfortable with.

‍Through many visits to schools, co-design sessions with teachers and brainstorming meetings with both our team and the core Microsoft Teams team, we found the left navigation to be a place that could provide the most value to our educational customers. From a technical perspective, this was also the easiest for us to iterate on and build since it was closer to the stage (where conversations happened and assignments could be viewed), as well as being more accessible to our current educational apps. From what we'd learnt, we knew this was the area that quickly became the nosiest (teachers returning after a quick lunch break to see unread notifications across every class/team), and as a result was the area we could have the most impact to help reduce friction and noise. From a UI perspective, teachers and students both loved the illustrations and icons we'd generated for classrooms too, and it was felt that we weren't doing them justice, that the team images were too small to feel custom or geared towards a classroom and were hard to identify at a glance.

*

I held a five day sprint with designers from the core Microsoft Teams team to identify what students and teachers were trying to achieve here, and where we currently were failing to meet their needs. For each day, we focused on iterating on a specific theme, looking at how we could reduce information density and cognitive overload, where we could spark moments of joy and bring more of the personality of education and schools to the app, and then where we could simplify in general, what did Teams have that teachers and students didn't need yet. Throughout the week, we met with stakeholders on both sides to discuss which pieces could also be applicable outside of the realm of education and could be applicable at a platform level too, vs. just a vertical level to help build buy-in amongst the teams and also extend the reach and value of whatever we implemented.

We kept returning to the mental model of a hub and spoke, wanting to provide our educational customers with a more informational overview of what was happening across each team, giving them the space to identify which required their attention immediately and which didn't. We surfaced assignment/homework information, any @ mentions or lively discussions, and then any upcoming events or notable announcements within their teams. We also wanted to push the personality of the app and of each team or classroom within it further, making it quicker and easier to identify, but also providing teachers more flexibility to make it feel personal to them and to gain a sense of ownership within the digital space.

Following the design sprint, we compiled our learnings and maintained our momentum within the team to iterate further, identifying what was possible and what outcomes we were specifically targeting with this release. Overall, our key outcomes involved ensuring there weren't several ways to accomplish the same task, that the path and experience was clear but still self-guided. We pushed for simplicity and reduction every place we could, challenging every piece of UI and button, making sure it had a purpose and its value was clearly communicated. We also needed to maintain an experience that felt familiar to the Microsoft brand, but that reflected the classroom and where students and teachers were now, so that it could grow and scale with them throughout their careers as their comfort levels shifted over time.

*

We launched this to educational customers initially, with the aim to later expand and launch to the general Microsoft Teams population, gauging that it wasn't just students and teachers that benefited from having a optimised and concentrated view free from surrounding noise. We reduced the visibility and need of channels, noticing that many didn't see a use or need for these and were confused at the concept until they began to become more familiar and comfortable with Teams. We also reduced the hierarchy of the "Create and join a team" and "Favourites" action since educators are assigned a class, both these weren't as necessary within the school environment. The ",,," call to action was also overused throughout the ecosystem in general, so much that students and teachers stopped interacting with them because they couldn't find the information they needed at any given time. We collapsed and hid these where we could, surfacing them in a single location at the team vs. channel level, creating more consistency within the menus and again reducing the amount of on screen actions.

This was a cross-team effort that spanned multiple quarters of development and in the end, followed my time at the company. Fellow colleagues told me it had been well received both within the company and throughout the education community, helping to set a standard and allowing the team to both continue iterating and building new features, whilst simplify and finding ways to make the current experience even easier.

*

Rubrics are a key component of a teachers workflow to help them clarify grades and provide consistency amongst feedback for students. We implemented a way for teachers to create, import and then grade a student's work with their rubrics efficiently, also allowing the rubric to sync to a school's grading system through third party applications, saving teachers time entering grades in two different systems.

We knew our product lacked colour and excitement to our customers, and in general we wanted to help make turning in homework exciting, celebrating those moments of success with students where we could. As a result, I worked alongside the art director and illustration team to create and implement our own unique characters and animations that were creative, funny and easy going. A rewarding surprise for any student!

*

Teachers are using a broad range of apps to help them within the classroom, varying by the subject and age of the students they teach, the technical ability of those students and also dependant on the schools geographical location. Instead of aiming to build out every feature within Teams, we worked more closely with both first and third party applications to help them better integrate into our experience. This included tools for grading, classroom quizzes, field trip forms, presentation tools and feedback loops, helping to keep both students and teachers focused on the work their doing and removing the friction of opening up, signing in to and switching context between applications constantly.

*

Accessibility was a core theme at Microsoft, where we considered colour contrast settings, (including high contrast), tabbed and voice over navigation and general ease of use. Since the Assignments app was technically an iframe within the product, we created our own themes and did our own due diligence to map to the broader Microsoft Office offerings, ensuring that our product was still accessible to everyone it could be.