Building New Foundations for APOC Studio

UX/UI Design Information Architecture Product Design

I designed two new pages within the APOC platform—a discovery-driven Studio Template Page for browsing AR/3D assets, and a B2B Case Study Detail Page for showcasing large-scale brand collaborations.

Both pages were created from scratch to improve clarity, enhance storytelling, and provide scalable templates that support future content expansion.

Tools

Figma
Adobe Illustrator

Role

UI/UX Intern

Period

2025.03-05

Character Design Project Preview
1.

Studio Discovery Page

Overview

The Studio platform hosts a wide range of AR filters, 3D templates, and event-themed assets—but it lacked a dedicated page for browsing and discovering them. I designed the first-ever Studio discovery page, defining the information architecture, section flow, and UI system from the ground up.

The goal was to create a page where users could:

  • Understand what types of templates exist
  • Discover popular or relevant content quickly
  • Browse diverse asset categories with minimal cognitive load

Challenge

1. Many asset types, no structure

Studio's content had grown into multiple categories—AR filters, DL templates, event bundles, seasonal assets—but there was no cohesive IA to guide exploration.

2. A true "discovery flow" had to be created from scratch

Unlike typical listing pages, this one needed to surface content contextually as the user scrolls, balancing variety with clarity.

3. New components required, without breaking the existing brand

The brand uses soft gradients, rounded modules, and a clean white canvas. The challenge was to introduce new UI modules and grid structures while keeping the design consistent with the existing visual language.

Solution

1. A scroll-based discovery structure

I organized the entire page as a "narrative flow" of content modules:

  • Top categories
  • Trending templates
  • Most-used templates
  • Student-favorite sections
  • Seasonal / situational recommendations
  • Creator-focused sections
  • Social media / YouTube templates

Each section is built with a consistent card-based grid system, allowing users to scan quickly and dive deeper seamlessly.

2. Large visual category modules

At the top, I designed large category cards showcasing:

  • AR Filters
  • DL Templates
  • Event / Festival Templates

This immediately communicates the scope of the platform and sets the foundation for user orientation.

3. Behavior-based content grouping

Sections like Popular, Most Used, and Student Favorites were designed to help users find relevant content without overwhelming them.

Each card includes:

  • Thumbnail
  • Title
  • Short description
  • Minimal hashtags
  • Category indicator

The structure minimizes noise while improving scannability.

4. Gradient "theme boxes" for contextual storytelling

Mid-page sections such as "Templates for This Month" and "Templates You Might Need Right Now" use a soft lavender-pink gradient with rounded shapes to create a clear break between content groups and guide users visually through the narrative.

5. Designed for mobile-first adaptation

Even though the primary screenshot is desktop-first, each module was designed to collapse naturally into:

  • Single-column lists
  • Horizontal scrollable sections
  • Stacked card modules

ensuring consistency across breakpoints.

Approach

  • Rebuilt the IA based on content type, user intent, and usage patterns
  • Defined a modular content system aligned with brand visuals
  • Created low-fidelity sketches → structured wireframes → final visuals
  • Partnered with internal stakeholders to validate content hierarchy
  • Ensured that every module was component-ready for development

Design Decisions

  • Adopted a unified card design for all asset types
  • Used subtle background changes to differentiate thematic sections
  • Added "View All" on the right side to maintain flow without adding friction
  • Used minimal tagging to reduce cognitive load
  • Simplified category icons for universal comprehension

Result

  • Launched the first dedicated discovery page for Studio
  • Improved asset clarity and exploration efficiency
  • Consolidated fragmented content types into one structured, scroll-based flow
  • Created a scalable template used for future content expansions
Studio Discovery Page Result 1
Studio Discovery Page Result 2
2.

B2B Project Detail Page

Overview

I designed a new B2B case study detail page to introduce large-scale brand collaborations with clear storytelling and high visual fidelity. This page did not exist previously, so I built a reusable template that communicates context, creative process, and results.

Challenge

1. The purpose of the page had to be defined first

Existing project listings relied heavily on thumbnails, making it difficult to communicate narrative, problem-solving, or impact.

2. Diverse projects required a unified storytelling structure

Each B2B project differed in:

  • Purpose
  • Interactive features
  • Visual assets
  • KPIs

A scalable template was essential to house all future case studies in a consistent format.

3. High visual quality required for a B2B audience

The page needed to reflect the brand's premium look, support long-form content, and highlight rich visuals without overwhelming users.

Solution

1. Structured the page into a clear, reusable narrative system

Following best practices for case-study storytelling:

  • Hero — project identity
  • Overview — high-level summary
  • Purpose — context and goals
  • Solution — UX decisions, flows, and visuals
  • Impact — performance metrics or outcomes

This structure helps readers understand the project in a logical, fluid sequence.

2. Built a "visual annotation layer" (numbers 1–5)

To explain complex screens, I added numbered overlays directly on top of the visuals. This enables users to understand:

  • Interaction points
  • Key UI decisions
  • Element hierarchy

with a single glance—mirroring patterns used in senior designer portfolios.

3. Unified typographic scale and spacing rhythm

  • Clear section headers
  • Wide margins
  • Soft tonal dividers
  • Minimalistic black-and-white structure with light accents

These decisions allow the content-heavy case study to feel premium and readable.

4. Integrated measurable impact

Metrics such as "Global B2B 20,000+" were included to emphasize real-world value and scale—important for partner-facing materials.

Approach

  • Interviewed team members to extract project goals and insights
  • Organized contents into narrative buckets (hero / context / story / features / outcome)
  • Designed module systems that can be reused across different projects
  • Created custom annotation overlays to explain complex illustrations and rooms
  • Iterated between wireframes and visual compositions to finalize hierarchy

Design Decisions

  • Rounded containers and soft gradients to match the Studio brand
  • Dedicated image-first sections to highlight artwork and environment design
  • Repeatable text–image pairing patterns for readability
  • Numbered callouts to highlight points of interest
  • Soft hover and shadow accents to add depth without clutter

Result

  • Delivered the company's first dedicated B2B case-study template
  • Enabled the team to present brand collaborations with clarity and narrative depth
  • Improved external communication with partners and stakeholders
  • Provided a scalable template for future B2B project documentation
← Back to Projects