This app was an addition to a larger suite of existing learning tools. As such, much was already known about the intended users, the goals of the app and the feature requirements that were needed to bridge the two. I came aboard in the role of UX Designer and worked in conjunction with Amplify Learning’s in-house Design Producer, Creative Director and visual design team.
Seeing the cyclical nature of the main interaction loop that was revealed upon sketching out the app's interaction flow gave a critical insight into the base architecture of the UI. Namely, we saw that users would be jumping frequently between the three core interactions of the app - (1) browsing from a library of literary sources, (2) adding, deleting and replacing those literary sources to their workspace, and (3) composing paragraphs connected to each of their workspaces in a text editor.
SKETCHING THE INTERACTION
The app’s UI centered around a main work area and two pull-out panels, one on the left and one on the right. I decided to start sketching out the various components and states of the interface on multiple layers or tracing paper. This allowed me to quickly see all possible combinations of the pull-out component states in relation to each other and to the main workspace area.
One of the requirements of the app was that students be able to see all source materials at the same time if they wanted to - even while they were editing. This had huge implications in terms of managing space, especially for tablets where the keyboard takes up half of the screen real estate. The challenge was to optimize the experience of text editing on a tablet (which is never that great anyway) while also honoring this feature requirement.
We went through several iterations of wires. Pictured above is V.5 where we finally nailed down the Source Library pull-out component.
Once we freed ourselves from the idea that the text editor has to be centered in the interface, we were able to elegantly solve for the ability to have so much information visible to the user at one time.
The Library Source panel expanded so the user can quickly browse other sources for her essay.
Even with the keyboard called up, the user is able to edit their paragraph and see their source material at the same time.
Loom is a stand alone web-app designed to support the English Language Arts core curriculum platform for Amplify Learning, a digital curriculum company in New York. It is designed to help middle-school students learn to research and cite relevant source materials during essay writing.