Chenxin Wang
tools.png

Tools For School - Responsive Design

 

TooLs For School

Tools for school is a web and mobile app which provides a peer to peer solution for tools sharing at school. The ideation of this app is based on our user research of 15 teachers at children's school and primary school, where tools and supplies are needed in large amount for in-class activities. I collaborated with UX researchers to identify users’ needs.

As a designer, I first sorted out data collected from the user research at CMU Children’s School and then created personas and customer journey map catering teachers and school director’s needs. I also designed the screens and prototyped low-fi to high-fi web and mobile mockups.

 

MY ROLE: UX Designer

DATE: Sep 2017 - Nov 2017

TEAM: Cheng-Hong Wang, Moe Mohammed, Pankaj Ajit

TOOLS: Sketch, Balsamiq, InVision

 
 

Overview

who are our users?

We identified two types of stakeholders in the tools and supplies sharing process. One is school teacher, and the other is school director. Teachers at children’s school use a mix of consumable and reusable items, such as classroom supplies, books, tangrams, etc. and most items are shared to save on space and/or money. When the tools and supplies are used up, school directors have to process the requests from teachers and buy tools and supplies within budget.

 

WHAT is the problem?

For teacher:

Tools and supplies are mostly shared at CMU children’s school. However, it’s always happening that teachers have a teachable moment but are missing the tool they need because someone else are using it. The tools are always misplaced, so they have to spend a long time tracking down the tools.

For school director:

The school budget is shrinking each year, however, school directors still have to provide the same education within the given budget. The number of tools and supplies requests that are unfulfilled are growing each year.

 
 
 

HOW does our product help?

time3.png

For teacher: The app, Tools for School, helps them easily track tools and supplies status with RFID code scanning and share tools status among all the teachers. It saves time for teachers to locate who’s using, where is the tool, and when will the tool be available. The bulk buy feature allows more than 5 teachers to request for the same supplies and buy with a lower price.

For school director: The app helps school directors to get a clear overview of how much budget is left for each teacher, and approve or reject teachers’ requests on-the-go. The bulk buy resource can be shared by both teachers and school directors.

 
 
 
 

Research Process

User interview

From teachers:

"It's hard to track down tools and shared tools are always misplaced or missing." ——a teacher from children's school

edit.png

There is no formal system to keep track of who has what shared items at any given time; instead, people talk to each other about when they will need certain tools and supplies and generally agree to stick with the plan. An estimate of half an hour per day per teacher is spent tracking down missing tools, which is a waste of time.

Design Challenge: How might we save time for teachers on tracking down tools?

 

From School Director:

"Young children use up consumables quickly. And the budget is lowered each year." —— the school director of primary school

budget.png

The needs of consumables are high because chalks, paper, pencils, etc are quickly used up, broken or lost by young children. What's worse, the budget is lowered but schools have to provide the same program each year. There are an estimate of 60% tools and supply requests are unfulfilled due to budget constraints. 

Design Challenge: How might we allow school directors to fulfill tools and supplies requests within limited budget?

 

Competitive analyasis

To better understand how the problem space, we investigated other tool management software. We focused on how they track and manage tools/assets, how they save and time for users and how to keep all their users on the same page with dashboard.

CA.png

Our main findings are:

  • Asset barcode scanning. Almost all of the tools management software identify equipment by scanning its barcode or QR code straight from users’ phone.

  • Collaborate as a team. Users and their team will save a lot of time and frustrations by always knowing the real-time availability of the equipment.

  • Few products target requesting new equipment and lower price. Most of the products can only track equipment that are already in their system, and they do not have budget issues as the teachers do.

The results motivate us:

  • Apply barcode scanning in our design, and visualize tools status among teachers to keep them at the same page.

  • Brainstorm a way to allow teachers to buy supplies at a lower price.

 

Design Process

Customer Journey Map

The main goal for the teacher was to borrow items from a supply closet as planned, and the main goal for the school director was to approve teachers' requests for tools and supplies. 

 
 
Customer Journey Map.png
 
 
 
Customer Journey Map director.png
 
 

Personas Generation

 
persona_teacher.png
persona_director.png
 
 
 

Ideation

For solutions, we chose to start with a broad scope and then trim it down so that we wouldn't be limited to one certain aspect. We adopted a “Design thinking” based approach to generate features that we thought would be useful to the users. We clustered together similar features, then ranked the features according to the needs. And they fell into three categories: request management, budgeting and tools & supplies sharing status. Based on these categories, the MVP features that we decided to include are:

  1. Barcode scanning

  2. View tools status

  3. Requests management system:

    • Input requests (normal/bulk buy)—teacher facing;

    • Approve/reject requests—school director facing

  4. Transparent budget shown to teachers

 
 
brainstorm.png
 
 
 

Storyboard

 
requests management

requests management

view tool status

view tool status

barcode scanning

barcode scanning

transparent budget

transparent budget

 
 

information architecture

user_flow.png
 

wireframes

We created the following wireframes to make our ideas more concrete, and to make sure that the Information Architecture we derived make sense.

 
navigation map.png
 
 

User test

We took the prototype through a round of user testing. Given the multiple roles and scenarios we have, we were able to test the 3 main ones, teacher's interface on mobile and laptop, and director's interface on mobile. 

The user testing of the prototype was through a cognitive task analysis method--think aloud. Participants spoke their mind as they were testing the prototype which indicated areas of confusion or frustration.

After analyzing the user testing results, we updated the prototype and addressed the majority of confusion points.

 
 
 

Interactive Prototype

 
 

 

 

Interfaces for directors to approve teachers' requests on the mobile. 

 

 

 

 

Interfaces for teachers to pick up tools and RFID scanner on the mobile.

 

 
 
 
 
 

Laptop interfaces for teachers to input their requests, view budget details and check request status.

ezgif.com-optimize.gif
 
 
 

Style sheet

For the first version, we extracted colors that could represent the brightness, calmness and accountability of our website. However, during the group discussion, we found out primary colors couldn't fully convey the feeling we got from the mood board. Hence, we did a second version. In the second version style sheet, we extracted more colorful and joyful colors, such as pink and orange.

 
 
Version 1

Version 1

Version 2

Version 2

 
 
 

Moving Forward

As an in-class project, there are still some details in the design are not perfected. I’d like to do more rounds of user tests and perfect all of those functions, especially the bulk buy function.