Screen+Shot+2019-03-17+at+12.48.10+AM.jpg

Connecting Student
Support Networks

Research, UX, Visual Design

About | RyeCatcher is a behavior tracking app for classroom contexts. Using feature requirements, use cases, and evaluative testing, we designed this app for educators, parents, support assistants and students themselves to track positive and negative behaviors for individualized support, consistency in caregiving, and legal reporting.

Team | Team of four; Helen Hu, Krystal Tung, TC Eley & Myself

Contribution | Generative sketching, use case analysis and feature prioritization, research protocol, usability testing facilitation, research analysis, dashboard wireframing, high-fidelity mock ups and visual identity development.

Time Frame | 4 weeks (currently in progress)

 

Project Planning

Our project kicked off with assessing the brief and timeline, discussing team member strengths and interests, and collaborating on a project plan that provided plenty of buffer for unexpected delays.

02.13+process+planning.jpg
 

This plan was then digitized for easy viewing, editing and sharing.

Screen Shot 2019-03-17 at 12.23.59 AM.png
 

Preliminary Sketching

After receiving the brief, feature requirements, and use cases, we hit the ground running with some rapid generative sketching as individuals, and then reviewed our ideas as a group.

02.14%2Bwhiteboarding.jpg
Screen Shot 2019-03-17 at 12.26.04 AM.png
 

Use Case Analysis + Feature Prioritization

We then worked our way through multiple examples of user scenarios, extracted necessary features, and plotted these on an XY axis based on how important a feature was, and how commonly it was used. This helped determine which features to focus on, and which to bring to the forefront in a dashboard and sidebar.

3 - determining what is important and common.jpg
 

Generative Sketching

We then divided up specific user flows and sketched these independently, and came together again to review as a team.

 

Our ideas were refined through group dialogue and iterative sketching. Some ideas we unanimously scrapped, and others we kept for usability testing with teachers in the evaluative research phase.

IMG_0658.png
 

User Flow Sketching & Initial Wireframing

As sketching progressed, a high level information architecture map emerged, and we focused our subsequent iterations on refining these particular user flows.

Meeting.jpg
 

Once the information architecture and general structure for each screen had been reached, we began mocking up low-fidelity wireframes using the collaborative online tool Figma.

Screen Shot 2019-03-17 at 11.44.24 AM.png
Helen+wireframes.jpg
 

Client Feedback & Synthesis

Once we had a complete prototype, we then walked the client through each of the user flows. Their feedback was recorded, synthesized and sorted for implementation, before usability testing was undertaken with teachers.

 

Interface Evaluation

We then generated a evaluative research protocol for interviewing our users. We asked them general questions about their experience and context, and then observed their ability to undertake four primary tasks using talk aloud protocol.

 

We interviewed four different users that included teachers with experience in mainstream schools, special ed, private and public schools, at the elementary, middle school and high school levels.

 

Research Synthesis

We then synthesized this research using sticky notes that were color coded to each user, and grouped them by feature, and content of feedback. “Hot spots” of multi-colored sticky notes (e.g. “cumbersome” section in Super Quick Log) were prioritized.

IMG_1135.jpg
 

We then shared our high level research insights with the class. You can view the complete Research Presentation here.

Screen+Shot+2019-03-17+at+11.02.42+AM.jpg

Note: in this presentation, colors denote category of insight, not user.

 

Visual Identity Development

In parallel, our team undertook some exploratory visual identity research, and pooled our favorite UI designs into to a slide deck with annotations to review as a team.

Screen Shot 2019-03-17 at 11.36.13 AM.png
 

Having reviewed these design ideas, we chose two different styles – “warm/calming” and “bold/professional” and applied these to screens in our app for review.

Screen Shot 2019-03-17 at 11.27.07 AM.png
Screen Shot 2019-03-18 at 6.16.28 PM.png
 

This Project is currently in progress.
Check back soon to see how the story ends!