Mike Eng Interaction Designer805-234-1032
m@mike-eng.com
on LinkedIn

BetterLesson File Uploader

BetterLesson is a website for K-12 educators to share their lesson plans and resources and build off of each other’s work. I did some early user experience design work on their file uploader, creating a task flow diagram and page prototypes for each step of the upload progress.

Task Flow Diagram

Task Flow Diagram for the File Uploader Function

The task flow laid out four different scenarios for what content the user has on the site and how the user arrives at the upload page. Each page with a red outline is prototyped with a corresponding number for the page prototype. For background, teachers’ material is structured into units and sometimes further into lessons (which are subdivisions of units).

4a.0 - Upload Files (to new unit)

4b.0 – Upload Files (no unit selected)

4c.0 – Upload Files to Unit

4d.0 – Upload Files to Lesson

Once arriving at the uploader, the first step for the user is to specify a destination and select files from his/her computer to upload. The page presented differs based on the user’s existing content and how he/she arrived at this step.

4.1 Upload in Progress

Once files are selected, the user sees progress bars and can add files if desired. Each file occupies a row. If new files are added, they appear on the bottom row. Files are uploaded one at a time from top to bottom.

4.2 Final Stage - File Editor

In the final stage, the user enters metadata about the files uploaded. A bulk editor gives the option to apply the data to all files below. I made this relationship visually apparent by having the bulk editor’s outline contain each of the files. Also, for the fields that repeat in both the bulk editor and the individual file editors (“category”, “lesson”, and “keywords”, I kept the order and appearance consistent.