Translate Ryecatcher’s current web-based student tracking platform into a simplified tablet-based user experience that can be used on the go.
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.
Help teachers take action in real time. Reduce information to the most meaningful insights and provide context to current and anticipated needs.
2018, UI/UX App design
Josh LeFevre, Ulu Mills, Raphael Levy, Vanessa Calderon
Duration: 6 weeks
Axure, Adobe XD, Illustrator, Design research, Usability testing
Information architect, wirframer, design researcher, form development
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.
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.
After hearing the initial feedback and having been given a narrow scope, we defined a development plan with RyeCatcher.
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.
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.
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.
To simplify implementation, we also provided annotated screens for the developers to use as a guide.
* To see the app’s complete set of screen annotations, click here.
High fidelity Mockups
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.
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.
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.
reflection + Next steps + my role
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.
Work with Developers to implement these wires and test them with schools.
Update the data base compatibility strings.
I worked primarily on developing and testing the information architecture, producing the lo-fi wireframes, UX tester, and icon maker.