Annotations_30.jpg

LaunchPacks Articles Annotations

LaunchPacks Articles Annotations

LP_02.jpg
 

The Question

The main point of having "packs" of content is to deliver curated articles, images, etc. to teachers who may be struggling to find specific and trustworthy content online. Both teachers and students needed to work efficiently with such content in order to understand it, so they would frequently print the articles on paper and highlight and annotate them. I was required to design a digital annotation feature for the articles displayed on the LaunchPacks site.

use_cases_1.png

My Challenge

A big roadblock at the beginning was the overcrowded space on the articles pages, which originated a "prequel project" for me consisting on re-designing the articles pages from a large modal to a flat page with a sidebar. Once that was done, I was able to look at some other sites online which used annotations for text and evaluate pros and cons for LaunchPacks.

 
Img041.jpg
 
The initial idea for articles annotations was to find some space on the already-crowded article modal.

The initial idea for articles annotations was to find some space on the already-crowded article modal.

 
After I redesigned the articles pages, we were able to use the screen space in a much better way to accommodate annotations. Our users were delighted. 

After I redesigned the articles pages, we were able to use the screen space in a much better way to accommodate annotations. Our users were delighted. 

What I did

After my initial analysis and evaluation, I created some basic wireframes to see how the feature would play with the rest of the article interface. With the help of the product team, I focused on the main points of what was needed in order to have a useful tool for teachers and students, and created successive iterations of an interactive prototype to polish the design. The simplification of the articles pages contributed to create a better layout for annotations and have a greatly improved experience, visually and functionally.

Link to the wireframes and prototype of annotations: http://zfyoyc.axshare.com/

Link to the wireframes and prototypes of the redesigned article pages: http://sq7s63.axshare.com/