Owl

Owl

Owl

An online classroom for students and teachers.

Xinno Health is a cross-border health tech summit hosted in Seattle, WA. 

Redesigned the website of CHID ( Comparative History of Ideas ) department University of Washington.

An online classroom for students and teachers.

Objectives

To design the MVP of Owl, an online education platform that provides high-school students with pre-professional courses.

To design a web platform for high school students and teachers to engage with the course content.

To design a web platform for high school students and teachers to engage with the course content.

My role

Research

Motion graphics Design

Interaction Design

Prototype

Research

Motion graphics Design

Interaction Design

Prototype

Research
Motion Graphics Design
Interaction Design
Prototype

Tools

Sketch
Illustrator
Photoshop
After Effects
Premiere

Sketch
Illustrator
Photoshop
After Effects
Premiere

Design Team

Design Team

Me ( Designer )
Aditya Agashe ( PM )
Parth Detroja ( PM )

Me ( Designer )
Aditya Agashe ( PM )
Parth Detroja ( PM )Solo project

Me ( Designer )
Aditya Agashe (PM & Author of Swipe to Unlock)

Duration

Duration

Duration

2 months

1 month

A month

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

The Challenge

The Challenge

Today, many high school students lack the understanding of major differences and what they want to do professionally before they get to college. The rising demand for understanding majors and figuring out which careers match student's interests and abilities has required high schools to provide major-related classes and resources for students. 

perce-25
Untitled-4-24
ques
Untitled-4-23

How might we collaborate with high schools to help students better understand different majors and choose a career path?

How might we provide online classes which will help students decide their majors? 

How might we design the platform such that the students and the teacher can interact with each other and engage with the course content?

How might we collaborate with high schools to help students better understand different majors and choose a career path?

The Solution

The Solution

Designed an online education platform that provides high school students with pre-professional courses.

Designed an online classroom for both students and teachers to interact.

Provided students with a machine learning chatbot - Owl, to quickly ask questions.

Deployed a new content strategy on CHID's website

Created a trusted, encouraging and fun brand for better user experience.

Design a trusted, encouraging and a prestigious brand for better user experience.

1

2

2

3

3

Owl is an online education platform that provides high school students with pre-professional courses.

The primary menu has 5 menu items: Feed, Classroom, Assignment, Discussion and People for students to navigate through.


full

Key Features

Key Features

Onboarding Page

Onboarding Page

Onboarding Page

The simple and easy onboarding page for users to quickly immerse in the smart learning environment.

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

The simple and easy onboarding page for users to quickly immerse in the smart learning environment.

Feed

Feed 

Students can see the professor announcements and upcoming assignments on the Feed page.

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

Students can see the professor announcements and upcoming assignments on the Feed page.

Class

Class

If the instructor is live streaming the class, students can see the livestream by switching to video.  Rest of the time, students can interact with the course slides.

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

If the instructor is live streaming the class, students can see the livestream by switching to video.  Rest of the time, students can interact with the course slides.

Ask Owl

Ask Owl

Owl is a smart chatbot which is trained with the contents of the lessons, frequently asked questions in the past and already answered questions. Students can ask anything regarding the lessons to the owl to get quick answers, links, resources related to the questions.

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

Syllabus

Syllabus

On the syllabus page, students can see the course schedule and course description.

Whenever the students want to revise a class, they can choose the class on the syllabus page. 

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

On the syllabus page, students can see the course schedule and course description.

Whenever the students want to revise a class, they can choose the class on the syllabus page. 

Submit an assignment

Submit an assignment

On the assignment page, the status section will tell the students whether they submit the assignment or not.

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

On the assignment page, the status section will tell the students whether they submit the assignment or not.

Discussion

Discussion

Students can interact with the instructor and other students in the discussion page.

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

Students can interact with the instructor and other students in the discussion page.

People

People

Students can see the basic information of instructors and other students.

I chose a san-serif font to help convey a clean and neat feeling of the brand. Helvetica font has been used for primary headlines and main context.

Research

Stakeholder's needs

Process

Interview with stakeholders

Interview with stakeholders

timeline

Stakeholder's needs

Interview with stakeholders

Interview with stakeholders

Biz-goals-01
platform
curriculum-03

User Interviews

Interview with stakeholders

User Interviews

 

Interviewed with 5 high school students who have had experience using online education platforms.

Some of the questions we asked:
1. What is your daily schedule in high school?
2. Does your high school provide resources for students to understand different majors in college? If it does, what kind of resources it provides?
3. Do you think the resources are helpful for you to decide the major? Why or why not?
4. How would you choose your major?
5. What are the online education platforms you have used?
6. What are the frustrations (if any) you felt when taking classes online?

I studied a few current market offerings for online classroom platforms and did a comparative analysis of them with the discovered opportunity areas. 

The current online classroom platforms have provided users with great features. But in terms of instant feedback, class interaction, and the ease of use, they still have room to improve. Therefore, the design of Owl should be focused on the limitations of current platforms.

Interviewed with 5 high school students who have had experience using online education platforms.

Questions we asked:
1. What is your daily schedule in high school?
2. Does your high school provide resources for students to understand different majors in college? If it does, what kind of resources it provides?
3. Do you think the resources are helpful for you to decide the major? Why or why not?
4. How would you choose your major?
5. What are the online education platforms you have used?
6. What are the frustrations (if any) you felt when taking classes online?

interview-users-02

What We Learned

Interview with stakeholders

Key Pain Points

1. High school students have limited or no resources to learn about different majors.
2. When taking classes online, students feel frustrated when they can’t ask questions.
3. When taking classes online, students want to drop the class when they can’t follow the lecture.
4. Students think searching answers to the questions they have in an online class is time-consuming.

I studied a few current market offerings for online classroom platforms and did a comparative analysis of them with the discovered opportunity areas. 

The current online classroom platforms have provided users with great features. But in terms of instant feedback, class interaction, and the ease of use, they still have room to improve. Therefore, the design of Owl should be focused on the limitations of current platforms.

1. High school students have limited or no resources to learn about different majors.
2. When taking classes online, students feel frustrated when they can’t ask questions.
3. When taking classes online, students want to drop the class when they can’t follow the lecture.
4. Students think searching answers to the questions they have in an online class is time-consuming.

Persona

Interview with stakeholders

Competitor Analysis

We designed a persona to serve as a cumulative representation of all the common user needs, goals, thoughts, feelings, pain points and actions into account, that we derived from our interviews and insights.

Emily

User Journey Map

Interview with stakeholders

Competitor Analysis

journey map

Current Ecosystem
of  Support

Interview with stakeholders

Competitor Analysis

From the interviews, we discovered that to understand different majors and choose a career path,  students might seek assistance from several resources to help them make a decision.

Current-system2-01

Competitor Analysis

Interview with stakeholders

Interview with stakeholders

After I had a good understanding of business requirements and users. I studied a few current market offerings for online classroom platforms and did a comparative analysis of them with the discovered opportunity areas. 

The current online classroom platforms have provided users with great features. But in terms of instant feedback, class interaction, and the ease of use, they still have room to improve. Therefore, the design of Owl should be focused on the limitations of competitors.

I studied a few current market offerings for online classroom platforms and did a comparative analysis of them with the discovered opportunity areas. 

The current online classroom platforms have provided users with great features. But in terms of instant feedback, class interaction, and the ease of use, they still have room to improve. Therefore, the design of Owl should be focused on the limitations of current platforms.

I studied a few current market offerings for online classroom platforms and did a comparative analysis of them with the discovered opportunity areas. 

The current online classroom platforms have provided users with great features. But in terms of instant feedback, class interaction, and the ease of use, they still have room to improve. Therefore, the design of Owl should be focused on the limitations of current platforms.

Competitor analysis

Design Solution

Stakeholder's needs

Feature Prioritizations

Interview with stakeholders

Information Architecture

Except for developing pre-professional courses for high-school students, our team brainstormed features that can help students better understand the course content, improve the overall class interactions between the instructor and students.

In the meeting, I introduced the smart chatbot feature, which provides students with FAQs and related course content. Currently, none of the competitors provide students with a self-directed learning tool that allows students to search for course-related answers in their own pace. That's why our team identified the smart chatbot owl is a unique feature that can help differentiate Owl from competitors.

In the MVP of Owl, we included the following features:

  • Feed - Instructor's announcements, upcoming assignments.
  • Classroom: live stream, slides, note,
    smart chatbot, discussion board.
  • Syllabus: assignments, course requirements.
  • Assignments: upcoming/ past assignments, status
  • Discussion board
  • People: instructors, students.

Understanding the Technology

Interview with stakeholders

Understanding the Technology

Even though smart chatbot is an interesting idea, we also need to understand if this idea is feasible.

In order to better get the stakeholder's buy-in, I asked engineers' opinions of the smart chatbot. At the same time, I also researched the existing technology that can help better present my ideas.

In my research, Khan Academy allows students to directly interact with the prepared slides. Intercom provides users with a smart chatbot to quickly search for information related to the specific keywords. These technologies can also be used as the foundation of smart chatbot - Owl. 

 Video: Khan Academy

 Video: Khan Academy

Video: Intercom

Concept

Interview with stakeholders

Information Architecture

concept

Information Architecture

Interview with stakeholders

Information Architecture

Based on the features prioritization map, I created the IA of Owl.

IA

Design System

Design System

Elevation

Elevation

Before I designed the hi-fi interactions, I had created a design system that guided me through the creation of UI components and also set the design environment.

1
Color Palette Copy
Typography
01 Controls Copy 2
01 Controls Copy
03 Navigation Copy
03 Navigation Copy 2

Sketch

Sketch

Sketch-owl
Sketch-02

Usability Testing

Lofi mockups

We tested our hi-fi prototypes using think aloud protocol to obtain participant's thoughts of the prototypes.

We tested our hi-fi prototypes using think aloud protocol and used System Usability Scale(SUS) to obtain participant's ratings of the prototypes. A mean of SUS score of 81 indicated that the prototypes are generally easy to use.  

  • Demographics questions, think out loudWhat’s your first impression of Owl?
  • When you are interacting with the chatbot, how do you feel?
  • Do you think it is helpful for you to understand the class?
  • Which way would you prefer learning about the class? Using the chatbot or asking questions in the discussion board? Or other ways? Why?
  • Will you use the chatbot again in the future? Why?
  • What do you think of the assignment page?
  • Can you try to turn in an assignment?
  • What would you rate the experience of turning in an assignment?
  • What do you think of the discussion page?
  • What do you think of the people page?
  • Will you use Owl in the future? Why?
  • Do you have any suggestions for Owl?

               Overall, Owl is easy to use.

  • 2 users thought the chatbot is useful if the information provided by the chatbot can solve their problems. 
    1 user preferred asking questions directly in the discussion board.
  • 1 user successfully turned in an assignment without assistance. Two users turned in an assignment successfully with assistance. 
  • 3 users will use Owl if their schools have this option.
  • 1 user suggested that Owl should be mobile -friendly.

Iteration

Lofi mockups

Design Environment

- Introduced elevation in design to help users better navigate through the system.
- Increased contrast of the foreground and background based on WCAG AA2.0.

With topbar
swithToVideo

User flow - submit the assignment

In usability testing, some of the users forgot to upload the assignment.
In the latest design, the status column can show student's assignment status.

submittedSuccessfully Copy
submittedSuccessfully

Visual Layout

To display different discussions more clearly, the latest design groups conversations that in the same discussion.

discussion1
discussion1 copy

Front-end Development

Lofi mockups

Takeaways

Lofi mockups

The problem we were trying to solve: 
 How might we collaborate with high schools to help students better understand different majors and choose a career path?

1. Created an online education platform -Owl, which provides students with pre-professional courses.
Owl is a scalable, accessible and up-to-date platform. Every high school has a computer lab can collaborate with Owl to provide students with hyper-current pre-professional courses.

2. Windows for increasing Interactions between the instructor and students.
During the class, students can ask questions directly in the discussion board to get help from the instructor and peers. After class, students can post questions on the discussion page. Windows for students to get help from others can ease student's negative emotions of keeping questions in mind.

3. Smart chatbot -Owl, a self-directed learning tool for students to explore course content.
Smart chatbot Owl is trained with answers of FAQs and related course content which will help students better understand the course in their own pace. Using the smart chatbot to search for answers can also help students save the time of looking for answers on the internet.

Other Projects

DiscoveryProject type

RealityLAU I | U X Design

XinnoHealthWEBSITE | SUMMIT DESIGN

FurmingoPRODUCT DESIGN | USABILITY TESTING

CHIDWEBSITE DESIGN

mapFront-end development | Illustration

-Final_3
linkedin
pinterest (1)
twitter