Photo of children at a desk facing forward from a educators point of view.

Turnitin

Windows 8 Store App

Type of Project:

Develop an interactive and engaging experience that empowers children to do their best original work and seamlessly submit work and simplifies grading and reporting for educators.

My Role:

Design Lead as Product Designer and User Researcher

Timeframe:

2 Months - 2012

Tools:

Pen + Paper, Post-it, Adobe Creative Suite, Invision

Challenge

Working with Turnitin and Microsoft; a couple colleagues and I took up the challenge to create a new user experience of Turnitin’s plagiarism grading tool onto the Windows 8 Store App Platform. What we set out to do was not just port the application, but to create an entirely new and innovative user experience following the Modern UI design patterns, and push them to their interaction limits.

Approach

Our overall design decisions evolved over a few iterations through user evaluations with teachers and peers especially on the educator’s experience in interacting with the grading features and what kind of information we would bubble up on the Hub (Home) Page.

Wireframe of Hub Screen for Educators
Wireframe of a Student's Paper with a Inline Commenting Widget

As I refined the wireframes following a design critique session with colleagues and end users, I change the Section page title to reflect the name of the class versus the name of the assignment. In this desing phase I incorporated some of the visual design from our design system.

Initial Wireframe of a Course Section Page
Final Wireframe of a Course Section Page

A couple other functional challenges were to consider how teachers work at different grade levels and institutions. For example, a university lecture might have posts at several institutions and they would need a way to quickly disseminate their classes and students.

Initial Wireframe of Grading Rubric Bottom Sheet
Final Wireframe of Grading Rubric Bottom Sheet

My colleagues visual design approach was to be authentic, with the feeling of a school desk, and keeping the Metro design philosophy of the visual UI not being distracting to the core features.

Visual Design of Hub Page
Visual Design of Course Section Page

Of the many Modern UI projects I have worked on, this remains one of my favorite user experience projects in the Windows 8 Store App space.

Want to know more?

Connect with me and we can go as deep as you fancy.