elsabose

CONTEXT

Remember College Applications

CONTEXT

Remember College Applications

Role: For a Stanford class, I was paired with Kollegio's founders to identify and improve one of the platform's features.

Company: Kollegio, a platform that helps users prepare for college applications using AI counseling (https://app.kollegio.ai/).

Feature: Evaluating Extracurricular Activities

Focus: High school students applying to colleges using a desktop interface.

Timeline: 5 weeks

PROBLEM STATMENT

Pains of Evaluating Activities

PROBLEM STATMENT

Pains of Evaluating Activities

Problem

Lack of Guidance

Solution

Clear Action Items

FINAL PROTOTYPE

Introducing AI-Guided Activity Evaluation

FINAL PROTOTYPE

Introducing AI-Guided Activity Evaluation

NEEDFINDING

The Gap in Guidance

NEEDFINDING

The Gap in Guidance

Annotated Task Breakdown of Evaluating Extracurricular Activities with 3 users

Key Insight: After users add extracurricular activities, there is a lack of guidance on how to improve their work using Kollegio’s AI counselor.

USABILITY ISSUES

Low Hanging Fruit Fixes

USABILITY ISSUES

Low Hanging Fruit Fixes

Parking List Of Usability Issues
• The AI text input field is not interactive (users must select a prompt card).
• The AI outputs feel vague and not actionable.
• There are no clear next steps after creating an activity.
• Users don’t understand how the strength score is calculated.
• Users don’t understand the purpose of the "Upload" button.
• The "Leave Page" button is unclear.
• The "Add Activity" button moves unexpectedly.

DESIGN GOAL

Guidance vs Collaboration

DESIGN GOAL

Guidance vs Collaboration

How might we best support students' efforts to improve their activity list?

A/B Testing Question: Does AI guidance or collaboration better support students?

LOW-FI & MED-FI

Changing AI Interface

LOW-FI & MED-FI

Changing AI Interface

RESULTS

AI Guidance Works Better for Learning

RESULTS

AI Guidance Works Better for Learning

Insight: The collaborative chat required students to know how to prompt the AI well, while the guidance intuitively helped students learn.

A/B TESTING

Style Inspiration from Edtech

A/B TESTING

Style Inspiration from Edtech

Style A: Kollegio

Style B: Education x Friendly

RESULTS

Visual Cues for Better Interpretability

RESULTS

Visual Cues for Better Interpretability

“[the strength meter] colors helped when word choice didn’t”

“The faces help quickly orient me in the feedback”

Main Insights:
1. Strength meter colors were helpful even when word choice was confusing.
2. Doodles helped users understand the AI feedback more easily.

NEW PROTOTYPE

Compiling Learnings

NEW PROTOTYPE

Compiling Learnings

Notable Changes:
1. Added a "Get Feedback" button for users to easily get actionable guidance, that they initiate.
2. Improved integration of AI chat with guidance feature.
3. Adjusted button colors to reduce intensity, making key elements stand out more intentionally.
4. Introduced an option to minimize the AI panel, allowing users to focus on their activity list.

AI Feedback Button

Color Adjustment

Minimize AI Panel

Color Adjustment

One of the key processes during the accessibility audit was checking that colors had enough contrast.

RESULTS

Conducted Cognitive Tests

RESULTS

Conducted Cognitive Tests

Two Notable Issues:

1. It was unclear what aspects of the activity or content the AI feedback was referring to

2. Users were unsure if AI feedback was tailored to the entire activity list or a specific activity

STYLE SHEET

Designed with System Level Variables

STYLE SHEET

Designed with System Level Variables

Figma Library

I created system variables in Figma for the colors and typography using the style sheet.

About

I’m from San Francisco and enjoy woodworking, creating urban watercolors, and practicing martial arts. Fun fact: I have four shrimp as pets! 🌱🦐

Contact