Designing a workflow-driven mobile app for educators
ABOUT: 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. To do this, I developed storyboards and workflow-driven wireframes before conducting evaluative research with a current user. The final client deliverable was a set of high-fidelity prototypes.
PROJECT TYPE: Interface/Mobile Design
ROLE: UX Designer
THE RESULT: RyeCatcher Mobile
01 STORYBOARDING: Empathizing with the user
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.
02 IDEATION: 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.
03 USER TESTING: Evaluating the workflow
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.
04 SYNTHESIS: Understanding and prioritizing 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.
05 ACHIEVING CONSISTENCY: 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.
06 FINAL CONCEPT: A simplified look & feel for busy educators
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 painpointss: prioritizing meetings, understanding history and context of student behavior, and closing the loop on student plans.