Assignments app
Microsoft Teams showcasing the updated mental model and UI refresh for the Assignments app.
Microsoft Teams
for Education
Assignments UI & mental model refresh

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.


Assignments is focused on the exchange of homework between student and teacher.


Understanding Where the current experience wasn’t meeting the needs of both teachers and students

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.

Existing experience
The existing experience focused on a 5 day week, (helpful for students in America but not internationally), many didn’t realise the calendar could be viewed either horizontally (above) or as a list and days or weeks with no work due appeared misleading.

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.


Scaling our UI and education focused design system

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).

Initial assignment card iterations
Our first iterations focused on delight and stepping out of the bounds of what we already had. We played with hierarchy, colour and illustration, and size to really challenge what we thought we were looking for.

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.

Focused assignment card iterations
Narrowing down and focusing on how this scales as we continue to develop and add new features, and how we maintain hierarchy between states and the different views for a teacher and student.

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).


Assignments is focused on the exchange of homework between student and teacher.
A new, education focused ecosystem for microsoft

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.

Mobile assignments
It was important to us that any student or teacher could access their work from anywhere. As a result, how our designs scaled was considered at every step, both in terms of responsive UI design but also ensuring legibility and load times on low quality devices met our expectations.

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
for Education
Class hub & a simplified navigation for all

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.


"Teams is not made for the classroom and it shows. It's being pushed into a spot it doesn't belonG"


Understanding Where the current experience wasn’t meeting the needs of both teachers and students

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.

Existing experience
The existing experience has 4 primary areas: the global navigation, consistent throughout Microsoft Office, the left app bar to navigate throughout each app within Teams, the left navigation pane to switch between teams (or classrooms and school groups) and the stage for customer to view activity for that team (including homework, presentations, students/members and files).

‍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.


Cross team collaboration and a Focused design sprint

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.

Initial ideas focusing on simplification & personalisation
Our first iterations focused on delight and stepping out of the bounds of what we already had. We played with hierarchy, colour and illustration, and size to really challenge what we thought we were looking for.

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.

A typical classroom set-up
Note the bold colours and general visual stimulus present within any classroom. We constantly heard feedback, (especially from students), that the app lacked colour and didn't excite or interest them at all.
Hub and spoke mental model
The updated navigation, more closely aligned with current UI and capabilities of the product at the time, but providing clear focus for a team/class scenario.

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.


"Looking forward to this! Thank you for listening, Microsoft."
Reducing noise And increasing productivity and focus

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.

Class hub launch video
The end result removed the complexities and noise from the navigation, instead surfacing it within the team and meeting our students and teachers where they were vs. fighting for their attention from the start.

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.

Microsoft Teams
for Education
Additional projects


Rubric GRading

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.

Turn In celebrations

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!

Rubric grading and a rainbow unicorn celebration
Throughout my time at Microsoft, I also helped create these videos to share on social media, providing the framework/storyboards and all the simplified UI, before working with our motion team to create the final result.


Third party integrations

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.

Integrating tools to help grading and check for plagarism was one of the first third party integrations we worked with, creating a minimal entry point for teachers to confirm if work a student submits is copied from either online or another student's work, allowing them dig in and to identify exactly which parts were duplicated when needed.


Focusing on accessbility

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.

Assignments app dark mode
We designed and implemented both dark and high contrast modes across all our applications to both align with what Microsoft Teams already offered, and to ensure the product was accessible to all.
hi! I'm paula
say hi!


Microsoft Teams for Education
A digital hub for students and educators worldwide, empowering everyone in the classroom to have a voice, improving collaboration, communication and organisation within schools.
at Microsoft */
Product designer
2016 – 2019
The assignments app refreshed within Microsoft Teams.
We streamlined the experience for both teachers and students to provide focus and better showcase upcoming assignments, tying it closely to the way educators create, turn in and grade homework.
Updated grading view complete with new integrations
This was our first step in updating and streamlining the grading experience, offering grade sync to external applications, and support for rubrics and a broader range of pedagogies.
Assignments on the move
Our priority was to make Microsoft Teams and assignments accessible from anywhere. We know that teachers and students are busy, always on the move, and not necessarily within range of wifi meaning that our designs had to adapt and scale responsibly.


Microsoft Teams for Education

Crafting a new vertical at Microsoft For an audience that needs technology with both a purpose & a personality.

Assignments is designed to cater to the needs of the education industry, allowing teachers to quickly assign work to their students, see who has and hasn't turned in their work, and to grade and sync those grades seamlessly with their school mandated systems. For students, it's a place where all their homework and class materials live, creating a consistent home for their school work and a place to view teacher feedback and keep up-to-date on their grades.
Product goals //
Create a lifelong connection between students & the Microsoft brand
Provide educators with seamless access to the tools they need to achieve success within their role
Establish a voice for education through the broader Microsoft brand


For three years I was immersed into the ed-tech space, meeting with students and teachers every week to gather feedback on designs, visiting classrooms to learn first hand how our products are being used and representing Microsoft at conferences around the world, standing alongside educators to help demonstrate and showcase our work. Whilst it was a great opportunity to be a part of such a highly anticipated launch, it was just as rewarding to meet and work with those we were designing for. Most memorably, watching teachers get excited over rubrics and begin designing their own solutions, as well as seeing students naturally react and engage with our rainbow unicorns and ice-cream making machines.
Our team to learnt as we built (we went to market for the EDU vertical in under four months) and we continued iterating because we felt our work had the opportunity to have a positive impact on both our students’ and teachers’ lives. From this experience, I treasure the capacity we had for research, and the chance I had to help lead design and craft the experiences that continue to define the Education space and its identity under the Microsoft umbrella.
& business impact //
Watched the app grow from 0 to over 100 million daily active education customers
Carved a space for education within the Microsoft brand #MicrosoftEDU
Created a baseline for vertical teams within Microsoft Teams and the broader Office 365
What we launched & how we did it ** //
01. Assignments refresh
02. Class hub
03. Additional projects

Have a question? Or feedback? Just want to say hi?

Please get in touch! I love hearing from others and always up to make a new connection. */