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

1 month

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

Timeline

Interview with stakeholders

Interview with stakeholders

project-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.

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

Key Pain Points

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.

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

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

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

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

Information Architecture

Interview with stakeholders

Information Architecture

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

IA

Storyboard

Interview with stakeholders

Storyboard

Storyboard

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

Lo-fi mockups

Lofi mockups

Before I started the hi-fi design, I came up with several versions of lo-fi mockups.  The first version of the mockup had problems in the use of depth and space. 

Since every section on the page has a layer of depth,  the gaps between different sections take too much space of the page.

Before I started the hi-fi design, I came up with several versions of lo-fi mockups.  The first version of the mockup had problems in the use of depth and space. 

Since every section on the page has a layer of depth,  the gaps between different sections take too much space of the page.

Therefore, I identified the important parts of the workflow and created a set of rules around depth.

Gap-01

First version

First version

refined-01

Refined version

Refined version

Usability Testing

Lofi mockups

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.  

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.  

  • I think that I would like to use this system frequently.
  • I found the system unnecessarily complex.
  • I thought the system was easy to use.
  • I think that I would need the support of a technical person to be able to use this system.
  • I found the various functions in this system were well integrated.
  • I thought there was too much inconsistency in this system.
  • I would imagine that most people would learn to use this system very quickly.
  • I found the system very cumbersome to use.
  • I felt very confident using the system.
  • I needed to learn a lot of things before I could get going with this system.

Final Scores: 81

sus-responses

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