Ryecatcher

 
 

OBJECTIVE 

Translate Ryecatcher’s current web-based student tracking platform into a simplified tablet-based user experience that can be used on the go.

SOLUTION

A mobile optimized online collaboration tool that facilitates tracks and monitors of students' progress over time. We work with the client, RyeCatcher, to help translate and optimize functionalities from the existing web platform to tablet.

Purpose/Mission

Help teachers take action in real time. Reduce information to the most meaningful insights and provide context to current and anticipated needs.

Project

2018, UI/UX App design

Client

Ryecatcher Education

Team

Josh LeFevre, Ulu Mills, Raphael Levy, Vanessa Calderon

Duration: 6 weeks

Tools

Axure, Adobe XD, Illustrator, Design research, Usability testing

My role::

 Information architect, wirframer, design researcher, form development

 

 
 
Dash@4x-8.png

KEY FEATURES

 
  • Simplify the online forms.

  • Make inputed data readable and scan-able.

  • Improve information architecture and navigation.

  • In-moment data entry

 

Please click here to see the final presentation.

 
Dash@4x-8.png

01

understanding the problem

 

Below is a sample screen from the RyeCatcher current portal. Due to the narrowness of the prompt, we began with user research from surveys and several in-person interviews to gain a sense of what the end user needs are. What we heard was:

“Our titles have to be consistent for admin to pull data. It would be better for us to use the details.”

“I skip RyeCatcher because they are cumbersome and don’t align with our schools categorization system.”

and other such quotes about information being hard to navigate and use.

 
 
Screen Shot 2018-12-18 at 1.50.51 PM.png
 
 
 

After hearing the initial feedback and having been given a narrow scope, we defined a development plan with RyeCatcher.

 
 
 
 
Dash@4x-8.png

02

Information architecture

 

In order to make sense of the current platform, we build current and future information architecture drawings to share with RyeCatcher administrators, and users to get a sense for how information is stored and accessed before building out wireframes and prototypes. This was very important since the information is used to meet legal requirements and make the platform more useable. After a few rounds of interaction. I created this map and flow.

 
Simplified site map for the app

Simplified site map for the app

We built the app through these assumed user flows per our research and usability testing

We built the app through these assumed user flows per our research and usability testing

 
Dash@4x-8.png

03

Prototyping

 

Based on required features, we prototyped several ideas and directions that the app could go. We used these to test with colleagues before preforming any users tests.

 
 
 
 
Dash@4x-8.png

04

User testing

 

We conducted several private and anonymous user tests with end users using our clickable prototypes in Axure. In preparation for for the testing we created a set of 10 questions and 3 tasks we asked the user to perform to evaluate our information architecture and data input/output visualizations. The findings from these led to our eventual wireframes.

 
 
Screen Shot 2018-12-18 at 1.57.27 PM.png
 
 
Dash@4x-8.png

05

Annotated wireframes

 

To simplify implementation, we also provided annotated screens for the developers to use as a guide.

 

New note form entry from 15 differ t notes types consolidated to 4 with half as many fields

Student feed annotated

* To see the app’s complete set of screen annotations, click here.

 
Dash@4x-8.png

06

High fidelity Mockups

ipad

 

The brief asked for tablet mock-ups and wireframes. Below, are the mock-ups based on the company’s colors. We updated colors, iconography, information architecture and look.

 

Student profile mock-up

Student trends and basic data visualization

Simplified notes form input and feed

One Tap actions such as taking meeting attendance.

Phone

 

After creating the tablet wires, we also created a few sample screens to see how our systems would work across platforms and devices. Since notes is the main screen and input used, we prototyped this screen.

 
iPhone 6-7-8 – 2@3x.png
iPhone 6-7-8 – 3@3x.png
iPhone 6-7-8 – 4@3x.png
iPhone 6-7-8 – 5@3x.png
 
Dash@4x-8.png

07

Visual Design

 

Our solution was to surface relevant data and action items and bring them to the user’s attention. Often these details got buried on the current desktop platform’s layout and data logging approach. This led to simplified, always accessible sidebar menu. In addition to in-feed action items with clear meta data and history.

Through styling and updated iconography we were able to prove increased recognition and encourage correct data input while decreasing individual task time.

Bringing the data to the forefront helps give users the ability to find and address potential student problems before they flare into large issues. As well as alert other faculty and administration as necessary.

The new app was also designed with large touch targets in order to facilitate discreet in-class, at recess, and in-meeting note taking.

A focus on simplifying the form and unifying data fields scattered around the desktop platform increased adherence to entering data on-time and accurately.

 
 

Ryecatcher style tile based on branding, design unification, and usability testing

 
 
Dash@4x-8.png

08

reflection + Next steps + my role

 

Reflection

I found this process to be interesting to work on a project with such narrow focus and tight timeline with little opportunity to get real research and user feedback. What I discovered is that by clearly setting goals with the client and developing deliverables ac cording to the timeline, we received the best feedback and insight.

Next steps

  • Work with Developers to implement these wires and test them with schools.

  • Update the data base compatibility strings.

My role

I worked primarily on developing and testing the information architecture, producing the lo-fi wireframes, UX tester, and icon maker.