{ "schemaVersion": 2, "revision": 33, "site": { "meta": { "name": "Issa Abu Aita", "title": "UX Designer & Researcher" }, "global": { "logoImage": "assets/logo.svg", "logoAlt": "i—a", "navLinks": [ { "label": "about", "url": "/about" }, { "label": "work", "url": "/work" }, { "label": "projects", "url": "/projects" } ], "navigationGroups": [ { "label": "Navigation", "items": [ { "label": "about", "url": "/about" }, { "label": "work", "url": "/work" }, { "label": "projects", "url": "/projects" } ] } ] }, "home": { "availabilityText": "Creative Technologist", "introText": "With backgrounds in agency UX and marketing strategy, I bring design and business knowledge into designing the systems behind products and services. \n\nMy work spans government services, digital experiences across web and mobile, and internal digital systems. During my MFA in Interaction Design, I designed AI-enabled systems, physical and digital products, and experimented with natural user interfaces.", "introLinkText": "School of Visual Arts in New York", "introLinkUrl": "https://interactiondesign.sva.edu/" }, "footer": { "contactHeading": "Always down to connect & collaborate! ", "emailLabel": "Email", "email": "issabuaita@gmail.com", "emailCursorMessage": "Say hi", "copyrightText": "©2026", "social": [ { "label": "LinkedIn", "displayText": "linkedin.com/in/issaabuaita", "cursorMessage": "Let's connect", "url": "https://www.linkedin.com/in/issaabuaita/", "openInNewTab": true }, { "label": "Github", "displayText": "github.com/issabuaita-a11y", "cursorMessage": "Check my projects", "url": "https://github.com/issabuaita-a11y", "openInNewTab": true }, { "label": "Instagram", "displayText": "@issabuaita", "cursorMessage": "Follow along", "url": "https://www.instagram.com/issabuaita?igsh=MTZiOGZ3aDZjcHFvdg%3D%3D&utm_source=qr", "openInNewTab": true }, { "label": "Resume", "displayText": "Resume", "cursorMessage": "View resume", "url": "assets/uploads/Issa_Abu_Aita_Resume.pdf", "openInNewTab": true } ] }, "visibility": { "sections": { "about.experience": true, "work.hero": true, "work.projects": true, "archive.hero": true, "archive.projects": true, "archive.essays": true, "aiCode.hero": true, "aiCode.projects": true, "rer.hero": true, "rer.summary": true, "rer.phases": true, "rer.takeaway": true, "anchor.hero": true, "anchor.story": true, "anchor.impact": true, "anchor.related": true, "weave.hero": true, "weave.story": true, "weave.impact": true, "weave.related": true, "rehand.hero": true, "rehand.story": true, "rehand.impact": true, "rehand.related": true } } }, "pages": { "about": { "experienceBody": [ "I am an experience designer with a background across UX research, product design, service flows, and AI-supported interaction design.", "At UX Labs, I worked across government services, startups, and SaaS products, translating research into information architecture, user flows, UX audits, high-fidelity wireframes, usability testing, and product decisions. My work often sits inside complex systems with multiple personas, unclear handoffs, and services that need to become easier to understand without losing their structure.", "My MFA in Interaction Design at SVA expanded my practice beyond screens into physical interaction, service design, spatial experiences, and AI-supported products. I built across different formats: an interactive physical object, a mobile and TV storytelling experience, an AI-supported mobile concept, and a gesture-based natural user interface. Across this work, I explored how technology can respond to behavior, timing, context, motion, and shared use.", "Before product design, I spent 6 years in marketing across Jordan and the MENA region. I led the marketing team at Buffalo Wings & Rings Jordan, helping drive 17% revenue growth in 2019, then moved into a regional MENA role supporting new openings, product rollouts, and sales strategies. That background gives my design work a stronger understanding of audiences, business goals, culture, rollout, and the touchpoints around a product.", "Across my work, I am focused on turning messy systems into clear experiences. I design with attention to how people understand information, move through flows, respond to prompts, make decisions, and use technology in real life." ], "experienceImage": "", "experienceImageAlt": "", "educationHoverImage": "assets/uploads/issa-sva-graduation.webp", "educationHoverImageAlt": "Issa Abu Aita wearing his red graduation gown at the School of Visual Arts" } }, "collections": { "work": { "legacyFields": { "heroHeading": "Selected professional work" }, "orderedIds": [ "rer", "public-investment-fund", "rewaa" ] }, "projects": { "orderedIds": [ "hue-ai", "co-play-product-ecosystem", "weave", "re-hand", "anchor", "guess-the-topic", "inclusion-in-the-film-industry", "spotify-critical-analysis" ], "legacySources": { "aiCode": { "heroHeading": "Projects" }, "archive": { "heroHeading": "projects, papers, and writing from MFA and beyond" } } } }, "projectsById": { "rer": { "id": "rer", "collectionId": "work", "legacyCollection": "work", "originalIndex": 0, "status": "draft", "listing": { "id": "rer", "title": "Real Estate Registry", "anno": "UX Design", "cursorMessage": "Coming Soon", "textPlacement": "left", "image": "assets/uploads/MacBook_Pro_14__-_1-1786878072502-7d083a52bb.png", "imageAlt": "Real Estate Registry preview", "description": "", "video": "", "previewImage": "", "previewPoster": "", "previewVideo": "", "url": "", "openInNewTab": false, "hidden": false, "draft": true } }, "public-investment-fund": { "id": "public-investment-fund", "collectionId": "work", "legacyCollection": "work", "originalIndex": 1, "status": "published", "listing": { "id": "public-investment-fund", "title": "Public Investment Fund", "anno": "UX Research", "cursorMessage": "Coming soon", "textPlacement": "left", "image": "assets/uploads/Slide_16_9_-_3-1786878213818-9805e3c668.png", "imageAlt": "", "description": "", "video": "", "previewImage": "", "previewPoster": "", "previewVideo": "", "url": "", "openInNewTab": false, "hidden": false } }, "rewaa": { "id": "rewaa", "collectionId": "work", "legacyCollection": "work", "originalIndex": 2, "status": "published", "listing": { "id": "Rewa'a", "title": "Rewa'a", "anno": "UX Design", "cursorMessage": "Coming soon", "textPlacement": "left", "image": "assets/uploads/Rewaa.png", "imageAlt": "", "description": "", "video": "", "previewImage": "", "previewPoster": "", "previewVideo": "", "url": "", "openInNewTab": false, "hidden": false } }, "hue-ai": { "id": "hue-ai", "collectionId": "projects", "legacyCollection": "aiCode", "originalIndex": 0, "status": "published", "listing": { "type": "A capstone in collaboration with Amazon", "tag": "A capstone in collaboration with Amazon", "year": "", "role": "MFA Interaction Design", "scope": "A capstone in collaboration with Amazon", "techStack": "", "cursorMessage": "View", "title": "Hue AI", "description": "", "image": "assets/uploads/Frame__4_.png", "video": "assets/uploads/Hue.mp4", "imageAlt": "", "previewImage": "assets/uploads/hover-previews/hue-hover.webp", "previewPoster": "assets/uploads/hover-previews/hue-hover.webp", "previewVideo": "assets/uploads/hover-previews/hue-hover.mp4", "url": "/inclusive-design", "openInNewTab": false, "hidden": false } }, "co-play-product-ecosystem": { "id": "co-play-product-ecosystem", "collectionId": "projects", "legacyCollection": "aiCode", "originalIndex": 1, "status": "published", "listing": { "type": "MFA IxD Thesis", "tag": "MFA IxD Thesis", "year": "", "role": "MFA Interaction Design", "scope": "MFA IxD Thesis", "techStack": "", "cursorMessage": "Coming soon", "title": "Designing Co-Play Experiences", "description": "", "image": "assets/uploads/Slide_16_9_-_1.png", "video": "assets/uploads/Screen_Recording_2026-06-23_at_9.04.54_AM.mp4", "imageAlt": "", "previewImage": "assets/uploads/hover-previews/copay-hover.webp", "previewPoster": "assets/uploads/hover-previews/copay-hover.webp", "previewVideo": "assets/uploads/hover-previews/copay-hover.mp4", "url": "", "openInNewTab": false, "hidden": false } }, "weave": { "id": "weave", "collectionId": "projects", "legacyCollection": "aiCode", "originalIndex": 2, "status": "published", "listing": { "type": "Interactive", "tag": "Creative Coding", "year": "", "role": "MFA Interaction Design", "scope": "Creative Coding", "techStack": "", "cursorMessage": "View", "title": "Weave", "description": "A hand-gesture installation that lets people shape and mix music in real time, using their hands like an orchestra conductor", "image": "assets/uploads/weave-thumb-1200.webp", "video": "assets/uploads/IMG_2753.mp4", "imageAlt": "Weave project preview", "previewImage": "assets/uploads/hover-previews/weave-hover.webp", "previewPoster": "assets/uploads/hover-previews/weave-hover.webp", "previewVideo": "assets/uploads/hover-previews/weave-hover.mp4", "url": "/weave", "openInNewTab": false, "hidden": false } }, "re-hand": { "id": "re-hand", "collectionId": "projects", "legacyCollection": "aiCode", "originalIndex": 3, "status": "published", "listing": { "type": "Interaction Design", "tag": "Spatial Computing", "year": "", "role": "MFA Interaction Design", "scope": "Spatial Computing", "techStack": "", "cursorMessage": "View", "title": "Re-hand", "description": "A hand movement tool that started as a stretch break and became a rehabilitation aid.", "image": "assets/uploads/optimized-posters/Rehand-poster.webp", "video": "assets/uploads/rehandwebvideo.mp4", "imageAlt": "Rehand project preview", "previewImage": "assets/uploads/hover-previews/rehand-hover.webp", "previewPoster": "assets/uploads/hover-previews/rehand-hover.webp", "previewVideo": "assets/uploads/hover-previews/rehand-hover.mp4", "url": "/rehand", "openInNewTab": false, "hidden": false } }, "anchor": { "id": "anchor", "collectionId": "projects", "legacyCollection": "aiCode", "originalIndex": 4, "status": "hidden", "listing": { "type": "Product Design Engineering", "tag": "Product Design Engineering", "year": "", "role": "MFA Interaction Design", "scope": "Product Design Engineering", "techStack": "", "cursorMessage": "View", "title": "Anchor", "description": "Weather app that understands your day, not just the forecast.", "image": "assets/uploads/anchor-thumb-1000.webp", "video": "", "imageAlt": "Anchor project preview", "previewImage": "", "previewPoster": "", "previewVideo": "", "url": "/anchor", "openInNewTab": false, "hidden": true } }, "guess-the-topic": { "id": "guess-the-topic", "collectionId": "projects", "legacyCollection": "aiCode", "originalIndex": 5, "status": "hidden", "listing": { "type": "Game Design", "tag": "Game Design", "year": "", "role": "MFA Interaction Design", "scope": "Game Design", "techStack": "", "cursorMessage": "Play", "title": "Guess The Topic", "description": "A conversational game that turns messy group chat energy into fast social play.", "image": "assets/uploads/guess-thumb-1950.webp", "video": "assets/uploads/guess-the-game-thumb.mp4?v=1", "imageAlt": "Guess project preview", "previewImage": "", "previewPoster": "", "previewVideo": "", "url": "https://guessthetopicgame.netlify.app/", "openInNewTab": true, "hidden": true } }, "inclusion-in-the-film-industry": { "id": "inclusion-in-the-film-industry", "collectionId": "projects", "legacyCollection": "archive", "originalIndex": 0, "status": "published", "listing": { "title": "Inclusion in the Film Industry", "tag": "Inclusive Design", "cursorMessage": "Watch", "image": "assets/uploads/optimized-posters/inclusive-film-preview-poster.webp", "imageAlt": "A study into Inclusion in the Film Industry preview", "video": "assets/uploads/inclusive-film-preview-web.mp4", "previewImage": "", "previewPoster": "", "previewVideo": "", "url": "https://vimeo.com/1194222346?share=copy&fl=sv&fe=ci", "openInNewTab": true, "hidden": false } }, "spotify-critical-analysis": { "id": "spotify-critical-analysis", "collectionId": "projects", "legacyCollection": "archive", "originalIndex": 1, "status": "hidden", "listing": { "title": "Spotify Critical Analysis", "tag": "Design Histories", "cursorMessage": "View", "image": "assets/uploads/design-history-essays-poster.svg?v=2", "imageAlt": "Spotify design history essay series preview", "video": "", "previewImage": "", "previewPoster": "", "previewVideo": "", "url": "/design-history-essays", "openInNewTab": false, "hidden": true } } }, "caseStudiesById": { "rer": { "presentation": { "meta": [ { "label": "Year", "value": "2024" }, { "label": "Employer", "value": "UX Labs" }, { "label": "Role", "value": "Interaction Designer · Project Lead" } ], "hero": { "title": "Real Estate Registry (RER)", "intro": "As part of Saudi Arabia's Vision 2030 digital transformation, RER, the national body mandated to handle real estate title registration operations, needed to bring its off-plan real estate development service fully online for the first time.", "mediaLabel": "Hero image — replace with key screen" }, "sections": [ { "id": "overview", "label": "Overview" }, { "id": "process", "label": "Process" }, { "id": "discovery", "label": "Discovery" }, { "id": "service-design", "label": "Service design" }, { "id": "interaction-design", "label": "Interaction design" }, { "id": "usability-testing", "label": "Usability testing" }, { "id": "iteration", "label": "Iteration" }, { "id": "dev-handoff", "label": "Dev handoff" }, { "id": "outcome", "label": "Outcome" } ], "overviewCards": [ { "label": "Problem", "text": "The service had previously run entirely through paper-based procedures, involving multiple entities and government approvals with no digital infrastructure in place." }, { "label": "Approach", "text": "We reviewed the client's system maps, defined a high-level service flow, expanded it into wireflows, and designed role-based wireframes across the key service scenarios." }, { "label": "My Role", "text": "Interaction Designer and Project Lead, working alongside a UX lead and visual designer. I owned the service design, interaction design, and client communication from discovery through handoff. Visual design was handled separately." }, { "label": "Outcome", "text": "The service was approved with visual design applied and prepared for development handoff, covering all screens, states, and edge cases. The terminology mismatch identified in testing was resolved through a focused UX writing sprint and reflected in the final design." } ], "metrics": [ { "value": "4", "label": "Participants tested" }, { "value": "100+", "label": "Screens designed" }, { "value": "7", "label": "Tasks tested" } ], "processCards": [ { "label": "Discovery", "text": "We reviewed the client's system maps to understand how the service operated offline — tracing stakeholders, approval chains, and how information moved between parties." }, { "label": "Service Design", "text": "We defined a high-level service flow and expanded it into wireflows — mapping how each user role moved through the service across different scenarios and decision points." }, { "label": "Interaction Design", "text": "We designed role-based wireframes for landowners, real estate developers, and buyers — each with distinct permissions, states, actions, flows, and modules reflecting the complexity of the service." }, { "label": "Usability Testing", "text": "We ran moderated, task-based sessions with real estate developers to measure task completion and observe where they hesitated. One finding stood out: a terminology mismatch between the system's language and how developers talk on the ground." } ], "discoveryInsights": [ { "label": "Multi-stakeholder orchestration", "text": "A single request involved users, internal teams, and external entities — each with distinct roles and responsibilities." }, { "label": "Approval-driven logic", "text": "Progress depended on validations and approvals, with clear decision points controlling what actions could happen next." }, { "label": "Role-dependent actions", "text": "Access and allowed actions changed based on request state — permissions were state-dependent, not fixed." }, { "label": "Non-linear service flow", "text": "Information moved back and forth, revealing handoffs, dependencies, and potential points of delay." } ], "serviceInsights": [ { "label": "Role-based paths", "text": "Responsibilities separated across landowners, developers, and buyers to prevent invalid actions." }, { "label": "Multiple valid journeys", "text": "Supported different sequences — splitting before sale or selling before split — without breaking regulatory logic." }, { "label": "State-dependent navigation", "text": "What users could do depended on project or certificate state — not static menus or roles alone." }, { "label": "End-to-end visibility", "text": "Mapping the full lifecycle early exposed constraints and dependencies before moving into detailed UI." } ], "roles": [ { "id": "developer", "label": "Developer (RED)", "title": "Real Estate Developer dashboard", "body": "The primary operating surface for projects, certificates, requests, and role-specific actions.", "image": { "src": "assets/uploads/rer-red.png", "alt": "RER dashboard for the real estate developer role with unit states and request actions." }, "annotations": [ { "title": "State-based actions", "text": "Only relevant actions are shown per certificate state.", "position": "left" }, { "title": "Role-based visibility", "text": "Developer sees actions landowner and buyer cannot access.", "position": "right" }, { "title": "Status badges", "text": "Color-coded states: split, unsplit, transferred.", "position": "bottom" } ] }, { "id": "landowner", "label": "Landowner", "title": "Landowner oversight view", "body": "A high-level project view for oversight, status filtering, and understanding progress without exposing developer actions.", "image": { "src": "assets/uploads/rer-landowner.png", "alt": "Landowner interface for RER with project overview and unit status filters." }, "annotations": [ { "title": "Oversight first", "text": "The role needs progress visibility, not operational controls.", "position": "left" }, { "title": "Reduced permissions", "text": "Actions outside the landowner role are removed from the view.", "position": "right" } ] }, { "id": "buyer", "label": "Buyer", "title": "Buyer ownership view", "body": "A simple ownership surface that separates certificates, transferred units, and completed ownership.", "image": { "src": "assets/uploads/rer-buyer.png", "alt": "Buyer interface for RER showing property cards grouped by purchase status." }, "annotations": [ { "title": "Ownership clarity", "text": "The screen distinguishes what is owned, pending, and completed.", "position": "left" }, { "title": "Status grouping", "text": "Cards are grouped by purchase status instead of internal process language.", "position": "right" } ] } ], "participants": [ { "initial": "S", "name": "Sara", "role": "Business Analysis Manager" }, { "initial": "I", "name": "Ibrahim", "role": "Real Estate Developer" }, { "initial": "L", "name": "Lujain", "role": "Business Developer" }, { "initial": "A", "name": "AbdulRahman", "role": "Real Estate Developer" } ], "tasks": [ { "label": "Add a new project", "percent": 100, "count": "4/4" }, { "label": "Discovering the project page", "percent": 100, "count": "4/4" }, { "label": "Certificate ownership transfer", "percent": 100, "count": "4/4" }, { "label": "Discover cards & filter", "percent": 75, "count": "3/4" }, { "label": "Project requests navigation", "percent": 67, "count": "2/3" }, { "label": "Registration & login", "percent": 50, "count": "2/4 with difficulty" }, { "label": "Discover “Units” page", "percent": 25, "count": "1/4" } ], "findings": [ { "title": "“Unit”, “Split”, “Certificate” — 3 out of 4 users confused", "text": "When exploring the Units page, 3 out of 4 real estate developers could not understand the platform’s core terms. “Unit” was interpreted differently by each user. “Certificate” was not recognized as a real estate term. Only the RER employee understood the terminology correctly." }, { "title": "“Split” misinterpretation — 3 out of 4 users wrong", "text": "Each of the 3 developers who misunderstood “split” had a different wrong interpretation. The only consistent finding: the label did not communicate what the action actually does." } ], "iterationCards": [ { "label": "Refined action labels", "text": "Updated the labeling of main actions to better reflect how the process is described on the ground, while keeping regulated terminology intact." }, { "label": "Contextual tooltips", "text": "Tooltips added to main actions to clarify what could be done in each phase and what to expect next — without changing the underlying structure." } ], "handoffCards": [ { "label": "All states & edge cases", "text": "Every screen designed across all possible states — empty, loading, error, success, and edge cases per role." }, { "label": "Annotated specs in Figma", "text": "Interaction notes, component behavior, and design decisions documented directly in Figma for developers." }, { "label": "Role-based organization", "text": "Specs organized by user role — RED, Landowner, Buyer — reflecting the permission and state structure of the service." }, { "label": "Passed to visual designer", "text": "Wireframes with full interaction logic handed off for the UI layer." } ], "outcomeTasks": [ { "label": "Certificate ownership transfer", "percent": 100 }, { "label": "Add a new project", "percent": 100 }, { "label": "Discovering the project page", "percent": 100 }, { "label": "Discover cards & filter", "percent": 75 }, { "label": "Project requests navigation", "percent": 67 } ], "quote": "The biggest learning was that a well-structured flow can still break down when the system’s conceptual model does not match how users think. Usability testing made that visible — without it, we would have shipped a product that worked on paper but failed on the ground." }, "id": "rer", "projectId": "rer", "route": "/rer", "template": "rer", "contentMode": "structured", "legacyRootKey": "rer", "content": { "hero": { "breadcrumbLabel": "back to work", "breadcrumbUrl": "work.html", "projectLabel": "Service Design", "title": "Real Estate Registry (RER)", "intro": "As part of Saudi Arabia's Vision 2030 digital transformation, RER, the national body mandated to handle real estate title registration operations, needed to bring its off-plan real estate development service fully online for the first time.", "heroImage": { "type": "image", "src": "assets/uploads/anchor-hero-1535.webp", "alt": "Anchor phone interface used temporarily as a hero layout placeholder for the RER case study." }, "meta": [ { "label": "Employer", "value": "UX Labs | 2024", "url": "https://ux-labs.com/", "openInNewTab": true }, { "label": "Project Type", "value": "Service Design · Interaction Design", "url": "", "openInNewTab": false }, { "label": "Role", "value": "Interaction Designer & Project Manager (with UX Lead & Visual Designer)", "url": "", "openInNewTab": false } ] }, "summary": { "title": "Project Summary", "paragraphs": [ "As part of Saudi Arabia's Vision 2030 digital transformation, RER needed to bring off-plan title registration services online for the first time, translating a paper-based process with multiple entities and approvals into a digital service.\nThe service had no digital benchmark to design from, and its requirements were still being defined as we worked. We were designing the process and the product simultaneously." ], "steps": [ { "number": "01", "id": "discovery", "title": "Discovery", "text": "We started by reviewing the client's system maps and documentation to understand how the service operated offline — tracing stakeholders, approval chains, and how information moved between parties." }, { "number": "02", "id": "service-design", "title": "Service Design", "text": "From the system maps, we defined a high-level service flow and expanded it into wireflows — mapping how each user role moved through the service across different scenarios and decision points." }, { "number": "03", "id": "interaction-design", "title": "Interaction Design", "text": "Building on the wireflows, we designed role-based wireframes for landowners, real estate developers, and buyers — each with distinct permissions, states, and actions reflecting the complexity of the service." }, { "number": "04", "id": "usability-testing", "title": "Usability Testing", "text": "We ran moderated, task-based sessions with real estate developers — measuring task completion and observing where they hesitated." }, { "number": "05", "id": "Iterations", "title": "Iterations", "text": "One finding stood out: a terminology mismatch between the system's language and how developers talk on the ground. When labels don't match how users think, they hesitate at key actions — and that hesitation cascaded across decision points in the flow." }, { "number": "06", "id": "dev-handoff", "title": "Dev Handoff", "text": "Ran moderated sessions to identify hesitation points and language mismatches in the flow." } ] }, "phases": [ { "id": "discovery", "label": "Discovery", "navLabel": "Discovery", "blocks": [ { "type": "phase_intro", "spacingVariant": "default", "variant": "tall", "paragraphs": [ "We started by reviewing the client's system maps and documentation to understand how the service operated offline, tracing stakeholders, approval chains, and how information moved between parties before a single screen was designed." ] }, { "type": "insight_block", "spacingVariant": "default", "variant": "default", "title": "Key Insights", "paragraphs": [], "items": [ { "title": "Multi-stakeholder orchestration", "paragraphs": [ "A single request involved users, internal teams, and external entities, each with distinct roles and responsibilities." ], "marker": "dot" }, { "title": "Approval-driven logic", "paragraphs": [ "Progress depended on validations and approvals, with clear decision points that controlled what actions could happen next." ], "marker": "diamond" }, { "title": "Role-dependent actions", "paragraphs": [ "Access and allowed actions changed based on the state of the request, making permissions state-dependent rather than fixed." ], "marker": "triangle" }, { "title": "Non-linear service flow", "paragraphs": [ "Information moved back and forth across the system, revealing handoffs, dependencies, and potential points of delay." ], "marker": "dot" } ] } ] }, { "id": "service-design", "label": "Service Design", "navLabel": "Service Design", "blocks": [ { "type": "feature_block", "spacingVariant": "default", "variant": "default", "title": "Service Key Actions", "paragraphs": [ "Before moving into wireflows, we mapped the core actions of the service, tracing what the real estate developer actually does from start to finish, and where other stakeholders like the certificate owner enter the flow." ], "items": [ "The landowner adds the project, then assigns it to a RED.", "The RED splits certificates into titles before selling the certificates.", "The RED sells certificates before splitting them into titles." ], "chips": [] }, { "type": "media_block", "spacingVariant": "default", "variant": "default", "media": { "type": "image", "src": "assets/uploads/rer-service-flow.png", "alt": "RER service flow showing key off-plan actions and certificate owner steps." }, "caption": "" }, { "type": "feature_block", "spacingVariant": "default", "variant": "default", "title": "Wireflows", "paragraphs": [ "From the service flow, we expanded into wireflows, mapping how each user role moved through every action, where decision points appeared, and what happened at each state change." ], "items": [], "chips": [] }, { "type": "media_block", "spacingVariant": "default", "variant": "default", "media": { "type": "image", "src": "assets/uploads/rer-wireflows.png", "alt": "RER wireflows for landowner, RED, and user journeys." }, "caption": "" }, { "type": "insight_block", "spacingVariant": "compact", "variant": "compact", "title": "Wireflows Breakdown", "paragraphs": [], "items": [ { "title": "Role-based paths", "paragraphs": [ "The wireflows made it clear that responsibilities had to be separated across landowners, developers (RED), and users to prevent invalid actions." ], "marker": "dot" }, { "title": "Multiple valid journeys", "paragraphs": [ "The service needed to support different sequences, such as splitting before sale or selling before split, without breaking regulatory logic." ], "marker": "diamond" }, { "title": "State-dependent navigation", "paragraphs": [ "What users could do depended on the project or certificate state, not static menus or roles alone." ], "marker": "triangle" }, { "title": "End-to-end visibility", "paragraphs": [ "Mapping the full lifecycle early exposed constraints and dependencies before moving into detailed UI." ], "marker": "dot" } ] } ] }, { "id": "interaction-design", "label": "Interaction Design", "navLabel": "Interaction Design", "blocks": [ { "type": "phase_intro", "spacingVariant": "default", "paragraphs": [ "This phase focuses on translating system structure into clear, role-based interactions across key user groups." ] }, { "type": "role_block", "spacingVariant": "default", "variant": "tall", "title": "Real Estate Developer (RED)", "paragraphs": [ "The RED is the primary operator of the service, managing projects, splitting certificates, handling transfers, and tracking requests.", "The interface was designed as a full operational surface, organized around project details, units, and requests. Within the units view, certificates and units are grouped by state, with each state exposing only the actions relevant to that moment." ], "media": { "type": "image", "src": "assets/uploads/rer-red.png", "alt": "RER dashboard for the real estate developer role with unit states and request actions." } }, { "type": "role_block", "spacingVariant": "default", "variant": "tall", "title": "Landowner", "paragraphs": [ "The landowner's role is oversight, not operation. They need to know the project is moving, who the developer is, how many units exist, and where things stand.", "The interface reflects that: a high-level project view with unit status filtering, without exposing actions that belong to the RED." ], "media": { "type": "image", "src": "assets/uploads/rer-landowner.png", "alt": "Landowner interface for RER with project overview and unit status filters." } }, { "type": "role_block", "spacingVariant": "default", "variant": "default", "title": "Buyer", "paragraphs": [ "Buyers need one thing, clarity on what they own and where it stands.", "The interface organizes purchases by status, distinguishing between certificates, transferred units, and completed ownership, with visual treatment that makes the difference between a certificate and a title immediately clear." ], "media": { "type": "image", "src": "assets/uploads/rer-buyer.png", "alt": "Buyer interface for RER showing property cards grouped by purchase status." } } ] }, { "id": "usability-testing", "label": "Usability Testing", "navLabel": "Usability Testing", "blocks": [ { "type": "phase_intro", "spacingVariant": "default", "paragraphs": [ "We ran moderated, task-based sessions with real estate developers, observing how they moved through core service actions and where they hesitated. Sessions were conducted on the interactive prototype, with contextual questions about their offline processes and how they manage projects day-to-day." ] }, { "type": "insight_block", "spacingVariant": "default", "variant": "compact", "title": "Critical Insights", "paragraphs": [], "items": [ { "title": "Terminology mismatch", "paragraphs": [ "Official system language didn't match how developers talk on the ground, confusion cascaded across the entire IA." ], "marker": "dot" }, { "title": "Uneven process familiarity", "paragraphs": [ "Some steps felt intuitive, others didn't, depending on each participant's prior exposure to off-plan processes." ], "marker": "diamond" }, { "title": "Clarity over simplicity", "paragraphs": [ "Developers were comfortable with dense information, they just needed clearer cues at key decision points." ], "marker": "triangle" } ] }, { "type": "feature_block", "spacingVariant": "default", "variant": "default", "title": "Research Report", "paragraphs": [ "The report identified three knowledge gaps, market clarity, mental model alignment, and service familiarity, each pointing to the same root problem: the system spoke a different language than its users." ], "items": [], "chips": [] }, { "type": "media_block", "spacingVariant": "default", "variant": "default", "media": { "type": "image", "src": "assets/uploads/rer-research-report.png", "alt": "RER usability test conclusion report highlighting market, mental model, and service knowledge gaps." }, "caption": "" } ] }, { "id": "Iterations", "label": "Iterations", "navLabel": "Iterations", "blocks": [ { "type": "phase_intro", "spacingVariant": "default", "paragraphs": [ "Following the research report, the client clarified that this is a new service, users would develop familiarity over time.", "Rather than overhauling the entire interface, we ran a focused UX writing sprint targeting the most critical issue: the terminology mismatch that was breaking down the information architecture.", "The sprint produced two outcomes, refined action labels that better reflect how developers talk on the ground, and contextual tooltips that clarify what each action does and what comes next." ] }, { "type": "comparison_block", "spacingVariant": "compact", "title": "Refined Action Labels", "paragraphs": [ "We updated the labeling of the main actions to better reflect how the process is described on the ground, while keeping regulated terminology intact." ], "chips": [ "Terminology mismatch" ], "items": [ { "media": { "type": "image", "src": "assets/uploads/rer-labels-before.png", "alt": "Previous RER action labels." }, "caption": "Previous labels", "variant": "compact" }, { "media": { "type": "image", "src": "assets/uploads/rer-labels-after.png", "alt": "Updated RER action labels." }, "caption": "Updated labels", "variant": "compact" } ] }, { "type": "feature_block", "spacingVariant": "compact", "variant": "default", "title": "Contextual Tooltips for Core Actions", "paragraphs": [ "Tooltips were added to main actions to clarify what could be done in each phase and what to expect next." ], "items": [], "chips": [ "Uneven process familiarity", "Clarity over simplicity" ] }, { "type": "media_block", "spacingVariant": "default", "variant": "default", "media": { "type": "image", "src": "assets/uploads/rer-tooltips.png", "alt": "RER interface showing contextual tooltips for core actions." }, "caption": "" } ] }, { "id": "dev-handoff", "label": "Dev Handoff", "navLabel": "Dev Handoff", "blocks": [ { "type": "phase_intro", "spacingVariant": "compact", "paragraphs": [ "Placeholder content for Dev Handoff. Content to be updated.", "Content to be updated." ] } ] } ], "takeaway": { "title": "Project Takeaway", "paragraphs": [ "The biggest learning was that a well-structured flow can still break down when the system's conceptual model doesn't match how users think. Usability testing made that visible, without it, we would have shipped a product that worked on paper but failed on the ground.", "It also reframed how we think about UX writing. Labels aren't cosmetic, they're part of the information architecture. When the language is wrong, the structure breaks down with it." ] } } }, "anchor": { "id": "anchor", "projectId": "anchor", "route": "/anchor", "template": "case-study-v2", "contentMode": "structured", "legacyRootKey": "anchorV2", "content": { "breadcrumbLabel": "projects", "breadcrumbUrl": "/projects", "nextProjectLabel": "next project", "nextProjectUrl": "/weave", "projectLabel": "AI prototyped", "title": "Anchor", "intro": "Students plan their day around events, yet weather apps present forecasts by date rather than by event. Users are left to interpret what to wear or bring on their own.", "heroChips": [ "Next.js", "TypeScript", "Google Calendar API", "Weather API" ], "heroMedia": { "type": "image", "src": "assets/uploads/anchor-hero-1535.webp", "alt": "Anchor app showing calendar-aware weather cards for the day's events", "poster": "" }, "storyBlocks": [ { "media": { "type": "image", "src": "", "alt": "", "poster": "" }, "text": "Anchor is a weather app that turns weather into event-specific guidance. Instead of making you interpret a generic forecast, it reads your calendar and shows what conditions mean for the moments already in your day.\n\nThe prototype was built end-to-end with AI-assisted development using Next.js, TypeScript, Tailwind CSS, Google Calendar, live weather data, and Photon geocoding." }, { "media": { "type": "image", "src": "assets/uploads/Frame_6.png", "alt": "Anchor smart weather tips", "poster": "" }, "text": "" }, { "media": { "type": "image", "src": "assets/uploads/Frame_7.png", "alt": "Anchor event specific weather", "poster": "" }, "text": "" }, { "media": { "type": "image", "src": "assets/uploads/anchor-thumb-1000.webp", "alt": "Anchor project preview", "poster": "" }, "text": "" }, { "media": { "type": "video", "src": "", "alt": "", "poster": "" }, "text": "Anchor turns upcoming events into clear weather guidance, offering tips on what to wear or bring, so the forecast feels tied to your day rather than a generic timeline.\n\nEach calendar event gets its own forecast, timed and located to where it actually happens." }, { "media": { "type": "video", "src": "", "alt": "", "poster": "" }, "text": "Anchor pushes proactive notifications so that you know when to adapt before you step outside." }, { "media": { "type": "video", "src": "", "alt": "", "poster": "" }, "text": "I ran a moderated usability test with one participant in class. She understood the concept quickly, but the first dashboard felt overwhelming. The test showed that raw weather data and horizontal scrolling made the experience harder to navigate. Simplifying the dashboard into clear, actionable guidance made the product easier to understand and more useful." } ], "ctaText": "Check out the prototype", "ctaUrl": "https://anchorweatherapp.netlify.app/", "ctaOpenInNewTab": true, "related": { "allProjectsLabel": "all projects", "projectTitles": [ "Weave", "Re-hand", "Guess The Topic" ] } } }, "weave": { "id": "weave", "projectId": "weave", "route": "/weave", "template": "case-study-v2", "contentMode": "structured", "legacyRootKey": "weaveV2", "content": { "breadcrumbLabel": "projects", "breadcrumbUrl": "/projects", "nextProjectLabel": "next project", "nextProjectUrl": "/anchor", "projectLabel": "Creative Coding", "title": "Weave", "intro": "In a world where most digital interactions happen through screens, I wanted to explore what happens when the body, especially the hands, becomes the interface.", "heroChips": [ "p5.js", "ml5.js", "p5.webserial" ], "heroMedia": { "type": "video", "src": "assets/uploads/IMG_2753-web.mp4", "alt": "Weave interaction demo", "poster": "assets/uploads/optimized-posters/IMG_2753-poster.webp" }, "storyBlocks": [ { "media": { "type": "video", "src": "", "alt": "", "poster": "" }, "text": "Weave is an interactive audiovisual installation that transforms hand movement into sound. Participants shape and mix music in real time through movement, turning interaction into a live performance where no two experiences are the same.\n\nUsing hand tracking, the system turns the position and motion of the hand into layered sounds and projected visuals. Instead of clicking, tapping, or using a screen, people interact by moving their hands through invisible zones." }, { "media": { "type": "video", "src": "assets/uploads/IMG_2723-web.mp4", "alt": "Weave live interaction", "poster": "assets/uploads/optimized-posters/IMG_2723-poster.webp" }, "text": "Built with p5.js, ml5.js, and p5.webserial, Weave connects hand tracking, sound, and projection into one live system.\n\nThe interaction worked best when people stopped trying to control it perfectly and started playing with it. Small movements, pauses, and shifts in the hand changed the rhythm of the piece." }, { "media": { "type": "video", "src": "assets/uploads/IMG_2737-web.mp4", "alt": "People interacting with Weave at the exhibition", "poster": "assets/uploads/optimized-posters/IMG_2737-poster.webp" }, "text": "The feedback showed that people understood it through the body first, by moving, listening, and adjusting their hands.\n\nWeave was shown during the MFA IxD Studio, where over 150 people interacted with it." } ], "impact": { "intro": "The feedback showed that people understood it through the body first, by moving, listening, and adjusting their hands.", "beforeMetric": "Weave was shown during the MFA IxD Studio, where over ", "value": "150", "afterMetric": " people interacted with it.", "label": "" }, "ctaText": "Try it out", "ctaUrl": "https://weaveinteractive.netlify.app/", "ctaOpenInNewTab": true, "related": { "allProjectsLabel": "all projects", "projectTitles": [ "Re-hand", "Anchor", "Guess The Topic" ] } } }, "re-hand": { "id": "re-hand", "projectId": "re-hand", "route": "/rehand", "template": "case-study-v2", "contentMode": "structured", "legacyRootKey": "rehandV2", "content": { "breadcrumbLabel": "projects", "breadcrumbUrl": "/projects", "nextProjectLabel": "next project", "nextProjectUrl": "/anchor", "projectLabel": "Spatial Computing", "title": "Rehand", "intro": "What if repetitive hand exercises could feel less clinical, and more like something people would want to repeat?", "heroChips": [ "MediaPipe", "Procession" ], "heroMedia": { "type": "video", "src": "assets/uploads/Rehand-web.mp4", "alt": "Rehand installation in use", "poster": "assets/uploads/optimized-posters/Rehand-poster.webp" }, "storyBlocks": [ { "media": { "type": "video", "src": "assets/uploads/Re-hand-tool-web.mp4", "alt": "Rehand interaction demo", "poster": "assets/uploads/optimized-posters/Re-hand-tool-poster.webp" }, "text": "Re-hand began as an exploration of that question. We wanted to see if simple hand movements could become playful, camera-based interactions using MediaPipe.\n\nWe started by mapping hand gestures before thinking about the technology. Closing the grip and the three-finger pinch became the core movements because they are simple, repeatable, and common in hand mobility exercises." }, { "media": { "type": "video", "src": "assets/uploads/Re-hand-ideation-web.mp4", "alt": "Rehand live interaction", "poster": "assets/uploads/optimized-posters/Re-hand-ideation-poster.webp" }, "text": "Using a laptop camera, MediaPipe tracked the hand in real time and connected each gesture to an action on screen: crushing a tomato or tossing it away.\n\nOne challenge was tuning the gesture thresholds. The interaction had to feel responsive without triggering by accident.MediaPipe tracks specific hand landmarks through the camera. We used the distance between selected landmarks to define each gesture. When the right points came close enough, the system recognized a grip or pinch and triggered the action on screen." }, { "media": { "type": "video", "src": "assets/uploads/re-hand_prototype-web.mp4", "alt": "People interacting with Rehand at the exhibition", "poster": "assets/uploads/optimized-posters/re-hand_prototype-poster.webp" }, "text": "When we tested the prototype, people immediately connected it to real use cases. Some imagined it as a playful tool for parents or relatives with Parkinson’s, while others saw it as a short break from phone use that could encourage hand stretching.\n\nThe feedback also pointed toward the next step: adding more gestures and a wider range of hand movements." } ], "impact": { "value": "Feedback", "label": "We tested with a small group. The gestures clicked quickly, and the tool felt intuitive. \n\nBut one comment stayed with us: someone mentioned their mother has arthritis, and said this could actually help her, because it's fun enough to keep doing.\n\nWe built it for phone fatigue. That reframed everything." }, "ctaText": "Try it out", "ctaUrl": "https://issabuaita-a11y.github.io/Weave/", "ctaOpenInNewTab": true, "related": { "allProjectsLabel": "all projects", "projectTitles": [ "Weave", "Anchor", "Guess The Topic" ] }, "ctaHidden": true } }, "hue-ai": { "id": "hue-ai", "projectId": "hue-ai", "route": "/inclusive-design", "template": "inclusive-design", "contentMode": "structured", "sourceFile": "inclusive-design.html", "scriptFile": "inclusive-design.js", "content": { "meta": { "pageTitle": "Hue App — Issa Abu Aita", "description": "Hue App is a capstone in collaboration with Amazon exploring how a responsible AI system might show up in mental health interactions." }, "hero": { "eyebrow": "A Capstone in Collaboration with Amazon", "titleLines": [ "How might a responsible AI system", "show up in mental health interactions?" ], "audio": { "src": "assets/uploads/hue-story.m4a", "actionLabel": "Listen to the summary of this case study", "durationLabel": "01:38" } }, "overview": [ { "id": "problem", "title": "Problem", "body": "Therapy is costly and hard to access. People increasingly turn to AI for emotional support — but AI in mental health carries real risks without proper guardrails." }, { "id": "research", "title": "Research", "body": "Interviewed psychologists, social work professors, ML engineers, and users. Co-designed with a practicing therapist to map the full therapy journey and identify where AI could responsibly assist." }, { "id": "role", "title": "My Role", "body": "Part of a three-person team. Led research, co-design sessions, journey mapping, and contributed to concept development across onboarding and between-session touchpoints." }, { "id": "solution", "title": "Solution", "body": "An AI system that responsibly assists at two moments: matching clients to therapists during onboarding, and supporting accountability between sessions, while keeping clinical judgment human." } ], "conceptVideo": { "src": "/assets/uploads/AmazonInclusive.mp4", "label": "Concept video" }, "process": { "title": "Our Process", "steps": [ "Discovery: Desk Research & Expert Interviews", "Synthesis", "Co-design", "Design principles", "Provotype" ] }, "researchFindings": { "title": "Desk Research Findings", "items": [ "People want quick emotional outlets.", "New habits around therapy are forming (e.g low-friction)", "AI shift raises new questions for responsible design.", "AI provides easy access." ] }, "problemStatements": { "initial": { "label": "Initial Problem Statement", "text": "Because therapy is costly and hard to reach, young adults look for easier ways to vent and feel heard, so they resort to AI because it’s always available, low-cost, and responds immediately." }, "refined": { "label": "Refined Problem Statement", "text": "People’s expectations around therapy have changed, but the practice hasn’t evolved with them. This mismatch leaves clients turning to AI because it seems to meet those needs more directly." } }, "expertResearch": { "intro": "We got talking...", "experts": [ { "id": "james", "name": "James", "role": "Psychologist, PhD", "avatar": { "src": "assets/uploads/inclusive-james-avatar.png", "alt": "James" }, "insights": [ { "title": "Non-Functioning vs Functioning Clients", "body": "AI can be risky for non-functioning clients who need clinical supervision, so strong guardrails are essential. But for functioning clients who face occasional triggers or tough days, AI can offer helpful support." }, { "title": "Any AI solution must adapt to clinical context", "body": "One-size-fits-all guidance is unsafe. AI needs to adjust to different pathologies, user capacities, and levels of clinical risk." } ], "quote": "Technology widens access but weakens the therapist’s ability to ensure client’s safety due to limitation in physical observation and loss of nuances" }, { "id": "bill", "name": "Bill", "role": "AI Engineer", "avatar": { "src": "assets/uploads/inclusive-bill-avatar.png", "alt": "Bill" }, "insights": [ { "title": "Personalization is limited and risky", "body": "Customizing AI to match individual emotional needs could reduce harm, but AI is still constrained by the data it was trained on. That means it can still produce ethical mistakes, misinformation, or poor emotional guidance." }, { "title": "AI lacks human judgment", "body": "AI relies on generalized data and patterns, not situational or subjective judgment. It cannot replace the nuanced decision-making therapists use when assessing emotional context or risk." } ] }, { "id": "lauri", "name": "Lauri", "role": "Professor of Social Work", "avatar": { "src": "assets/uploads/inclusive-lauri-avatar.png", "alt": "Lauri" }, "insights": [ { "title": "Therapy has shifted culturally", "body": "Psychotherapy moved from something stigmatized to something normalized and widely accessible, especially after the pandemic. Online and platform-based counseling accelerated this shift and paved the way for AI-mediated emotional support." }, { "title": "People now use AI for companionship, not just crises", "body": "Many users aren't clinically unwell — they turn to AI for light emotional relief, daily venting, and a sense of companionship." } ], "quote": "In fast-paced cultures, AI’s instant responsiveness satisfies the social demand for controllable emotional management." } ] }, "postTherapy": { "title": "Post Therapy", "participant": { "name": "Steve", "role": "Grad Student, 28", "avatar": { "src": "assets/uploads/inclusive-steve-avatar.png", "alt": "Steve" } }, "feelings": [ "Paid money but disappointed in the result and services", "Felt like they were just prescribed medication without much support" ], "timeline": [ { "year": "2023", "event": "First Visit", "detail": "to therapy" }, { "year": "2024", "event": "Second Visit", "detail": "Final therapy session", "note": "User concluded to not rely on people for help but only themselves." } ], "prompt": "Steve now relies on AI for venting and receiving solutions", "chatGpt": [ "Dump feelings", "Structure and solutions" ], "motives": [ "Hoping for clarity", "Experience matches therapy expectations", "Quick and easy access" ], "endGoal": [ "Structure", "Dump feelings", "Actionable items", "Apply the science of psychology to future problems of this nature." ], "quote": "I was hoping for clarity. Experience matches what I expected, and more." }, "designPrinciples": { "title": "Design Principles", "items": [ { "id": "augment", "title": "Augment, not replace", "body": "Use AI to add structure, reminders, or clarity, but keep clinical judgment human.", "icon": "assets/uploads/inclusive-principle-augment.png" }, { "id": "meet-clients", "title": "Meet clients where they are", "body": "Support should be available in the moments people actually need it.", "icon": "assets/uploads/inclusive-principle-heart-1.png" }, { "id": "therapist-led", "title": "Therapist-Led", "body": "AI should never operate independently in sensitive contexts.", "icon": "assets/uploads/inclusive-principle-heart-2.png" }, { "id": "agency", "title": "Agency, not dependence", "body": "Every interaction should help users reflect, take action, and rely more on themselves, not on the AI.", "icon": "assets/uploads/inclusive-principle-heart-3.png" } ] }, "coDesign": { "heading": "Co-designer", "person": { "name": "Nathan", "role": "Psychotherapist", "avatar": { "src": "assets/uploads/inclusive-nathan-avatar.png", "alt": "Nathan" } }, "session": { "title": "Co-design Session", "description": "We asked Nathan to map his journey with a new client, from onboarding through therapy, sharing what works, what breaks down, and where things need to change.", "map": { "src": "assets/uploads/inclusive-therapist-journey-map.png", "alt": "Therapist journey map" } }, "beforeFirstSession": { "title": "Before first session", "notes": [ "Early paperwork such as intake forms and questionnaire focuses on logistics, not alignment." ], "items": [ "Expectations stay implicit.", "Goals are not aligned early.", "The first session starts without a shared understanding." ] }, "betweenSessions": { "title": "In-between sessions", "notes": [ "Therapists must wait until the next session to check in, making follow-up between sessions difficult.", "Clients rely on self-motivation to carry therapy work between sessions." ], "items": [ "Emotional momentum fades.", "Clients sit alone with unresolved thoughts.", "Doubt grows quietly: “Is this working?”" ] } }, "opportunities": { "statement": "People’s expectations around therapy have changed, but the practice hasn’t evolved with them. This mismatch leaves clients turning to AI because it seems to meet those needs more directly.", "statementParts": [ "People’s expectations ", "around therapy have changed, but the practice hasn’t evolved with them. This ", "mismatch", " leaves clients turning to AI because it seems to meet those needs more directly." ], "intake": { "problem": "Expectations are missed because long intake forms collect data but not what clients actually need.", "hmw": "HMW replace administrative intake with more meaningful ways to surface clients’ goals and expectations early?" }, "matching": { "problem": "Clients enter therapy without a shared understanding of who the therapist is, how they work, or what “fit” actually means.", "hmw": "HMW help clients express their needs and see therapist fit through shared signals rather than paperwork?" } }, "concepts": [ { "id": "collecting-information", "phase": "Before the session:", "title": "Collecting Information", "body": "A voice-based AI asks short, guided questions and translates responses into color signals, helping express client needs without relying on long forms or clinical language.", "pill": "Collection of Information", "hmw": "How might we replace administrative intake with more meaningful ways to surface clients’ goals and expectations early?", "screen": { "type": "video", "src": "assets/uploads/inclusive-collecting-phone-screen.mp4", "alt": "Phone screen showing an onboarding prompt with colored tiles and a Start button" } }, { "id": "color-matching", "phase": "Before the session:", "title": "Color Matching", "body": "Color matching connects clients with therapists whose approach, values, and style align with their expressed needs, making fit easier to understand upfront.", "pill": "Color Matching", "hmw": "How might we guide clients to find a therapist who fits what they actually need so the relationship lasts longer?", "screen": { "type": "video", "src": "assets/uploads/inclusive-color-phone-screen.mp4", "alt": "Phone screen showing a color matching prompt with a find your match button" } }, { "id": "nudging", "phase": "In-between sessions", "title": "Nudging", "body": "AI can provide gentle prompts for mood regulation while giving therapists feedback on whether those nudges are effective.", "labels": [ "Mood Evaluator", "Nudges", "Nudge Planning" ], "hmw": "How might we support clients between sessions so therapy feels continuous and actually helps with everyday triggers?", "screen": { "type": "image", "src": "assets/uploads/inclusive-nudging-phone-screen.png", "alt": "Phone screen showing a Hue daily check-in prompt" } }, { "id": "recoloring", "phase": "In-between sessions", "title": "Recoloring", "body": "Recoloring allows clients to revisit and adjust their color through short check-ins, helping the system and therapist stay aligned with their current state.", "pill": "Recoloring", "hmw": "How might we support clients between sessions so therapy feels continuous and actually helps with everyday triggers?", "screen": { "type": "image", "src": "assets/uploads/inclusive-recoloring-phone-screen.png", "alt": "Phone screen asking, Are you still the color red?" } } ], "betweenSessions": { "statementPrefix": "People’s expectations around therapy have changed, but the practice hasn’t evolved with them. This mismatch leaves ", "statementEmphasis": "clients turning to AI because it seems to meet those needs more directly", "statementSuffix": ".", "problem": "Therapy lacks consistent follow-ups, daily support, nudges, and space to process everyday triggers.", "hmw": "HMW support clients between sessions so therapy feels continuous and actually helps with everyday triggers?" }, "closingReflection": { "title": "We came in wanting to build something AI-native.", "body": "Talking to experts, co-designing with a therapist, and going deep into the problem changed that. AI can do a lot but responsible design is about knowing where to draw the line. The design principles we built weren't just a deliverable. They were the guardrails that kept the solution honest." } } }, "design-history-essays": { "id": "design-history-essays", "projectId": "spotify-critical-analysis", "route": "/design-history-essays", "template": "design-history-essays", "contentMode": "writing-collection", "sourceFile": "design-history-essays.html", "scriptFile": "design-history-essays.js" } }, "writing": { "heading": "Spotify: A Deep Dive into Its Design History", "intro": "A developing essay series tracing Spotify as a designed system: streaming, interface metaphors, algorithms, platform power, accessibility, and the tradeoffs behind frictionless listening.", "orderedIds": [ "spotify-and-the-interface-of-listening", "the-feed-as-a-design-object", "search-memory-and-the-shape-of-knowledge", "portable-music-before-streaming", "the-camera-phone-and-everyday-seeing", "maps-movement-and-interface-trust", "the-checkout-button", "notifications-and-the-design-of-interruption" ], "essaysById": { "spotify-and-the-interface-of-listening": { "id": "spotify-and-the-interface-of-listening", "originalIndex": 0, "entry": { "title": "Spotify and the Interface of Listening", "meta": "Design History / PDF", "description": "A short essay on how Spotify shaped music discovery, listening habits, and the visual language of streaming.", "pdf": "" } }, "the-feed-as-a-design-object": { "id": "the-feed-as-a-design-object", "originalIndex": 1, "entry": { "title": "The Feed as a Design Object", "meta": "Design History / PDF", "description": "A study of feeds as interfaces for attention, ranking, rhythm, and cultural production.", "pdf": "" } }, "search-memory-and-the-shape-of-knowledge": { "id": "search-memory-and-the-shape-of-knowledge", "originalIndex": 2, "entry": { "title": "Search, Memory, and the Shape of Knowledge", "meta": "Design History / PDF", "description": "An essay on search interfaces and the way they changed how people find, trust, and remember information.", "pdf": "" } }, "portable-music-before-streaming": { "id": "portable-music-before-streaming", "originalIndex": 3, "entry": { "title": "Portable Music Before Streaming", "meta": "Design History", "description": "A look at portable listening devices and the shift from ownership to access.", "pdf": "" } }, "the-camera-phone-and-everyday-seeing": { "id": "the-camera-phone-and-everyday-seeing", "originalIndex": 4, "entry": { "title": "The Camera Phone and Everyday Seeing", "meta": "Design History / PDF", "description": "A short history of how phone cameras changed image-making, sharing, and social presence.", "pdf": "" } }, "maps-movement-and-interface-trust": { "id": "maps-movement-and-interface-trust", "originalIndex": 5, "entry": { "title": "Maps, Movement, and Interface Trust", "meta": "Design History / PDF", "description": "An essay on navigation interfaces and how they reorganized confidence, place, and movement.", "pdf": "" } }, "the-checkout-button": { "id": "the-checkout-button", "originalIndex": 6, "entry": { "title": "The Checkout Button", "meta": "Design History / PDF", "description": "A focused history of commerce interfaces, friction, and the design of commitment.", "pdf": "" } }, "notifications-and-the-design-of-interruption": { "id": "notifications-and-the-design-of-interruption", "originalIndex": 7, "entry": { "title": "Notifications and the Design of Interruption", "meta": "Design History / PDF", "description": "A study of alert systems, attention, and the small interface patterns that shape behavior.", "pdf": "" } } } }, "designSystem": { "typography": { "type": { "display": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "300", "fontSize": "40px", "lineHeight": "1.08", "letterSpacing": "0", "colorToken": "base.black" }, "heading": { "h1": { "fontFamily": "Space Mono", "fontWeight": "300", "fontSize": "32px", "lineHeight": "1.1", "letterSpacing": "0", "colorToken": "base.black" }, "h1b": { "fontFamily": "Space Mono", "fontWeight": "300", "fontSize": "20px", "lineHeight": "1.35", "letterSpacing": "0", "colorToken": "base.black" }, "h2": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "300", "fontSize": "40px", "lineHeight": "1.05", "letterSpacing": "0", "colorToken": "base.black" }, "h3": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "700", "fontSize": "24px", "lineHeight": "1.05", "letterSpacing": "0", "colorToken": "base.black" } }, "body": { "lg": { "fontFamily": "Work Sans", "fontWeight": "500", "fontSize": "20px", "lineHeight": "1.4", "letterSpacing": "0", "colorToken": "base.black" }, "md": { "fontFamily": "Work Sans", "fontWeight": "400", "fontSize": "20px", "lineHeight": "1.45", "letterSpacing": "0", "colorToken": "base.black" }, "sm": { "fontFamily": "Work Sans", "fontWeight": "400", "fontSize": "18px", "lineHeight": "1.4", "letterSpacing": "0", "colorToken": "base.black" } }, "meta": { "label": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "16px", "lineHeight": "1.2", "letterSpacing": "-2px", "colorToken": "base.black" }, "value": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "14px", "lineHeight": "1.2", "letterSpacing": "0", "colorToken": "base.black" }, "tag": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "13px", "lineHeight": "1.2", "letterSpacing": "0", "colorToken": "base.black" } }, "tab": { "fontFamily": "Space Mono", "fontWeight": "500", "fontSize": "16px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.black" }, "caseStudy": { "title": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "500", "fontSize": "48px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.black" } }, "nav": { "fontFamily": "Space Mono", "fontWeight": "300", "fontSize": "22px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.black" }, "footer": { "heading": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "22px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.white" }, "social": { "fontFamily": "Space Mono", "fontWeight": "500", "fontSize": "22px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.white" }, "meta": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "16px", "lineHeight": "1.2", "letterSpacing": "0", "colorToken": "base.black" } }, "cta": { "fontFamily": "Space Mono", "fontWeight": "600", "fontSize": "16px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.black" }, "ui": { "control": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "14px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.black" } }, "home": { "label": { "fontFamily": "Space Grotesk", "fontWeight": "500", "fontSize": "16px", "lineHeight": "1.05", "letterSpacing": "0", "colorToken": "base.gray" }, "meta": { "fontFamily": "Space Grotesk", "fontWeight": "500", "fontSize": "16px", "lineHeight": "1.05", "letterSpacing": "0", "colorToken": "base.gray" }, "project": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "500", "fontSize": "48px", "lineHeight": "1.03", "letterSpacing": "-2px", "colorToken": "base.white" }, "projectMeta": { "fontFamily": "Space Mono", "fontWeight": "300", "fontSize": "14px", "lineHeight": "1.25", "letterSpacing": "-0.5px", "colorToken": "base.white" }, "about": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "400", "fontSize": "24px", "lineHeight": "-1", "letterSpacing": "0", "colorToken": "base.black" }, "mobileMenu": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "400", "fontSize": "32px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.black" } }, "breadcrumb": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "14px", "lineHeight": "1.2", "letterSpacing": "0", "colorToken": "base.black" } }, "heroHeading": { "fontFamily": "Space Mono", "fontWeight": "300", "fontSize": "32px", "lineHeight": "1.1", "letterSpacing": "0", "colorToken": "base.black" }, "sectionHeadings": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "300", "fontSize": "40px", "lineHeight": "1.05", "letterSpacing": "0", "colorToken": "base.black" }, "workTitles": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "300", "fontSize": "40px", "lineHeight": "1.08", "letterSpacing": "0", "colorToken": "base.black" }, "aiCodeTitles": { "fontFamily": "Space Grotesk", "fontWeight": "500", "fontSize": "64px", "lineHeight": "1.08", "letterSpacing": "0", "colorToken": "base.black" }, "aiCodeDesc": { "fontFamily": "Work Sans", "fontWeight": "500", "fontSize": "20px", "lineHeight": "1.4", "letterSpacing": "0", "colorToken": "base.black" }, "timelineRole": { "fontFamily": "Plus Jakarta Sans", "fontWeight": "700", "fontSize": "24px", "lineHeight": "1.05", "letterSpacing": "0", "colorToken": "base.black" }, "svaText": { "fontFamily": "Work Sans", "fontWeight": "500", "fontSize": "20px", "lineHeight": "1.4", "letterSpacing": "0", "colorToken": "base.black" }, "navLinks": { "fontFamily": "Space Mono", "fontWeight": "300", "fontSize": "22px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.black" }, "bodyText": { "fontFamily": "Work Sans", "fontWeight": "400", "fontSize": "20px", "lineHeight": "1.45", "letterSpacing": "0", "colorToken": "base.black" }, "footerSocial": { "fontFamily": "Space Mono", "fontWeight": "500", "fontSize": "22px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.white" }, "ctaButton": { "fontFamily": "Space Mono", "fontWeight": "600", "fontSize": "16px", "lineHeight": "1", "letterSpacing": "0", "colorToken": "base.black" }, "timelineMeta": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "16px", "lineHeight": "1.2", "letterSpacing": "-2px", "colorToken": "base.black" }, "annotations": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "13px", "lineHeight": "1.2", "letterSpacing": "0", "colorToken": "base.black" }, "footerCopy": { "fontFamily": "Space Mono", "fontWeight": "400", "fontSize": "16px", "lineHeight": "1.2", "letterSpacing": "0", "colorToken": "base.black" } }, "colors": { "base": { "black": "#000000", "white": "#ffffff", "gray": "#7b8188", "divider": "#e1e3e5" } }, "layout": { "grid": { "pageMax": "1920px", "columnsDesktop": "12", "pageMargin": "20px", "columnGutter": "72px", "columnGutterTight": "42px", "editorialGutter": "30px" }, "spacing": { "baseGap": "20px", "splitTop": "30px", "splitBottom": "70px", "editorialRow": "80px", "textDefault": "12px", "contentGroup": "24px", "componentGroup": "40px", "sectionDefault": "64px", "sectionSpacious": "96px", "cardInner": "24px", "cardStack": "16px", "titleBody": "12px", "bodyCta": "24px" }, "measure": { "body": "680px", "bodyWide": "860px", "caption": "520px" } } }, "routes": { "canonical": [ "/about", "/work", "/projects", "/inclusive-design", "/weave", "/rehand" ], "redirects": { "/": "/about", "/index": "/about", "/index.html": "/about", "/home": "/about", "/home.html": "/about", "/about.html": "/about", "/work.html": "/work", "/projects.html": "/projects", "/studio": "/projects", "/studio.html": "/projects", "/archive": "/projects", "/archive.html": "/projects", "/ai-code": "/projects", "/ai-code.html": "/projects", "/side-projects": "/projects", "/side-projects.html": "/projects", "/rer.html": "/work", "/inclusive-design.html": "/inclusive-design", "/weave.html": "/weave", "/rehand.html": "/rehand", "/anchor": "/projects", "/anchor.html": "/projects", "/anchor-v2": "/projects", "/anchor-v2.html": "/projects", "/weave-v2": "/weave", "/weave-v2.html": "/weave", "/design-history-essays": "/projects", "/design-history-essays.html": "/projects", "/rer-v2": "/work", "/rer-v2.html": "/work", "/rer": "/work" }, "temporaryRedirects": [ "/rer-v2", "/rer-v2.html", "/rer", "/rer.html" ], "previewFiles": { "/anchor": "/anchor.html", "/anchor-v2": "/anchor-v2.html", "/design-history-essays": "/design-history-essays.html", "/rer-v2": "/rer-v2.html", "/rer": "/rer.html" } }, "migration": { "sourceFormat": "content.json", "legacyQuarantine": { "projectRecords": [ { "legacyCollection": "archive", "originalIndex": 2, "reason": "blank-legacy-record", "data": { "title": "", "tag": "", "cursorMessage": "", "image": "", "imageAlt": "", "video": "", "previewImage": "", "previewPoster": "", "previewVideo": "", "url": "", "openInNewTab": false, "hidden": false } }, { "legacyCollection": "archive", "originalIndex": 3, "reason": "blank-legacy-record", "data": { "title": "", "tag": "", "cursorMessage": "", "image": "", "imageAlt": "", "video": "", "previewImage": "", "previewPoster": "", "previewVideo": "", "url": "", "openInNewTab": false, "hidden": false } } ] }, "preservedPrototypes": [ { "id": "rer-v2", "route": "/rer-v2", "files": [ "rer-v2.html", "rer-v2.js" ], "status": "unlinked" } ], "staticContentSources": [ "inclusive-design.html", "inclusive-design.js", "design-history-essays.html", "design-history-essays.js" ], "unknownRoot": {} }, "updatedAt": "2026-08-03T13:04:00.000Z" }