Case Study ~ UI/UX Design
UX Writing, Marketing, web application Design

Playbook Education

Incorporating designer-centric cloud storage into the classroom.

Team
Dixie Waigel
Jihyun Kim
Andrea Juwono
Annie Pan (Project Mentor)

Role
Design Consultant
Marketing Lead
End product designer (solo)

Timeline
August 2021 - December 2021

Solo: June 2024 -

Tools
Figma

Solution Preview

Playbook Education is a cloud storage for design classrooms that features an expressive and streamlined commenting/feedback system.

Final Prototype is currently in process…

What is Playbook?

Playbook is a San Francisco startup cloud storage program that caters to the workflow of creatives.

There are currently many resources to help students learn in a standard classroom setting. Yet, the design classroom and its unique needs are ignored.

Playbook challenged our team to discover how to incorporate their creative cloud storage program into the classroom.

The Challenge

How might we best introduce a new cloud storage tool, Playbook, to design students and professors as a valuable educational resource?

The Opportunity

Project Timeline:

  • competitive analysis
    user interview (15)
    workshop + onboarding
    diary study (15)

  • Create opportunity for Playbook to introduce their product and gain insight into student usage of Playbook through hosting a workshop at UC Berkeley.

  • affinity map
    user personas (solo)
    identification of design goals (solo)

  • brainstorming session (heuristic evaluation)
    user flow
    low-fidelity wireframe

  • mid-fidelity prototype
    user testing
    high-fidelity prototype

My Role:

As a UI/UX Design Consultant, I worked closely with my team members and the executives of Playbook to gain user insights throughout the project.

Due to the research-heavy aspect of the project, I ideated and created the final designs as a solo project.

As a Marketing Lead, I organized project timelines, led team and client meetings, organized a Playbook workshop, and designed marketing assets to promote the workshop.

Research

Discovering how design students and instructors use cloud storage.

The primary user group was college students and instructors engaging in design in an academic setting.

I primarily focused on understanding the main pain points of non-design-focused cloud storage, where cloud storage comes into play in an academic design setting, and the habits of design students and instructors.

  • Since Playbook is a new product, I used the product from the perspective of students to familiarize myself with the pre-existing features and identify possible pain points.

  • I conducted interviews to better understand the context of diary study participants. For instance, I learned what file-sharing tools have been important for education, and what other educational tools for cloud storage should be implemented.

  • Through the diary studies, I identified the main pain points of using cloud storage, determined how cloud storage is used in an academic setting, and discovered different cloud storage use cases for students and instructors.

An overview of our affinity map of user research findings

Marketing

Promoting Playbook through a workshop at UC Berkeley

Our client tasked us with marketing Playbook to the student population. I decided to organize a workshop for design students, asking Playbook’s CEO Jessica Ko to come discuss the current state of the design industry while showing off the main functionalities of Playbook.

I also used this opportunity to gather students’ insights on their opinion and possible use cases of Playbook.

I created graphic assets to promote the Playbook workshop and posted on Instagram, Facebook, and LinkedIn. Additionally, I planned for the distribution of Playbook merchandise to encourage in-person attendance.

Instagram Post

Facebook and LinkedIn Post

Instagram Story

>> The workshop gathered in-person attendance of 40 people. Attendees said that they felt the workshop was very educational for furthering their careers and stated that they plan on using Playbook to manage their workflow.

Post-Workshop Survey Insights

I asked our attendees to provide some first-glance product insights. I wanted to know their frustrations, curiosities, and favorite aspects. Below are some of the ways students see themselves using Playbook in the future.

Key Insight

Design students and instructors need expressive ways to communicate or provide feedback on shared files.

What design students and instructors value the most out of a cloud storage application:

Main Design Focus: Communication

Most of the insights include features that Playbook already implemented. However, expressive commenting and communication features are still missing and are also not found on other cloud storage applications.

One of the most important ways to learn design is through feedback and critique. Students and instructors lamented that commenting features on the most popular cloud storage platforms are too limited. Students and instructors seek ways to communicate on shared files through images, long comments, and reactions (i.e. preference for sharing files on Slack to receive reactions).

User Personas and Journeys

Research Driven Design Goals

Efficiency in work-flow for both students and instructors

Eliminate the problem of having to access multiple different platforms for feedbacks. Allow commenting and previewing for all design files without having to download, including but are not limited to .psd and .ai files.

Ability to provide and receive in-depth feedbacks

Allow mark-ups and comments on specific part of image creations. Create a way to give and receive in-depth feedback without creation of a separate document. Allow image-based or handwritten feedback.

Expressive way to give and receive feedback

Allow a more fun and creative way to give feedbacks. Build support among peers and make engaging with peers’ work more interesting.

Transparency and control over sharing and commenting settings

Allow users to know who is able to view, edit, or comment on a file. Give control over whether comments are anonymous.

Ideation

Proposed Features and User Flow

Heuristic Evaluation

I tested the current Playbook UI as a design student or instructor creating a space to share classwork. Below are the most essential changes I'd make to improve the overall experience for students and instructors

User Flows for Instructors and Students

To empathize with users more and understand how students and instructors may use and navigate proposed education features, I created user flows that explore the features of each page in detail and how users may navigate to specific features. The different user flows reflect different settings and privacy options for both roles.

This version of the user flow was created after the final usability test. Find initial iterations here.

Initial Designs

Wireframes and Mid-Fidelity Prototype

Wireframes

Through wireframes, I explored the placement of features and how to create visual harmony within the pre-existing user interface. I also included an initial write-up of what each setting entails.

Initial Prototype

I created an initial prototype following the ideas and feature addition plans in the wireframe. In this initial iteration, I explored what permissions of different user roles entail, the iconography of the toolbar, and how users may navigate between pages. In addition, I changed some descriptions of settings to provide more transparency.

Usability Test

Understanding the Intuitiveness of Initial Prototypes and Incorporating Feedback for Suggested Features

To understand if my design-thinking led to intuitive and useful experiences, I showed my initial prototype to design students and instructor.

>> Methodology: I conducted three usability tests, on one student and two instructors. I asked them to follow a scenario and walk me through how they might accomplish certain tasks. Throughout the usability test, I asked them to speak their thoughts out loud.

Below is an overview of the transcript and scenarios of the usability test

Usability Test Results

Students and instructors stated that finding the necessary settings is very intuitive. The specificity of what each setting does is clearly stated. However, there was still some confusion and improvements can be made to the prototype:

  • Students and instructors wish that they could add images outside of comments (i.e. access through toolbar)

  • There are instructor needs for additional setting specific to file to make all comments anonymous

  • Instructors stated that they want to have the option to “suggest” instead of “comment”

  • Iconographies for hiding the toolbar and for hiding markups on the file are easily confused with each other

  • Instructors wish for the ability to attach another Playbook board to the shared file to share moodboards

  • Users want the option to make the toolbar vertical instead of strictly horizontal for accessibility

  • Students and instructors said they would use highlighters more than the pen tool

  • For more expressiveness and customization, color wheels should be included to change the colors of shapes, stickers, and highlighters

See a more in-depth analysis here 
Recalibrating

Back to the drawing board and brainstorming.

The feedback from the usability test showed me that I did not fully capture the needs of a design classroom.

I went back to brainstorming, and I thought back to when I participated in a design classroom and its critiques. I gave myself 5 minutes to make a mind-map:

This practice showed me that I am indeed missing many features as mentioned by the target users in the usability testing. It also gave me ideas to include the following features in the high-fidellity prototype:

  • Pointer tool

  • Record screen and audio option for instructors to give thorough verbal critique

  • Ability to view who is currently on the file