CASE STUDY | PRODUCT DESIGN + INTERACTION

Grail Study Platform

Grail is a virtual group-study concept built around low-friction huddles, playful 8-bit penguin avatars, and a clearer path from onboarding into study rooms.

RoleUI/Product Designer

TimelineAug 2023 - Nov 2023

RecognitionMost Impressive Functionality + Best Interaction

Grail huddle study room screen shown on a phone mockup

Problem Students value studying with friends, but in-person meetups can be inconvenient.

Product idea An enjoyable digital space for collaboration, productivity, and studying from anywhere.

Success signals Prototype clarity, presentation feedback, and recognition for functionality and interaction.

CONCEPT

From finding people to entering a study room without losing the fun.

Grail was designed as a virtual group-study platform for App Team Carolina. The concept paired practical collaboration features with 8-bit penguin avatars so the experience could feel more approachable, social, and memorable than a generic productivity tool.

Problem statement

Studying together is useful, but meeting up is not always easy.

Our framing focused on students who appreciate the social and accountability benefits of studying with friends, yet struggle with distance, transportation, crowded spaces, noise, and unreliable Wi-Fi during busy exam seasons.

Purpose statement

Create a digital space that makes studying feel connected.

Grail addressed that challenge by helping students connect, collaborate, and stay productive from the comfort of their own space, while keeping the tone playful through avatars and themed study environments.

Prototype scope

The project was presented, not launched as a live product.

Since Grail did not ship, I could not measure retention or active usage. I treated success as whether the concept, flow, and interaction model were understandable to reviewers and compelling enough to stand out during the App Team Carolina Gala.

Feature pillars

Three ideas carried the product.

Customizable avatars gave students a sense of presence. Real-time collaboration made remote study feel active. Personalized rooms, music, and timers helped students shape an environment that matched how they wanted to focus.

Competitive analysis comparing Forest, Gather, and Zoom — Competitive analysis helped identify room for a product that combined collaboration, study focus, avatars, and progress cues.

EARLY STRUCTURE

Lo-fi frames helped us map the product before polishing the visual system.

The early prototype organized the main jobs of the app: entering the product, choosing a study context, customizing an avatar, finding people, and moving into a huddle. This stage kept the focus on flow and hierarchy before the interface became more expressive.

Flow planning

The earliest sketches were about sequence, not polish.

We mapped the core path first: open the app, sign in or get started, customize an avatar, create or join a room, and enter a study space. That kept the team focused on what had to happen before polishing the interface.

Scope choices

Some ideas stayed, some moved out of the core flow.

Timers, music, group chat, video, reminders, and themed spaces all came up during sketching. The prototype emphasized the ideas that most directly supported studying together: avatar identity, room presence, and collaboration controls.

Early Grail brainstorming sketch with screen flow notes — One of the earliest sketches mapped the route from login, to customization, to room creation, to joining a study room.

Low-fidelity Grail room and chat sketches — Lo-fi frames explored room lists, video space, group chat, and the study controls that would stay visible during collaboration.

VISUAL SYSTEM

A playful interface still needed a consistent product language.

The style guide used bright primary colors, softer accent versions, SF Pro Display typography, simple iconography, and rounded controls. The goal was to make Grail feel game-like and friendly while still keeping actions, search, and navigation easy to recognize.

Feature direction

Personality supported the product, not just the theme.

Customizable penguin avatars, video and group chat, availability signals, reminders, room templates, and background music all tied back to making group study easier to start and more enjoyable to continue.

System direction

The interface needed to feel playful but still usable.

Bright colors, rounded controls, simple icons, and SF Pro Display helped Grail feel approachable. The visual system also made common actions like save, search, play, mute, and leave easy to recognize.

Grail color palette, typography, icon, button, and search bar style guide — The style guide kept color, type, icons, buttons, and search patterns consistent across the prototype.

The logo system paired the product name with a pixel penguin to make the study platform feel friendly and immediately recognizable.

Purple, blue, and green Grail penguin avatars — Avatar color options gave users a simple way to personalize their presence in the study room.

ARTIFACTS

The project had to work as both a prototype and a presentation.

Beyond screens, I helped shape how Grail showed up visually: app icons, avatar language, presentation material, and a poster that made the concept easy to understand quickly at the App Team Gala.

Grail presentation poster with app screens and design notes — The poster framed the problem, purpose, features, style guide, personas, and prototype screens in one scannable presentation.

PROTOTYPE

Testing the feel of huddles, avatars, and study spaces.

The Figma prototype explored onboarding, create and join huddle flows, avatar personality, study rooms, and app icon concepts.

Low-fidelity screens mapped the core flow before the final visual style: sign in, customize an avatar, create or join a room, and enter a shared study space.

Avatar customization gave users a playful identity before entering a huddle.

Grail huddle room screen in its original phone frame — The huddle room used avatars, timer status, and persistent controls for group study.

Grail video collaboration screen — Video collaboration supported a more human version of remote studying.

Grail music library screen — Music and environment choices let students shape the mood of their study space.

RECOGNITION

Presented at the App Team Gala and recognized for functionality and interaction.

Grail received awards for Most Impressive Functionality and Best Interaction. For me, that recognition mattered because the project was not only visually playful. It also communicated a clear product flow and a reason for the interaction choices.

Award announcement from the App Team Gala.

REFLECTION

Grail taught me how much interaction design depends on emotional tone.

A study tool still has to be useful, but it does not have to feel sterile. Grail helped me practice designing product flows that are clear enough to use and distinctive enough to remember.

Back to portfolio