logologo

Blueslips

Designing for Teachers

Blueslips is a place for teachers to help each other. A friend and I created this Q&A website together as a place for teachers to ask for and share quality teaching materials.

Below is the story of how we got started and our process. The UIs and icons used below were first sketched on paper and whiteboards, wireframed using Mockingbird, and designed in high-fidelity using Sketch. The Blueslips logo was designed using Adobe Illustrator. We tracked user data using Mixpanel and interviewed users both remotely over Skype and in-person in Pittsburgh and San Jose.

My friend and I had spent hours observing how teachers build their lessons plans. We learned about the frustrations of searching for classroom materials (lesson plans, quizzes, posters, worksheets, so on) on the internet.

The pain-points were numerous:

  1. Search engines (even the ones built specifically for teachers, like goorulearning or CK12), spit out too many results with no easy indication of which results were good or bad, so they didn't help teachers save any time.
  2. Even materials returned by these search engines that had potential to be good weren't useful, becuase they were displayed in a list with no context as to how the teacher who created it had used it, how students reacted to it, and whether or not it could be improved.
  3. These websites were badly designed, with small UI elements and cluttered interfaces
  4. The personal touch of talking to another teacher and hearing their story didn't exist on the internet.

We also learned that teachers were sick of districts forcing them to use crappy enterprise software, so giving off a friendly, open first impression would be vital.

So, we set out to build something that would give teachers classroom materials on their own terms, with (1) a focus on quality results, not quantity of results; (2) providing context for how the materials were used; (3) an extremely simple web design; (4) a friendly and trustworthy feel, like a respected teacher or mentor, from the moment someone visited the website.

Our Process

Our idea was to build a question-and-answer website to replace educational search engines on the internet. Rather than churning through hundreds of results from a search engine, we hypothesized that teachers would rather get in touch with other teachers to ask for help. I had previously built a minimum-viable-product for this which validated the idea.

We started by sketching UIs on paper, but since we were working remotely, we switched over to using a collaborative wireframing software called Mockingbird. We used Mockingbird to prototype a user's behavior flow from arriving to our wesite for time to posting their first question. We tested all of our pages using Mockingbird before eventually designing high-fidelity prototypes in Sketch.

Below is our onboarding process.