playground

HCDE 518: USER-CENTERED DESIGN

As a group project for the HCDE 518 User Centered Design course, our team focused on addressing the needs of professors in higher education when transitioning to a remote teaching environment. Through various research methodologies, we identified key personas and design goals that drove our design solution: playground. From user flows and wireframes to a high-fidelity interactive prototype, playground underwent several iterations and usability testing.

Role

UX/UI Researcher & Designer

Team

Frederick Goh
Susan Jung
Marc Woo
Blair Subbaraman

Timeline

10 weeks

Background

Due to overwhelming changes in our formal and informal lifestyles since the pandemic, it has become increasingly challenging to maintain individual health and well-being as a society. In education, we have seen a massive shift from the in-person classes to virtual classrooms.

One of the largest obstacles that educators face in creating this remote teaching environment is creating and maintaining human connection between professors, students and faculty.

The Challenge

How can we create and maintain human connection between professors, students and faculty through remote education?

The Solution

Create opportunities for individuals to communicate and build relationships in all aspects of education

Understanding the problem space

Interviews

To get a better understanding of existing remote teaching struggles, we interviewed 8 professors at the University of Washington about their personal experiences and goals for their classes.

Example of a user interview

Observations

Additionally, our team collectively observed 7 live classes and 5 recorded classes within the HCDE programs. This allowed us to match the personal experiences from the interviews to actual behavior.

Surveys

Lastly, we wanted to identify what needs and struggles existed within the wider teaching community by sending a survey through various media channels within the UW community. We received 14 responses.

Example Survey Question
A card sort we asked our interviewees

Interpreting insights into design goals

From our user research, we developed the following key insights:

01: Triangulation of Desiring Connection & Engagement

Across the methods, a desire for connection & engagement - from 'serendipitous conversation' & informal hallway banter to understanding how students are feeling & doing - stood out.

→ How might we help foster engagement in this remote setting?

02: Huge Initial Learning Curve, Easier Afterward

Converting a class into an online format involves big up-front costs in time & resources, and professors teaching first-time online classes voiced this across the methods. Classes that had previously been offered remote at the onset of the pandemic faced significantly fewer obstacles.

→ How might we reduce the friction for converting to online teaching?

03: Limited Time, or the Hope for Remote Teaching to be Temporary

A quote that stands out from an interview is "survival for now"- many professors voiced a scarcity of time & resources in being able to offer their courses in a remote setting.  For now, 'success' for a course means getting to the end of the quarter.

→ How might we help professors make it to the end of the term?

Additionally, we create 3 user personas to reflect our findings.

Persona 1: Caring Courtney
Persona 2: Anxious Alyssa
Persona 3: Non-Tech Nikita

Ideation

Fostering human connections between professors, students and faculty

From our insights, we individually came up with several possible design
solutions, ranging from a product enhancements to entirely new platforms.

Initial Ideation Sketches

Developing key user flows

Based on our ideas, we developed user stories and flows

User Stories + Flows

Introducing playground

The all-in-one teaching and learning experience

We ultimately decided on an all-in-one platform that would address professors’ needs for establishing connections with students inside and outside of the classroom, while also helping reduce anxiety when planning courses.

From an educator's perspective, the user would be able to create and manage courses, conduct synchronous class, and engage with the education community all within one web application.

Wireframes, Low-Fi, Mid-Fi

For each of the 3 functionalities, we designed out 3 modules from sketches, to low-fidelity, to mid-fidelity.

Wireframes, Low, Mid-Fidelity Designs

Usability Testing

Before moving further, we tested our design solution to see if it addressed the existing needs of our users. We recruited 5 participants who were a mix of professors and TAs at the University of Washington. Participants were asked to complete a set of 3 tasks that explored each of the 3 core features in playground using a mid-fi prototype that we built.

Example of a Usability Testing Session

Usability Findings

01: Can the user effectively access course materials?

Yes, 5/5 participants identified the "Course Sandbox" as where they would find course materials. However, 3/5 participants expressed uncertainty when differentiating between lesson items shown.

→Create clearer visual cues to differentiate between assignments, live lectures, and other materials

02: Can the user effectively complete his/her goal of developing connections with students

Yes, 4/5 participants appreciated the transparency of students' engagement during live class via the hexagonal student cams, reactions, and visibility in group activities. However, there was some confusion between the 'Think-Pair-Share" and "Groups" functionalities.

→"Think-Pair-Share" and "Groups" can be combined into a singular feature

03: Will the user know how to access the community?

No, 3/5 participants had trouble with understanding "Social Ball Pit" (Community) as the place where they could informally chat with others.

→Clearer labeling is needed to match the user's mental model.

Design Iterations

From our usability testing, we made the following key changes to our solution:

Course Sandbox Iteration
Campus Spaces (Community) Iteration
Live Lecture Iteration

Final Designs

Presenting our finalized designs! We created a final interactable protoype, along with a presentation and pitch video to showcase our solution.

Connect outside of class
During Class
And after
Pitch Video
Play with our prototype!

Reflections

As my first course in the HCDE Master’s program at UW, I greatly enjoyed meeting and working with others  in an end-to-end design thinking project. As students operating in a remote environment, we thought it would be extremely interesting and rewarding to understand and attend the needs of those on the other side of academia: our professors. This experience definitely opened my eyes towards the hard work and effort that educators go through behind-the-scenes to ensure a valuable learning experience for their students.

👋🏻 Thanks for reading!

@ Isabel Jiang 2023