UX/UI Design · Academic Case Study

UX/UI Design Practice.

A growth narrative, a working framework for manual, AI-powered, and hybrid design, and the full academic case study for the PNW Floor Design mobile app — built to Professor Pak's creative brief template.

Courses
DDSGN 151 Mobile UI · DDSGN 215 Advanced UX
Instructor
Professor Min Pak, M.F.A.
Practitioner
Mila Boyd · ID 201605377
Anchor Project
PNW Floor Design Mobile App
Abstract

What this case study is for.

This is not a gallery of screens. It is a working academic document built to Professor Pak's creative brief template, expanded with two meta layers a final-year student should own: a growth narrative comparing who I was in 2022 to who I am now, and a working framework for choosing between manual, AI-powered, and hybrid design workflows. The anchor artifact is the PNW Floor Design mobile app — a real product for my real flooring company in Washington, designed using the design thinking process and the Bootstrap component skills from Advanced UX.

Growth Narrative

Who I was, who I am now.

In January 2022 Professor Pak wrote a letter of recommendation describing me as "naturally talented and hardworking," with "an incredibly astute attention to detail" and a "methodical creative process." That was the student version of me: careful, observant, willing to refine a single composition until it locked.

Four years and a return to school later, the careful attention is still there. What is new is the system thinking. I no longer try to make one beautiful artifact at a time. I build the rules the artifacts come from.

Then · 2022
  • One artifact at a time. Polish, refine, ship.
  • Composition-first. The page is the unit of work.
  • Colors and type chosen project by project.
  • "Does this poster look good?"
  • Tools as means to an end.
Now · 2026
  • System-first. Rules generate the artifacts.
  • The token (color, spacing, weight) is the unit of work.
  • One design system inherited across every page.
  • "Does this decision compound across the product?"
  • Tools as collaborators, weighed against the task.
"Critical thinking is your strongest skill. Build custom design systems to stand out from generic UI components. Strong case studies are the most important strategy."

Min Pak, M.F.A. · Chair of New Media & Digital Design, Pierce College

Working Framework

Manual, AI-powered, or hybrid?

The honest question every working designer faces in 2026 is no longer whether to use AI. It is when. The framework I work from is simple: do not let AI make a decision that defines the brand or the user. Let AI carry the volume so the designer can hold the judgment.

Manual

When the human owns it.

  • Design system tokens (color, type, spacing)
  • Information architecture and user flow
  • Brand voice and tone of every page
  • Critical UX decisions (privacy, accessibility, hierarchy)
  • Final visual refinement

Why manual: these are the choices that compound across every screen. A bad token poisons the whole product.

AI-Powered

When volume is the bottleneck.

  • Hero image exploration and moodboards
  • First-draft copy, then humanized
  • Boilerplate HTML and repetitive markup
  • Pattern checks (accessibility, readability)
  • Batch file operations and compression

Why AI: tasks where doing it by hand costs more attention than the work is worth. AI does the boring so the human can do the brave.

Hybrid · the strongest mode

When AI proposes, the designer judges.

  • AI generates five options, designer picks one and refines
  • AI drafts the code, designer corrects to the system
  • AI catches vibe-coded tells, designer rewrites in voice
  • AI handles file plumbing, designer protects the asset library
  • Always: the designer holds the brand and the system

Why hybrid: a designer with a clear system can use AI without losing themselves in it. A designer without a system gets eaten by it.

The rule I keep: if a decision can be reversed cheaply, AI can take the first pass. If a decision shapes everything downstream, the human takes the first pass.

Tools In Practice

The tool, for the task.

Every tool in my workflow earns its place by what kind of decision it serves.

TaskToolModeWhy
Design system authoringAdobe Dreamweaver · VS Code · CSS variablesManualTokens define every downstream decision. I write them by hand so I know exactly what each one does.
Wireframes & screen flowFigmaManualLogic and information architecture are mine. Figma is the canvas.
Brand identity, color, type pairingFigma · Adobe IllustratorManualIf the brand is borrowed, the trust is borrowed. I design my own marks.
Hero image explorationChatGPT image gen · Adobe FireflyAI-PoweredEight directions in an hour is impossible by hand. I pick one and refine.
First-draft copyClaude AIHybridI outline. Claude drafts. I rewrite in my voice. Voice is mine, volume is shared.
Production HTML & CSSAdobe Dreamweaver · Claude AI · Bootstrap 5HybridDreamweaver gives the editor and SFTP. Claude helps with patterns. The architecture decisions are mine.
Asset management, batch operations, compressionPython scripts · Adobe AcrobatAI-PoweredRenaming 29 files, compressing 153MB PDF to 14MB, recursive uploads. Volume tasks.
Photo editing, background removalAdobe Photoshop · remove.bgHybridAI does the rough cut. I do the cleanup the AI cannot see.
Accessibility & readability checksClaude AI · browser DevToolsAI-PoweredAI catches invisible text, poor contrast, missing alt attributes. I act on what it finds.
Final visual judgmentMy eyeManualAlways. The buck stops with the designer. No tool replaces taste.
Creative Brief · Pak's Template

PNW Floor Design app, the full brief.

Following Professor Pak's eight-section creative brief template, exactly as taught in DDSGN 151. The PNW Floor Design app is the synthesis of ten years inside the flooring industry and four years studying UX/UI.

4.1 · Background

Where this came from.

PNW Floor Design LLC was created from resilience, creativity, business strategy, and a vision to modernize how flooring companies connect with people. I worked directly with customers inside the flooring industry for over ten years — helping homeowners select materials, solve layout problems, understand product performance, and create spaces that feel aligned with their lifestyle.

Over time, I noticed the same gap on every consultation. Most companies focus only on selling product. Very few design for customer experience, digital systems, visual organization, or project transparency. I saw confusion. I saw homeowners overwhelmed. I saw businesses struggling with their own workflows. I realized I could help bridge that gap, but to do it well I needed UX/UI training. That decision is what brought me back to Pierce College in August 2024.

4.2 · Project Objectives

Problems and goals.

Problem statement. Homeowners struggle to plan renovation projects because they cannot visualize materials, understand the steps, or manage communication with their flooring vendor.

Goals.

4.3 · Key Message

What the brand says.

Beauty. Quality. Lasting impressions. Flooring that transforms every step.

Most flooring companies sell product. PNW Floor Design sells the experience around it. The app turns a high-anxiety purchase into a guided, transparent process where the homeowner stays in control from material selection through final install.

4.4 · Target Audience

Who this is for.

Two real personas synthesized from ten years of showroom conversations.

Persona 01
The Working Parent

Age: 42 · Location: Tacoma, WA

Role: Working parent, second home renovation

Goal: A flooring contractor who keeps her informed without phone calls. No time for showroom visits between work and pickup.

Frustration: The last contractor disappeared after the contract signed. She had to chase status updates.

Needs from PNW app: Project timeline, in-app chat, push notifications for delivery and install dates.

Persona 02
The First-Time Homeowner

Age: 31 · Location: Seattle, WA

Role: First-time homeowner, never picked flooring before

Goal: Understand what the categories mean (LVP vs. engineered hardwood vs. tile) without sounding ignorant to the designer.

Frustration: Houzz is inspiring but overwhelming. Floor & Decor's site does not explain enough. Home Depot is product-first, not design-first.

Needs from PNW app: Material Library with plain-language descriptions, filters by use-case (bathroom, kitchen, basement), saved favorites.

4.5 · Competitors

Where the gap is.

CompetitorStrengthWeaknessWhat PNW does instead
HouzzStrong inspiration library, large content catalogOverwhelming. No project tracking. Generic content, not tailored to the homeowner's actual project.Curated Material Library tied to the homeowner's specific project. Filters by use-case, not by style alone.
Floor & DecorWide product range, in-store samplingNo AR visualization. No way to preview a sample in your actual room before buying.Future AR visualization layer. Saved material metadata that survives the showroom visit.
Home DepotConvenience, scale, financingProduct-first, not design-first. No designer relationship after purchase.In-app chat with the assigned designer. Project visibility from quote through final install.
4.6 · Solutions & Requirements

What the app must do.

4.7 · Messaging & Deliverables

The design thinking process I followed.

01Research
02Ideation
03Low Fi
04High Fi
05Case Study
06Final Visual

01 · Research

Ten years of real showroom conversations turned into a research foundation. Documented the most common homeowner pain points: not remembering samples, losing communication after contract signed, confusion about material categories.

Mode: Manual. Real notes, real customers.

02 · Ideation · Empathy Map + Journey Map

Synthesized findings into two anonymous personas (The Working Parent, The First-Time Homeowner) and a customer journey: discover → consult → select → quote → install → live with. Identified post-contract communication as the steepest emotional drop.

Mode: Hybrid. AI helped cluster interview themes. Persona writing was mine.

03 · Low Fidelity · Sketches

Hand sketches and Figma low-fi wireframes for the ten core screens. Focus on flow, not pixels. Confirmed the navigation pattern (bottom-tab) and the priority of Material Library, Project Timeline, Chat.

Mode: Manual. The structure had to be mine.

04 · High Fidelity · Figma

Locked the visual design system (lavender, paper, dark-green primary, soft pink secondary, SF Pro + Source Serif Pro). Built component library first. Screens compounded instead of fighting each other.

Mode: Hybrid. AI helped with first-pass component variants. I refined every screen.

05 · Case Study Document

A 60-page case study PDF documenting every screen, every flow, the persona reasoning, and the visual system. Originally 153 MB. Recompressed to 14 MB without losing readability.

Mode: Hybrid. Manual writing, AI-powered compression.

06 · Final Visual Design

Final pass on every screen against the design system rules: limited palette, two-font pairing, single type scale, two radius values, subtle hover only. Stripped anything that drifted.

Mode: Manual. The system is the editor. I am the system.

4.8 · Visual Design System

The PNW app's mood and rules.

The visual design system for the PNW Floor Design app uses a different palette than this portfolio site (a brand should not borrow from another brand). The app's brand is lavender luxury — soft, premium, calm. Below are the locked tokens.

Theory

Soft luxury. Minimal, clean layouts. Human-centered digital experiences. The visual language signals "premium service" without being cold or corporate.

Color Tokens

Primary · Deep Green · #0F5A45
Secondary · Soft Pink · #F4C4B8
Accent · Lavender · #A7AAE1
Text · Dark Ink · #1F2937

Typography

TokenFamilySizeUse
H1SF Pro36pxScreen titles
H2SF Pro24pxSection headers
H3SF Pro20pxSubsections, card titles
H4SF Pro18pxTertiary labels
H5SF Pro16pxUI labels
H6SF Pro14pxTags, eyebrows
BodySource Serif Pro12pxAll long-form copy

Voice

Warm. Plain language. Confident without bragging. A friend who happens to know flooring. Never sales-y, never cold.

Logo & Iconography

Custom PNW house mark in deep green. Custom iconography for the three anchor features (tile sample, wood plank stack, heated-floor element). Icons hand-drawn in Inkscape, exported as SVG for crisp rendering at every screen density.

Sitemap

Ten screens, one product.

The full information architecture for the PNW Floor Design app. Every screen earns its place by serving a real homeowner task.

01 · Onboarding / Login
Email, password, create account, social sign-in
02 · Home Dashboard
Active projects summary, saved materials, upcoming consultations, next action
03 · Material Library
— Tile (porcelain, ceramic, natural stone)
— Wood (engineered, solid, LVP)
— Carpet (residential, commercial, area rugs)
04 · AR Visualization Tool
Camera overlay to preview material in user's room before purchase
05 · Book Consultation
Choose designer, pick time, in-home or virtual, pre-call questionnaire
06 · Project Timeline Tracking
Quote → Approval → Materials Ordered → Materials Arrived → Install Scheduled → Installed → Paid
07 · Chat with Designer
In-app messaging, photo sharing, designer availability indicator
08 · Invoices & Payments
Invoice history, secure payment, financing options, receipts
09 · Heated Floor Control
IoT integration, zone-by-zone scheduling, occupancy-pattern learning
10 · Profile & Settings
Account, notification preferences, saved addresses, designer relationship, sign-out
Anchor Features · Deep Dive

What the app actually does.

Material Library

Problem. Homeowners cannot remember which sample they liked. Photos in a phone gallery do not preserve product code, square footage, or installation type.

Feature. Saved materials with full metadata. Filter by room type, water resistance, foot traffic, budget.

Why it matters. Removes the "I think it was the gray one" conversation. The sample stays with the customer.

Project Timeline

Problem. After the contract signs, communication drops off. Homeowners do not know when materials arrive, when install starts, or what is next.

Feature. Live timeline of every project phase. Push notifications on phase transitions.

Why it matters. Project visibility is trust. Trust is repeat business.

Heated Floor Control

Problem. Smart-home control of radiant heat is fragmented across vendor apps. No one app knows the room layout the floor was installed under.

Feature. IoT integration mapped to the original install plan. Schedule by zone, by day, by occupancy.

Why it matters. The flooring product becomes the platform, not just the floor.

View Live Figma Prototype → Open Case Study PDF Download PDF

Live Figma file (view-only). Last updated as part of DDSGN 215 Project 2 submission.

Design System Connection

The portfolio site holds the same rules.

The PNW Floor Design app uses lavender luxury tokens. This portfolio site uses warm sepia tokens. Different brands, same discipline. The five constraints below apply to every project I touch.

5colors max
2fonts max
3type sizes
2radius values
3pxmax hover lift

Five colors means I cannot hide behind variety. Two fonts means the type pairing carries the emotion, not a third font. Three sizes means the hierarchy is decided once. Two radius values means every corner agrees. A 3-pixel maximum hover lift means the interaction is felt, not announced. Restraint is the proof that the designer made a choice.

Discoveries

What four years actually taught me.

A design system makes me smarter than I am alone.

When I have a system, I can think about the user instead of the pixels. The system holds the pixels for me. When I do not have a system, every decision exhausts a budget I cannot afford to spend.

AI is a microphone, not a voice.

AI can make my voice louder, faster, and reach further. It cannot replace the voice. The moment I let AI hold the brand voice, the brand stops being mine. The discipline is to ask AI for the volume work and never the identity work.

Restraint reads as class.

The 500-site audit on vibe-coded portfolios named the same patterns I had been making: purple gradients, em-dashes, glowing hovers, fake testimonials, placeholder names. None of those patterns are bad in isolation. All of them together signal a missing system. I removed every one of them from this site on purpose.

The flooring industry taught me product design before I had the word for it.

Ten years of helping homeowners pick tile, calm their anxiety, manage delivery problems, and protect their budget was a product design education in disguise. UX/UI school gave me the vocabulary. The job gave me the empathy. The combination is the work.

What's Next

The next case studies, already started.

Conclusion

The growth is real, the system is the proof.

A different student than the one Pak met in 2022 is writing this. Same attention to detail. Same methodical process. Now built on top of a design system that survives my own mistakes, an academic creative-brief discipline, and a tool framework that uses AI without losing the voice.

Read the Build Case Study Get in Touch