Designing a workflow-driven mobile app for educators
PROJECT: RyeCatcher is an existing web application for teachers and administrators to track behavior and provide a community of support for every student. In a two-week sprint, I worked to translate RyeCatcher web functionality and optimize key features for mobile use. The two big challenges were identifying the small chunks of "free time" when educators might use RyeCatcher on mobile and then designing an actionable task flow that allows them to accomplish their goal quickly and effectively.
CHALLENGE: Work with a client to help translate functionality from an existing web application into a mobile application; 2 weeks
TOOLS: Adobe Illustrator, Sketch, pen + paper
MY BIG QUESTION
How might I design a workflow that allows busy educators to access, manage & prioritize student support meetings in less than 3 clicks?
When educators find the time to get to administrative tasks, it’s often during lunch break or while on-the-go. This means actions should be quick and easy.
Educators are extremely busy. They have small chunks of free time, often only between 5 & 15 minutes, when they can ‘check things off their list’.
Empathizing with educators
Empathy was the first step in the creation process. In order to design for educators, I needed to understand what their day-to-day life might look like while using the RyeCatcher application. I called a few friends that are teachers and asked them about how they currently track student behavior and when they typically do administrative tasks supported by technology. As a result of these conversations, I came up with two storyboards that illustrated two unique scenarios when a teacher might use RyeCatcher on a mobile device.
They key insight was realizing that 'free time' happens in 2-10 minute chunks for most teachers. This meant that I needed to think about workflows in smaller segments to allow teachers to accomplish micro-tasks easily on mobile – so they can pick up where they left off on their laptop or desktop application.
Translating features to mobile
Next, I identified common mobile UI patterns and developed a set of sketches that integrated common gestures and patterns into the design. I also worked to simplify the interface and strip out the features that a teacher would not use in the two scenarios I previously illustrated.
Using Adobe XD, I developed a set of work-flow driven wireframes designed to guide teachers through a task from the Homepage Feed through visible, time-based calls to action. Once the wireframes were developed, they were tested with a current RyeCatcher user. During this test, the user was guided through a particular scenario and was asked to provide feedback on how she might use different features to accomplish a task.
Synthesizing User Needs
The RyeCatcher user provided extremely valuable feedback that helped drive the work-flow of the final product. In addition, she talked a lot about her future aspirations for RyeCatcher, including: control & customization, integration with teacher calendars, and follow up on student behavior plans. By developing an opportunity matrix, I identified which suggestions were low-hanging fruit, high-impact & easy to integrate.
Developing a System
Next, I incorporated the user's feedback into an updated set of gray-scale wireframes. To bring greater consistency the solution, I developed a style guide that prescribed colors, character style, stroke weight, and icons. In this stage, I also began exploring color and material design options for the high-fidelity application.
The final concept was developed in Sketch. The decision was made to departure from the current 'RyeCatcher green' to a more soothing and simple blue. Green was integrated into call-to-action buttons, bringing the user's eye back to the familiar when they need to accomplish an upcoming task.
In this particular workflow, a teacher is able to see his/her upcoming events at the top of the page and preview an upcoming meeting. From that preview they can make the decision to edit the meeting note. When the meeting is over, the teacher is prompted to capture key action items and assign follow-up tasks to other support members. This updated work-flow allows teachers to address three key painpoints: prioritizing meetings, understanding history and context of student behavior, and closing the loop on student plans.