Designer / Storyteller
Screen Shot 2018-11-16 at 11.25.42 AM.png

Learnsphere

LearnSphere

Basics—

  • Internship for 2018 (10 weeks full-time); transitioned to part-time for 2018-2019 school year

  • Only designer on a team of five

Skills—

UX/UI design, Illustrator, HTML, CSS, Javascript

Overview—

LearnSphere is an analysis tool that helps educators analyze curriculum data from their students. Its goal is to use learning science algorithms to help educators more effectively reach students. The analysis tools are often also used by learning scientists themselves to further their research.

My work on LearnSphere can fall under three main categories: fixing old interfaces, designing and implementing new interfaces, and front-end development. As the only designer on the team, I also did dozens of smaller visual tasks for my teammates, such as creating icons.

Designing New Interfaces—

Currently, we’re developing a student tutoring tool that’s supported by the same backend as LearnSphere, aimed at catching students up in math and science. The project is ongoing. Below are screens from the latest mockup.

Fixing Old Interfaces—

Going over the interface

Going over the interface

Brainstorming fixes

Brainstorming adjustments to the component connects

Main analysis tool

LearnSphere’s analysis tool, despite its goal of being accessible, really wasn’t. Important functions were often hidden, simple actions required many clicks, icons or buttons were unclear, and the interface itself looked crowded.

Additionally, the visual language of the analysis tool didn’t tonally match its function. It looked a little juvenile, featuring whimsical patterns and bright or neon colors. It had bad contrast and small text that was difficult to read without zooming in. It was also not unified, featuring slightly different fonts and colors depending on the menu or analysis component.

To address these problems I simplified the interface, prominently featured icons over text for basic functions (such as saving and running workflows), streamlined the visual language, and updated that visual language to make the interface generally more usable with a more adult tone.

Old component workflow space

New component workflow space

workflow list

LearnSphere is meant to be a semi-public space. Users can choose to share their workflows with other users (often for research collaboration), and these workflows show up on the public workflow list. Users can also see their personal workflows on this page, public or private.

Before I redesigned it, the workflow list was essentially a reverse chronological list of public workflows with minor searching capabilities. adding a tagging system, advanced search, and a more condensed way of communicating the necessary details for each workflow. For example, the red/green icons tell the user whether the workflow in question has an error, without the user needing to load that specific workflow. The result was an overall easier searching experience.

Old workflow list page

New workflow list page