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
view my work
say hi!


Redesigning the Website of the biggest tennis tournament
Bringing the tradition of Wimbledon, the prestige of the tournament and the classic nature of the grass-court sport online for a new generation.
personal project */
Bringing centre court to the centre of the site
The largest court at Wimbledon is Centre Court, it's where the stars of the game play and the toughest matches of the week are fought. Surfacing this on the homepage help delivers what fans are looking for right to them.
Utilising existing brand assets to showcase the event
Wimbledon has a vast array of beautiful photography that fits in perfectly with their brand. This simply looked at how that could be better utilised to engage visitors to the site.
A more intuitive way to navigate a large draw
No matter the sport, I'm yet to see a tournament draw that's easy to use and intuitive, that doesn't require you to go back and fourth between pages to see the progression of a player throughout the tournament.
Keeping up to date with the latest upsets and close calls
The live match updates aims to bring fans that bit closer to the action when they're unable to watch it live. I also hoped it'd prevent the need to refresh when a point is taking a long time and the page feels static/frozen.
Bringing fans closer together with interactive matches
Explorations for mobile began to look at how viewers could interact with and use the mobile site, even if they're watching this elsewhere.


Redesigning the Website of the biggest tennis tournament

For 16 years i wanted the same thing, to have the chance to play at wimbledon

Having long been a fan of the sport and of Wimbledon specifically, I’m disappointed in the quality of their website, both the usability and the content they surface, especially knowing the quality of photographs they have access to. Given this, I took it on myself to refresh the site using my knowledge of the sport and the event, focusing on getting their visitor to where they want to be, surfacing only the relevant information at the right time, and really trying to bring the quality and tradition the event brings in person to their online presence.
Personal goals //
Create a site that represents the Wimbledon brand that many know & love
Produce a portfolio piece that showcases my interests & personal design style
Complete this project in under a month (including UX, UI and motion design)


I grew up playing tennis (for 16 years), glued to the television anytime Wimbledon came on and dreaming of the days I'd get to play there myself. Having visited a few times, there's an aurora encapsulated within the venue, highlighting the traditions and the status of the event that I saw as lacking throughout their digital presence. Having wanted to be a tennis player for so long and to play on centre court in front of thousands, this felt the next best I could do, helping redesign the site of a place I had known and loved for so long.
I created this around the same time I completed the Drake project and I wasn't sure whether to continue working in-house at companies, or take the leap to full-time freelance. I needed this project to showcase my capabilities to clients to a level I didn't feel I could achieve within my day to day role at the time. Both projects were successful in that I was able to attract new clients and trial a freelance career, though I later realised I missed being closer to the end to end process, understanding a customer's needs and iterating on a project vs. handing it off and moving on to something else entirely.
See the full project over on my Behance site ** //
Full project

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. */