A complete redesign of the Help Center for Agora Tutoring—a Canada-based platform that connects students and tutors for in-person learning—focused on improving clarity, trust, and usability within strict layout and content constraints.

  • Role: UX/UI Designer with three other teammates

  • Duration: April - May 2025

  • Tools: Figma, Hand sketch, Miro, Canva

Introduction

About Agora Tutoring

Agora Tutoring is a Canada-based tutoring platform designed to connect students, parents, and tutors through a flexible, community-driven educational experience. The platform offers in-person tutoring powered by a subscription-based model, where tutors retain 100% of their earnings and are empowered to operate as independent professionals.

With a mission to be trustworthy, flexible, and community-centered, Agora’s goal is to simplify how local learners find qualified tutors and build long-term learning relationships outside of traditional institutional structures. Think of it as the Upwork or Fiverr of tutoring — decentralized, self-directed, and designed to put control in the hands of tutors and families.

Project Overview

Our team was brought in through Springboard’s Industry Design Project (IDP) program to redesign the Agora Help Center — a foundational part of the website intended to educate, support, and convert new users. The previous Help section was incomplete, lacked structure, and had no finalized content beyond the navigation menu.

The founder, Dylan Zingle, provided us with Figma design themes, developer staging links, and basic structure. However, beyond the initial navigation and page titles, content, layout, and design decisions were left to us. Given the constraints on his time and the development team’s locked-in framework, our task was to turn a blank shell into a clear, trustworthy, and scalable support experience.

Scope of Work

The Help Center redesign focused on:

  • Building a scalable design system using components we developed in Figma

  • Creating full-page experiences for tutors, parents, and students

  • Structuring and writing most of the site’s help content ourselves due to the founder’s limited capacity to provide copy

  • Performing usability and A/B testing to refine page clarity

  • Designing within developer-imposed constraints (e.g., no changes to the global navigation, header, or sidebar)

  • Maintaining weekly and sometimes biweekly meetings with the founder to get feedback and iterate quickly


Phase 1: The Research Process

At the outset of the Agora Tutoring Help Center redesign, our team intended to conduct primary research to gain a deeper understanding of our users' behaviors, pain points, and expectations. However, this direction was quickly rerouted. Due to time constraints and a lack of available user contacts, the founder opted not to pursue primary research at this stage. We were explicitly told that no direct access to potential users—students, parents, or tutors—would be provided.

Given this limitation, we pivoted to an intensive secondary research and competitive analysis process, using all internal documentation supplied by the Agora team and analyzing leading tutoring platforms’ help sections to extract actionable insights. While this approach restricted our ability to validate assumptions through firsthand user feedback, we leveraged every resource available to develop a user-informed strategy within these constraints.

Secondary Research

Our secondary research focused on two critical goals: (1) understanding the general behaviors and pain points of students, parents, and tutors who seek third-party tutoring services, and (2) identifying trust-building patterns in UX design that could be adapted to our constraints.

Understanding the Target Audience

From internal documents shared by Agora (e.g., “Understanding Target Audience of Agora Tutoring”), we identified recurring concerns among each core group:

  • Students & Parents

    • Likes: Improved academic performance, increased confidence, and study skill development.

    • Dislikes: High costs, lack of awareness of struggles, and limited access to quality tutoring.

    • Needs: Transparency in pricing, communication, and more personalized options.

  • Tutors

    • Likes: Flexible schedules, control over earnings, and individualized instruction.

    • Dislikes: Poor tutor-student matching and concerns about student dependency.

    • Needs: Better onboarding, compatibility matching, and autonomy.

These insights helped us identify key focus areas for Help Center content: transparency, role clarity, affordability, and smart matching support.

UX Patterns for Building Trust

Drawing from the “UX Patterns for Building Trust” whitepaper and slides, our strategy incorporated principles critical to building confidence on informational pages—particularly in a service like Agora that facilitates in-person, one-on-one tutoring:

  • Content Clarity

    • Use simple, direct language to eliminate confusion and jargon.

    • Minimize text blocks and guide users with structured content and headings.

  • Visual Hierarchy and Layout

    • Prioritize key messages using an F-pattern layout: place vital info in the top-left.

    • Leverage consistent visual cues (e.g., icons, headings, buttons) for ease of scanning.

  • Transparency Cues

    • Make terms, policies, and processes highly accessible.

    • Include prominent CTAs to support user goals, such as finding a tutor or understanding subscription models.

These patterns were critical for our design decisions—especially since we faced strict immovability regarding the site's header and sidebar navigation. Instead of structural overhauls, we focused on optimizing layout, language, and hierarchy within the given content blocks.

Competitive Analysis


To benchmark Agora against industry standards, we performed a detailed audit of peer tutoring platforms including Superprof, Preply, Wyzant, Tutor24, italki, and others. Our analysis revealed key strengths and shortcomings across competitors that directly informed our recommendations.

Key Takeaways:

  • Common Strengths

    • Clear segmentation for user types (e.g., Students, Tutors, Parents).

    • Prominent and functional search tools.

    • Use of short, scannable help articles with categorized navigation.

  • Common Weaknesses

    • Many platforms had dense content and lacked visual aids.

    • Few platforms addressed the parent perspective explicitly.

    • Some had poorly designed “How It Works” pages without visual process flows.

Actionable Lessons for Agora

  • From Preply: The use of bite-sized help articles and segmented navigation should be adopted to reduce cognitive load and improve findability.

  • From Tutor24: While content was too text-heavy, its transparency around pricing and process flow helped inspire a simplified explanation model for Agora’s pricing and match system.

  • From Wyzant and italki: CTA integration within info pages drove conversions and was a tactic we sought to replicate on Agora’s Help pages to connect users with action steps like "Find a Tutor" or “Create a Post.”

In synthesizing this competitive research, we mapped out structural, visual, and content-based strategies that could improve Agora’s Help Center while respecting limitations imposed by the existing development framework.

How Might We Questions

After consolidating insights from secondary research, stakeholder interviews, and competitive analysis, it became clear that the core challenge of the Help Center redesign was not simply a matter of aesthetics or functionality—it was about communicating trust and clarity within rigid structural constraints, for an audience with diverse needs and expectations.

Given these realities, our central guiding question became:

How might we create a centralized and user-friendly Help section that improves transparency, builds trust, and enhances user engagement by clearly communicating our platform’s policies, mission, and functionality
even when we cannot change the core layout, navigation structure, or conduct direct user testing?

This challenge required us to approach design with precision, empathy, and creativity. Specifically, we needed to:

  • Address users' misunderstandings about Agora’s business model (e.g., tutors are not employees).

  • Provide guidance that works for both tech-comfortable tutors and concerned parents with minimal digital fluency.

  • Compensate for rigid headers and side menus by optimizing content clarity, visual hierarchy, and wayfinding inside the content blocks we could control.

  • Foster user trust in a context where interactions extend offline and the platform steps back post-connection.

This HMW question grounded all design decisions moving forward and helped ensure that our strategy stayed aligned with user pain points and business goals—even within the highly restricted development framework.

Phase 2: Ideation & Solution

This section outlines our ideation process, information architecture, as well as the sketches, wireframes, and high fidelity prototype.

Ideation

Navigating Constraints Through Strategic Ideation

With our “How Might We” question as our anchor, the ideation phase focused on developing high-impact content and layout strategies within the tight restrictions set by the founder and development team. These constraints included:

  • No flexibility in header or sidebar navigation design

  • Strict adherence to the existing layout grid and menu items

  • Minimal tolerance for revising or expanding page content beyond what was initially envisioned

To work effectively within these limitations, our ideation process centered on creating modular, adaptable solutions that emphasized clarity, trust, and user empowerment—without requiring structural or development changes.

Key Themes from Ideation

  1. Content Framing as UX

    • With no control over layout or nav, we treated language and content hierarchy as our primary design tools.

    • We restructured static paragraphs into scannable content blocks with headings, icons (via Google Icon Library), and CTAs that served as visual anchors.

  2. Clarifying Agora’s Unique Model

    • Users frequently misunderstood Agora’s business model (i.e., assuming tutors were employees).

    • We ideated a “What Agora Is / Isn’t” section using icon-based callouts to clarify that Agora is a matchmaking platform, not a tutoring employer.

  3. Personalization Without Personal Data

    • Since no user personas or data were provided, we drew on competitive patterns and internal docs to ideate role-based segmentation: separating help content into clear paths for students, parents, and tutors.

  4. Trust Through Transparency

    • Inspired by UX trust research, we ideated sections that clearly explained pricing, smart matching tools, and session logistics using plain language and FAQ-style formats.

    • Trust cues (e.g., “No commission. Tutors keep 100% of their earnings”) were elevated visually to reduce hesitation.

  5. Scalable Content Structure

    • Knowing the development team had minimal content flexibility, we focused on content templates that could be reused across pages (e.g., collapsible Q&A, icon + text lists, “3-step how it works” guides).

    • These structures were easy to implement, lightweight, and scalable.

  6. Internal Wayfinding

    • We ideated a system of cross-links and breadcrumbs within body content to simulate better navigation, helping users jump between tutor-, parent-, and student-relevant sections even when the global navigation couldn’t support it.

Site Map


Clarifying Access in a Constrained Environment

Given the restrictions placed on our design—particularly around the immutability of the global header and sidebar—we used the sitemap as a tool to bring clarity and purpose to the overall Help Center content architecture. This sitemap served as both a blueprint for our content strategy and a navigational workaround, helping us create intuitive content pathways despite development limitations.

Goals of the Sitemap

  • Segment users effectively by aligning content to distinct user types (students, parents, tutors).

  • Reduce confusion about platform functionality and user responsibilities.

  • Create CTA link paths between related pages to simulate deeper navigation and support user goals.

  • Ensure scalability for future additions without requiring restructuring.

Structural Overview

The sitemap is divided into 10 primary content categories branching off from the "Help Center" hub, which itself is accessed from the global footer's “Help Desk” link. Each main section contains child pages that answer role-specific questions or reinforce key trust-building information.

CTA Link Strategy

Dashed lines in the sitemap indicate cross-linked CTAs between sections. These are not structural menu links but in-body prompts guiding users to the next relevant page. For example:

  • The "How Do I Pay" page links to “Billing and Refund.”

  • “Who Are the Tutors” links to “Become a Tutor.”

  • “Report a Safety Concern” links back to “Contact Us.”

This approach helped us simulate a more fluid navigation experience even when sidebar and header controls were off-limits.


User Flows


Designing with Linear Simplicity in a Constrained Navigation System

With rigid header and sidebar structures fixed by the development team, our user flow design had to operate within a locked global layout. This meant we couldn’t restructure the site architecture or implement dropdowns or dynamic nav elements. Instead, we designed intuitive page-level interaction flows using embedded CTAs and progressive disclosure.

Below are two example user flows — “About Us” and “How It Works” — which highlight how we guided users from discovery to action using contextual logic, modular links, and CTA prompts.

Why This Matters

These flows reflect our core UX strategy: enable user understanding and decision-making without relying on global nav flexibility. Every decision in our flow prioritizes:

  • Cognitive simplicity

  • Trust reinforcement

  • Clear calls to action

Despite the fixed technical framework, these flows allow users to confidently explore Agora’s offerings and take the next logical step, whether that's signing up or learning more.

Sketches & Wireframes

Iterative Design Under Constraints

Operating within the confines of a locked navigation and development environment, our wireframing process played a vital role in shaping the body content of the Agora Help Center. Since we could not influence site-wide layout or menu logic, our challenge became designing page-level clarity through content structure, visual grouping, and call-to-action placement.

The team took a sketch-first approach to allow fast, flexible ideation. Multiple rounds of low-fidelity concepts helped us align on hierarchy, messaging, and UI behaviors before finalizing components in wireframe tools.

As the designer responsible for the Help Center landing page and Become a Tutor section, my workflow reflects a clear evolution from conceptual sketches to structured, developer-ready wireframes—all deeply informed by the technical limitations of the build.

Early Sketches

My initial sketches imagined the Become a Tutor page as a single, vertically stacked layout. This early version included:

  • A full overview with sections like “Why Join?”, “Who Can Apply?”, and “How to Apply?” placed one after another.

  • Scroll-based storytelling designed to keep the tutor engaged in one place.

  • Early visual hierarchy using cards, bullets, and simple CTA integration.

Design Intent: Deliver all critical tutor information in one seamless, narrative flow.

Revised Wireframes: Adapting to Development Constraints

As the project progressed, it became clear that the development team could not support complex content logic or accordion-based interactions within a single page. To address this, Paula made a strategic decision:

  • The “Become a Tutor” section was restructured into multiple child pages, each covering one core topic:

    • Why You Should Join Us

    • Who Can Apply

    • How to Apply

This wasn’t just a design choice—it was a technical workaround that aligned with how the site’s backend was being managed.

Why It Mattered: CMS Integration

The Agora platform likely uses a Content Management System (CMS), which is a tool that allows non-developers to create and update web content without writing code. By breaking the page into modular pieces:

  • Content editors could manage each section independently.

  • Pages could be updated faster and with less risk of breaking layout.

  • It aligned better with how CMS entries are typically structured—one page per content “unit.”

Final Wireframe Enhancements:

  • Each subpage included clear CTAs and graphic placeholders.

  • Layouts were simplified for readability and performance.

  • Role-specific instructions were chunked into step-by-step blocks for clarity and future scalability.

What This Demonstrates

My work highlights the value of responsive UX thinking—not just in terms of devices, but in adapting to backend and development realities. Rather than forcing a visually ideal layout that wouldn't function, her decision to modularize content ensured the “Become a Tutor” section remained engaging, scalable, and technically viable.

Design System

Working Within an Existing System

Unlike projects that begin from scratch, the Agora Tutoring Help Center redesign was built on an existing visual identity and partial design system. The development and founding teams provided a locked-down structure that already included:

  • A brand logo

  • A defined color palette (e.g., deep blue, green, yellow accents)

  • A primary typeface (Roboto)

  • A fixed sidebar and header UI (non-editable)

This meant our focus wasn’t on rebranding or redefining visual identity — but rather on extending it meaningfully through reusable components and scalable interface patterns.

What We Created

To enhance the system’s usability and improve the consistency of the Help Center, we focused our design work on four key areas:

  1. Reusable Components

    • Designed dynamic and responsive components (e.g., cards, expandable FAQs, breadcrumb trails).

    • Ensured all elements respected the locked sidebar width and font system.

  2. Content Modules

    • Standardized blocks for help content layouts, including:

      • CTA panels

      • Step-by-step guides

      • Role-specific content sections (e.g., For Students, For Tutors)

    • These allowed content managers to mix-and-match page elements without needing new design work for every use case.

  3. Enhanced Iconography

    • Expanded upon the brand’s limited visual language using Google’s Material Icon library, per project guidelines.

    • Created role-based and function-specific icons (e.g., safety, sign-up, matching, tutor info) to visually reinforce navigation and concepts.

  4. Scalability + Responsiveness

    • While we couldn't redesign the header/footer, we tested and built components that adapted gracefully across breakpoints, with special attention to mobile readability and tap target sizing

Summary

Rather than reinventing the brand, our design contribution was a strategic expansion of what already existed — building a true design system out of a partial toolkit. The goal was to empower the internal team and future designers with components that were modular, efficient, and aligned with Agora’s trustworthy, community-focused identity.

We treated the Help Center like a product in itself: one where structure, hierarchy, and consistency were just as critical as style.

High Fidelity Prototype

My Key Contributions to the Final UI

During the high-fidelity design phase, I focused on refining both the visual and structural aspects of the Help Center — not just designing individual pages, but shaping how the content system functions across the entire experience. Below are the three areas where I made my most impactful contributions:

1. Improving the Sidebar Navigation: Iconography & Information Architecture

Although the sidebar layout was fixed by the development team, I saw an opportunity to enhance its clarity and usability. I took initiative to:

  • Curate and improve the icon choices for each section, using visuals that better reflect each category (e.g., a graduation cap for “For Students,” a shield for “Safety”).

  • Reorder the content structure to guide users in a more intuitive way — placing essential pages like “How It Works” before secondary information like policies.

These changes made the sidebar easier to scan and aligned it more closely with how different user types (parents, students, tutors) would explore the platform.

Reflecting on Impact

Throughout this process, I focused on improving clarity, scalability, and user trust — not just within individual pages, but across the entire Help Center system. It was rewarding to see elements I designed adopted more broadly across the site, and to know that my work helped shape how users interact with the platform at critical moments in their journey.

2. Redesigning & Structuring the “Become a Tutor” Pages

One of my major contributions was reimagining the “Become a Tutor” section — a key part of the Help Center experience designed to attract and inform prospective tutors.

When I joined the project, this section existed only as basic written content and a suggested structure — not a wireframe, not a page design. It included:

  • A general overview (“Become a Tutor”),

  • A supporting paragraph (“Join Our Team as a Tutor”), and

  • A bullet-point-based requirements list (“Tutor Qualifications and Experience”).

While the copyright was helpful as a starting point, the content lacked structure, UI components, or any intentional flow from awareness to action.

What I Designed

I transformed the flat content into a modular, multi-page onboarding experience, broken down into three distinct and purposeful subpages:

  1. Why You Should Join Us

  2. Who Can Apply

  3. How to Apply

This structure made it easier for users to understand each stage of their decision-making journey and allowed Agora’s team to maintain and expand content over time.

UI & Content Enhancements I Delivered

Alongside the new structure, I introduced visual and interaction elements that elevated the experience:

  • Hero Banner Design: I designed a clear, purpose-driven banner that set the tone and framed the “Become a Tutor” section with a consistent visual hierarchy.

  • Icon-Enhanced Cards:

    • In “Why You Should Join Us” and “Who Can Apply”, I designed card-based layouts with custom icons, allowing users to quickly digest the value proposition and eligibility criteria.

  • Step-by-Step Visual List:

    • In “How to Apply”, I replaced a generic bullet list with a custom icon bullet list, turning a static process into a friendly, guided walkthrough.

These components helped clarify the platform’s unique value (like 100% earnings retention and flexible scheduling) and supported both first-time and returning users.

Founder Endorsement & System-Wide Impact

After reviewing my high-fidelity designs, the founder personally endorsed the layout and styling of this section. Specifically, they requested that the:

  • Card format, and

  • Icon bullet lists

be adopted universally across other Help Center pages as part of a reusable, site-wide UI standard.

What started as a static block of copy became a fully thought-out, conversion-optimized onboarding system — both scalable and visually cohesive with Agora’s growing platform.

3. Creating and Reframing the “Billing & Return” Section

Initially, the Help Center included only a generic “Return Policy” page. I recognized the need for a more informative and transparent solution and proposed a complete redesign.

  • I renamed the section to “Billing & Return” and elevated it to a primary navigation category to improve visibility.

  • I personally created the full content structure, synthesizing information from internal documents and aligning it with platform behavior.

  • I wrote and organized sections covering billing tiers, refund logic, and support pathways — all presented with clear visual hierarchy and built-in guidance.

This section became more than a policy page — it’s now a functional tool for users to understand payments and confidently navigate support when needed.

Phase 3: Usability Testing & Iteration

Through usability testing with real users, we validated the overall clarity and effectiveness of the Help Center design, making one key improvement by removing redundant “Previous/Next” buttons in favor of streamlined sidebar navigation. We also conducted A/B testing on the landing page, which led to replacing hover-reveal cards with always-visible content based on user preference. Several UI patterns I created—such as icon-based step modules and CTA banners—were adopted across other team members’ pages after receiving strong feedback from the founder. While some sections were ultimately marked out of scope for launch due to internal content constraints, they remain fully designed and ready for future deployment. This phase taught me how to adapt to real stakeholder input, developer limitations, and the realities of shipping user-centered design in a live product.

Usability Testing on High Fidelity Prototype

Moderated usability testing was conducted with five participants through Zoom and Discord to evaluate the high-fidelity Help Center prototype. Participants ranged in age from 25 to 50 and came from professional backgrounds including education, illustration, IT, and e-commerce.

Participants were asked to complete key tasks such as navigating the sign-up flow, exploring tutor and parent resources, finding billing and safety information, and locating answers through the FAQ.

Key Outcomes

  • Navigation & Clarity: All participants successfully completed tasks with ease. The site structure was described as intuitive, professional, and easy to explore.

  • Task Success: No significant friction was encountered in any user flow. The FAQ, “How It Works” guide, and “Become a Tutor” sections were especially well received.

  • Design Feedback: Visual design was described as clean and trustworthy. Users appreciated the consistent use of icons and headers, and noted the site felt inclusive and welcoming.

  • Key Change Made Based on Feedback: One recurring piece of feedback involved the “Previous” and “Next” navigation buttons placed at the bottom of many Help Center pages. Participants expressed that:

    • These buttons felt redundant, since the sidebar already clearly outlined page structure

    • The sequence implied by the buttons was not always intuitive or relevant to their needs

    • The buttons drew attention away from more important page-end elements like CTAs or next-step guidance

As a result, we removed the Previous/Next buttons across all Help Center pages. This simplified the interface and kept the focus on user-driven exploration via the sidebar, which proved to be more effective and expected.

The usability testing confirmed that the Help Center was easy to navigate, informative, and approachable for first-time users. Although no major structural changes were required, the removal of unnecessary bottom navigation elements led to a cleaner, more focused page design. This small but strategic update helped reinforce a more intuitive, user-controlled navigation model across the entire experience. The next design refinements came from stakeholder input and targeted testing, which will be detailed in the following sections.

A/B Testing on Help Center Landing Page

Before:

To refine the user experience of the Help Center’s entry point, we conducted lightweight A/B testing with three participants to compare two versions of the Help Center landing page.

The Test

  • Version A (Initial Design): Featured flippable cards — users would hover over each category card to reveal a short description of what the page contained.

  • Version B (Revised Design): Displayed static cards with icons and descriptive text visible by default, removing the hover interaction.

Participants were shown both versions and asked to provide feedback on usability, clarity, and first impressions.

Key Feedback

  • All three participants strongly preferred Version B.

  • The most common critique of Version A was that content was hidden unless hovered, making it harder to quickly scan the page or know where to click.

  • Users felt that Version B was more informative at a glance and allowed for quicker navigation with less guesswork.

  • One participant noted that the flip effect “felt gimmicky” for something that should be functional and informative.

Outcome

Based on this feedback, we removed the hover-to-reveal interaction and adopted Version B as the final design for the Help Center landing page. This change supported:

  • Greater content transparency

  • Improved accessibility (especially for users on mobile or with limited hover capability)

  • A more straightforward and professional user experience

This small but meaningful iteration helped ensure that the Help Center serves its core purpose: to provide immediate clarity and support to users entering the platform.

After:

My Original Design Adopted Across Team Member Pages

As the designer of the Become a Tutor and Billing and Refund sections, I developed many of the UI components and layout structures that were ultimately adopted across other parts of the Help Center. My designs not only addressed the needs of those specific pages — they also introduced visual patterns, interaction flows, and structural templates that improved content legibility, user engagement, and visual cohesion site-wide.

These patterns became de facto standards after being positively received by the founder, and were reused by other team members throughout their own page designs. Below are the patterns and components I designed which are applied to all other members’ pages.

1. Numbered Step-by-Step Instruction Blocks
I introduced a vertical step flow using large numerical icons paired with custom illustrations to simplify instructional content and enhance scanability. This format was first used in:

  • How to Join Us (under Become a Tutor)

  • Pricing and Payment Methods (Billing section)

It was later reused across many other pages such as:

  • How to Sign Up

  • Choosing the Right Tutor

Before:

Before:

2. CTA Banner with Split Layout
I created a flexible CTA banner layout combining a persuasive message, a call-to-action button, and a lifestyle photo. This was used as a final persuasive moment on both Become a Tutor and Billing and Refund pages.

This banner was then adopted (with design and language variations) across:

  • Quick Tips

  • How to Find a Tutor

  • How to Sign Up

  • Supporting Your Child’s Learning

Before:

Before:

3. Icon-Enhanced Content Lists
Across both my sections, I replaced standard bullet lists with icon-labeled cards or sections, making dense information (e.g., eligibility criteria, refund policies, payment options) more approachable and memorable.

This UI Component was later applied in:

  • Overview of Service (What We Offer)

  • Stay Safe

  • Learning that Fits You

Before:

Before:

Before:

After:

After:

After:

After:

After:

After:

After:

Influence on Design Cohesion

Because of these contributions, the final site presents:

  • A unified visual hierarchy that carries through every section

  • Role clarity, especially for tutors and parents, via repeatable layouts

  • A sense of intentional design, even across different contributors

My work on Become a Tutor and Billing and Refund effectively set the design tone for the rest of the Help Center. These systems gave teammates a consistent foundation to build from and allowed the platform to scale without design drift.

Final Thoughts

The Agora Tutoring Help Center redesign was a rewarding and complex project shaped by content constraints, rigid development structures, and the need for scalable, user-friendly information architecture. Our goal from the beginning was to transform a sparse, developer-led documentation layout into a welcoming, informative, and trustworthy experience for students, parents, and tutors alike.

My Takeaways

1. Thoughtful UI Systems Scale Across Teams
Many of the components I originally designed — from step-by-step icon flows to CTA banners and visual content cards — ended up being adopted across the entire Help Center. This validated our decision to treat the Help Center not as a set of isolated pages, but as a unified design system.

2. Strategic Communication with a Real Founder
Unlike fictional projects where we control all decisions, this project taught me what it truly means to design under leadership direction. Although the founder had limited experience in UI/UX, he still made the final calls. We quickly learned that advocating for our ideas required more than just good design — it took:

  • Strategic team alignment on messaging

  • Internal brainstorming sessions on how to frame our proposals

  • Deliberate, respectful back-and-forth communication to persuade and explain value

This was one of the most important soft skills I developed — knowing when to push, how to adapt, and how to speak the language of trust, not just visuals.

3. Persistent Communication Was Key

Despite the founder’s extremely limited availability, we maintained weekly (and sometimes biweekly) meetings to ensure alignment. We frequently followed up on action items, tagged him directly in Figma comments, and kept a steady rhythm of back-and-forth communication to get decisions made. These small touchpoints were critical to keeping the project moving forward and gave us real-world insight into how to work with a busy stakeholder.

4. Developer Constraints Shape Final Output
Another reality check was learning that development limitations often override ideal design. While many of our original ideas were feasible in theory, they weren’t always possible to implement due to backend structures, template limitations, or fixed global UI components. This taught me how to:

  • Prioritize design value within constraints

  • Break large ideas into modular pieces

  • Adapt solutions that still worked within a limited development system

5. Less Was More in Navigation
User testing confirmed that a simplified experience (e.g., removing the Previous/Next buttons and relying on sidebar navigation) better served users across all roles. This insight helped reinforce a design philosophy centered on clarity over complexity.

What we would do if we had more time

1. Mobile Optimization and Testing

While we designed all components with responsiveness in mind, mobile-specific adjustments and user testing were ultimately out of scope. With more time, we would’ve refined spacing, tap-target sizing, and mobile layout hierarchy to better support smartphone users — especially students and parents navigating on the go.

2. Content Validation for Complex Pages
Sections such as Billing, Safety, and FAQ required more specific content direction than what was available. The founder did not have the capacity to provide finalized write-ups or legal language, so we used our best judgment to draft and structure these pages based on platform context, tone, and competitive benchmarks.

While the founder expressed that he loved the design and appreciated the work, limited time and resources meant that he was unable to fully validate or supply content for these areas. As a result, he decided to hold off on publishing these sections for now, with the understanding that they can be revisited and reactivated once more internal clarity is reached.

Closing Reflection

This project wasn’t just about applying UX methods — it was about learning how to adapt, communicate, and deliver design that works in the real world. It challenged us to work as a team, align with a founder, compromise with developers, and still push for meaningful, user-centered design. I leave this project with sharpened design skills — but more importantly, with experience in what it takes to bring design to life in a real product setting.