History Classroom

Overview

Team member
Alex Borthwick

What I Did
Research & Analysis
Wireframing
Prototyping
High Fidelity Screens
Usability Tests

Adobe Creative Jam | A+E Networks – 2nd Place
HISTORY Classroom – Feb 2020

View Prototype

Tool Used
Superposition
Adobe Xd
Photoshop
Illustrator
Overflow

Duration
48 hours

A Quick Preview & Judges Feedback

Our team placed second. This was an incredible achievement as there was over 500 participants!

History Classroom is a teaching tool for K through 12 teachers. Using this tool will simplify the process of creating rich media presentations. A&E has thousands of educational videos on a wide range of topics. History Classroom allows teachers to embed interactive media directly into the presentation.
A virtual classroom works together with History Classroom, acting as a platform to further engage students. By scanning a QR code, students are connected to a web application. Here they can ask questions related to specific parts of a presentation. The Web-app is designed to serve classroom learning and distance learning.

Challenge ▼

Teachers and students can make history exciting by bringing stories into the classroom to engage students and enhance classroom presentations:

This Adobe Creative Jam was a 48-hour design sprint. Participants were asked to use History’s deep catalog of videos and editorial contents to create an engaging experience for both students and teachers. We also plan to reduce user friction by creating a web version of the app, lower the accessibility requirements. And most importantly, improve students' and teachers' interaction both online and in-class.

My Contribution ▼

For this project, I worked as a UX designer. During the research phase, I helped conduct a competitive analysis, identified users' needs/pain points, and create a design system informed by preexisting A&E guides. During the designing phase, I worked collaboratively with my teammate to create wireframes, high fidelity screens & Animations. I also helped conduct usability tests to ensure all functions are intuitive and as frictionless as possible.

Research

● Research on History Channel identity style guide:

– Download History Channel's current app and analyzed its design.
– Research Design tokens using superposition.
– Identify the fonts, colors, icons, and animation they use to match with their overall style.

● Downloaded competitor apps and analyze their design:

– What are some of the issues we might encounter? What are some areas that other apps exceed? Is there any usability or performance issue we need to be aware of?

● Learn more about our users' needs and pain points:

– Interviews with the target audiences; What are teachers' lecture building processes? What do teachers and students need and their pain points?
– Personas of different user types.

Research

● Research on History Channel identity style guide:

● Downloaded competitor apps and analyze their design:

– What are some of the issues we might encounter? What are some areas that other apps exceed? Is there any usability or performance issue we need to be aware of?

● Learn more about our users' needs and pain points:

– Interviews with the target audiences; What are teachers' lecture building processes? What do teachers and students need and their pain points?
– Personas of different user types.

Competitive Analysis ▼

A competitive analysis was conducted to check the existing video hosting and editing platforms. We focus on mobile interfaces because it is well known that it is difficult to design them when dealing with complex tasks such as video editing. We wanted to understand what types of interactions were best suited for manipulating presentation and video content.

Here are some interfaces which inspired our later work.

Users’ Needs & Pain Points ▼

In order to determine user needs and pain points, a quick online survey was conducted. We reached out to ten students and three teachers. Through this survey, we learned about users' goals, pain points, and behavior patterns. The Job-To-Be-Done (JTBD) framework was used to organize the information they provided.

Students

JTBD

During class
Take notes and interact with the teacher and other classmates (Include asking questions, screen record, file transfer, etc.)
‍
Outside class
Research class-related materials and automatically generate research sources. Being able to build a collection and slides to present their research.

Students

Pain points

- Have to download many apps for different learning needs (waste of storage and inconvenience).
- The research citation process is tedious and repetitive.
- The class experience is not engaging enough, and screen share can not go back to the previous slide if the teacher moves on.

Students

Goals

- Enhance the quality of learning.
- Improve efficiency and effectiveness.
- Faster and more accurate research.
- Autogenerate research citation.

Users’ Needs & Pain Points ▼

Teachers

JTBD

During class
Lecture students with engaging experiences and give students easy access to class material. Interact with students and answer their needs.
‍
Outside class
Able to build and edit presentation slides with ease and import previous lecture material

Teachers

Pain points

- Technical issues for both teacher and students during class.
- Have to rebuild lecture slides if the teacher decides to change the software.
- Unengaging class atmosphere.
- Preparing for class and building lecture slides is time-consuming.

Teachers

Goals

- Enhance the quality of learning.
- Improve efficiency and effectiveness.
- Faster and more accurate research.
- Autogenerate research citation.

Users’ Needs & Pain Points ▼

Students

JTBD

Students

Pain points

Students

Goals

- Enhance the quality of learning.
- Improve efficiency and effectiveness.
- Faster and more accurate research.
- Autogenerate research citation.

Teachers

JTBD

Teachers

Pain points

Teachers

Goals

- Enhance the quality of learning.
- Improve efficiency and effectiveness.
- Faster and more accurate research.
- Autogenerate research citation.

Design Process

Ideation ▼

We started the design process by reflecting on the user's needs and pain points identified in our survey. These are the four functions we hoped to incorporate in the prototype solution.

● To help teachers create lesson plans.
● To create a marketplace of rich media for teachers.
● To encourage collaboration amongst students.
● To help graduate students add and collect research.

‍Using a whiteboard, we begun to speculate how these features would fit together. We put a lot of effort into developing an intuitive hierarchy of information. This was very important because it served as a basis for future design work.

Simple User flow ▼

The project deadline restricted the number of features we could develop. Consequently, we decided to focus our mockup on only the core features for both teachers and students.

The user flow for teachers focused on how a user would prepare a presentation. In this user flow, a teacher named John Doe demonstrated how to upload existing presentations from formats such as PowerPoint. John also showed the process of finding, editing, and embedding rich media for presentation.

The second user stream focuses on students. This user flow is a web application that works in parallel with "History Classroom". A web app means a student would not have to download an application, simply scanning a QR code would allow them to join the class. Our survey found that many portals and downloads frustrate students. Our user flow is designed to solve this problem.

During this hackathon, all other groups produced only mockup illustrations linked together with basic animations. We decided to differentiate by creating user flows. We chose this structure to prevent judges from getting lost when evaluating our prototype. To support our user flow, we gamified the prototype and drew inspiration from games from the early 90's such as Myst. In our prototype if a user clicks on the wrong button or object, they receive monologue feedback to direct them to the correct button. These directions provide more context explaining what is going on.

Solution

Teacher User Flow ▼

A teacher named John Doe is creating a lesson for his class about the Farming practices in ancient Egypt. A&E has many videos on Egypt but only portions of each video are directly related to the topic which John is teaching to his class. This user flow will demonstrate how John can create an interactive lesson with rich media from his History classroom account.

Student User Flow ▼

Sarah Taylor is a student in John Doe's class. By scanning the QR Code on John Doe’s Slide, Sarah is connected to a web application. Here, she can ask questions about specific parts of John's Presentation. Her questions can be seen in real-time by John or hidden and addressed at the end of the presentation.
This solution has been designed to prevent the requirement of students to download a native application. Web app are a great alternative and increase accessibility for users.

Results & Takeaways

Creating History Slides was a fun experience, not a lot of sleep but definitely worth it. Having to design for both teachers and students helped me gain a better understanding of the eLearning User Experience. I also learned how to efficiently collaborate with a teammate when the time is limited, and how to use various tools to communicate and test with target audiences.
‍
Through this experience, I gained a deeper knowledge of the importance of consistent UX/UI, how to efficiently generate and communicate ideas, and find opportunities to reduce the friction between users and the product.

We present our app to the judges in front of thousands of viewers across North America and won second place.
Check out the short video below for the judges' feedback.