CONTACT
Microsoft
Designing for students and teachers
A digital hub for students and educators worldwide, empowering everyone in the classroom to have a voice, improving collaboration, communication and organization within schools.
Microsoft teams & The Assignments App
Assignments is specifically 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.
THE PROBLEM
Originally we launched two views, one calendar and one list view. Whilst initially these were well received, we heard students were worried about missing assignments, specifically how do they know that the research paper that's due in three weeks needs to be started this week? Users also missed the toggles either side of the cards to switch between weeks, and the current date format didn't easily translate leaving confusion amongst international users.
(Left: Assignments list / Right: Assignments week overview)
Research & usage
We asked students and teachers what they wanted to see and what they felt was currently missing, where their pain points were and discovered what tasks currently felt easy and enjoyable to them. We saw that the five day week didn't align with the needs of every school and the varying card lengths in the list view felt lazy (as well as not aligning to other Microsoft patterns). Our number one request on user voice was also for a calendar view of assignments. We received this feedback over the course of the first 6 months after our initial launch, and saw a desire from our customers for a simpler and more focused assignment view.
Card sorting & Information Hierarchy
To begin redesigning the assignment view, we began with the assignment cards themselves. We revisited our card sorting exercise to identify information 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 help evaluate our designs moving forward and to keep the focus at what works better for our customers.
Teacher Card
1. Student submission
2. Grading status
3. Due date
4. Assignment name
5. Class
Student Card
1. Status
2. Points available
3. Grade (after due date)
4. Due date
5. Assignment name
6. Class
Foundational Needs
Teachers not only instruct, they also help troubleshoot and problem solve technology every class period, championing our product to their students. The more similar a teacher's view is to a student's, the more confident they feel in assisting and teaching students to use the product with them. Another top user request was to have a way for the teachers to enter a student preview mode, to know how the assignment is appearing for their students and for the two current user views to reflect one another more.
USER flow (Teacher)
This helped translate into a consistency between both the look and feel of the Assignments app, as well as the user flows. The current flow itself felt natural to students and teachers and so we tried to not deter from the current mental model unless we hit one of their pain points.
Below is the teacher flow for the Assignments app, the student flow is directly reflected across the assignment list, view assignment and previewing and editing their own work.
CARD EXPLORATIONS
Initially we looked at creating assignments with more of a personality and a sense of delight behind them but quickly began to see that when you have 6 of these on a screen at once, they become crowded and over-whelming. As a result, we went back to our research distilled the information even further. We also revisited other design patterns across the company to see what we could leverage and where we could maintain consistency and simplicity.
Competitors & Partners
Whilst redesigning the current cards, we continued to take into account both what our partners were doing, (Microsoft To-Do, Microsoft Forms, PowerSchool, FlipGrid...) and what our competitors are doing (Google Classwork, Apple SchoolWork, Canvas...). We quickly saw themes in the information being presented (title length, statuses and theming...) and listened to users of each product to direct our decisions more.
Further card explorations
Originally we had envisioned Assignments as aligning with tasks and to-dos found else where within Microsoft, however after testing we realized to-do items felt confusing in this scenario: does the student check the card off after they've turned it in or can the teacher check it off the student's list once they've graded it? This prompted further questions, what other ways can we clearly identify status? And what types of status were most important to each user?
The solution
The redesign takes into account both user research and feedback, from our prototypes and our previous designs, we kept the model simple and as seamless as possible, surfacing relevant information at the right moment. Throughout the design, we also took into consideration how this grows in the future to create a base and a framework that becomes adjustable and flexible as the app grows.
In order: the assignments list for a user with the dark theme mode, the create an assignment modal experience and the assignment review page for a teacher.
Cross platform & Mobile APp
From the beginning, we wanted whatever we created on desktop to closely align to our tablet and mobile experiences, especially since tablets are just as widely used within the eduction landscape. This included maintaining the card information hierarchy, consistency between student and teacher views and most importantly, keeping a consistent mental model.
Simplifying Onboarding
Working with our motion team, I created simplified UI illustrations which were then animated and used as both marketing materials as well as on-boarding tutorials for our users. These were perceived to be a lot simpler to follow than a set of instructions and are a memorable takeaway for teachers after their professional development training.
Looking ahead
So far feedback has been positive but we want to continue to simplify the experience further and really bring together all class materials into one place? The assignment list is personal to each student, but how do we make the rest of the app feel more personal and where can we incorporate more moments of delight throughout? Can we further differentiate the app and experience depending on the grade level and capabilities of the user, allowing the experience to expand and grow with them?