Research & Analysis Wireframing Prototyping High Fidelity Screens
TOOLS USED
Adobe Xd/Ps/Ai Superposition Overflow
TEAM MEMBER
Alex Borthwick
DURATION
48 hours
Overview ▼
History Classroom
Adobe Creative Jam | A+E Networks – 2nd Place – HISTORY Classroom – Feb 2020
Our team placed second. This was an incredible achievement as there was over 500 participants!
History Slides 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 Slides allows teachers to embed interactive media directly into the presentation. A virtual classroom works together with History Slides, 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.
Project Process Overview
▼ A quick preview & judges feedback
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.
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 process? What do teachers and students needs and their pain points? – Personas of different user types.
History Channel Identity Style Guide ▼ Which includes font choice, font color, font size, layout, spacing, functions, main colors, transition animation, icons, etc.
Our Design Style Guide ▼ By research and observe what History Channel's current app looks and feels like. We added in some alternative colors and font choices that fit with the classroom theme.
Comparison With Other Apps ▼ 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.
User Research ▼
To identify user needs and pain points, a quick online survey was conducted. We reached out to ten students and three teachers. Through this survey, we gained insights into their goals, pain points, and behavior patterns. The Job-To-Be-Done (JTBD) framework was used to organize the information they provided.
Students
JTBD: 1. During class: Take notes and interact with the teacher and other classmates (Include asking questions, screen record, file transfer, etc.) 2. Outside the class: Research class-related materials and automatically generate research sources. Being able to build a collection and slides to present their research. Goals: 1. Enhance the quality of learning. 2. Improve efficiency and effectiveness. 3. Faster and more accurate research. 4. Autogenerate research citation.
Pain points: 1. Have to download many apps for different learning needs (waste of storage and inconvenient). 2. The research citation process is tedious and repetitive. 3. Class experience not engaging enough, and screen share can not go back to the previous slide if the teacher moves on.
Teachers JTBD: 1. During class: Lecture students with engaging experiences and give students easy access to class material. Interact with students and answer their needs. 2. Outside the class: Able to build and edit presentation slides with ease and import previous lecture material. Goals: 1. Enhance the quality of teaching. 2. Meet the learning style or needs of students. 3. Improve student-accessibility on the study materials. 4. Save time yet build quality lecture slides.
Pain points: 1. Technical issues for both teacher and students during class. 2. Have to rebuild lecture slides if the teacher decides to change the software. 3. Unengaging class atmosphere. 4. Preparing for class and building lecture slides is time-consuming.
Ideation ▼
We connected the dots between all the user needs and pain points and decided to focus on these main functions: • To help teachers create lesson plans. • To be a marketplace of reference material for teachers. • To help students demonstrate historic lessons in presentations. • To help grad students append and collect research. We begin with a whiteboard wall and sketch out areas of content and navigation. List a few functions and ideas on which to focus on. We only try to articulate and align our common vision of the functions and the overall feel of the design with each other.
Simple User flow ▼
Because of this competition's limited time, we were only able to focus on some primary functions for each user. The user flow for the teacher side focuses on how they prepare for the class lecture and how they present it using HISTORY Classroom. And from there, we transition to the student side, which focuses on reducing user friction and increase interactions.
We also decided to use flow to demonstrate our prototype. Because, firstly, the judges won't get lost in our prototype as it only has one flow path. Secondly, we can present our prototype in the form of a user journey/storytelling to build that emotional connection with the judges.
Wireframes▼
▼ High-Fidelity Prototype ▼ Created within the competition time span
User flow One: Teacher ►
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 the topic of 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.
◄ User flow Two: Student
Sarah Taylor is a student in John Does class. By scanning the QR Code on John Doe’s Slide, Sarah is connected to a web application. Here she can ask questions related to specific portions of Johns Presentation. Her questions can be seen live 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 to increase accessibility. And it is designed to work for both in-class presentations and virtual classrooms.
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.
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.
