Brandi Kinard

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>Brandi Kinard</title>
	<link>https://brandikinard.com</link>
	<description>Brandi Kinard</description>
	<pubDate>Thu, 19 Mar 2026 00:04:27 +0000</pubDate>
	<generator>https://brandikinard.com</generator>
	<language>en</language>
	
		
	<item>
		<title>Living Draft</title>
				
		<link>https://brandikinard.com/Living-Draft</link>

		<pubDate>Wed, 18 Mar 2026 19:10:32 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/Living-Draft</guid>

		<description>
	
	&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/16cbf9f3472d325aafaeaf1cb8f5d8b3b0c591d921c6452b5bcc84fa20e6ec10/Charcuterie.gif" data-mid="246218548" border="0"  src="https://freight.cargo.site/w/1000/i/16cbf9f3472d325aafaeaf1cb8f5d8b3b0c591d921c6452b5bcc84fa20e6ec10/Charcuterie.gif" /&#62;
	

	Living Draft
Living Draft is an autonomous pipeline that generates production-ready websites from physical environments captured through smart glasses — no templates, no manual decisions. Capture, sketch your intent, publish. Built for the Figma Makeathon 2026. The design challenge was orchestrating a system where every stage compounds the uncertainty of the last — and still produces something coherent and intentional on the other end.
Role — Solo Designer &#38;amp; Developer · Figma Make · Claude by Anthropic · Autonomous AI Pipeline · Spatial Computing · Generative UI

	
      &#60;img src="https://drive.google.com/thumbnail?id=1Xl8ZeQWsnDW4YridGCgyqPqT5sAW_BCZ&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Inside the shop"&#62;
      Babe &#38;amp; Butcher — Charlotte, NC
    

      &#60;img src="https://drive.google.com/thumbnail?id=1Y75a8gtWA3oX9dvjshQnPHocBWLRC8Vr&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="The product"&#62;
      What the system saw
    

      &#60;img src="https://drive.google.com/thumbnail?id=15LA-PSq8IoqvQ73DGhcYy1xL6Lj7PnNK&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Capturing at the shop"&#62;
      Capturing on-site
    

      &#60;img src="https://drive.google.com/thumbnail?id=1xrraIAbOMdA1xCWrCzrnGeVXmwccFDHt&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Post-it at the shop"&#62;
      Notes from the field
    

      &#60;img src="https://drive.google.com/thumbnail?id=1TH4QAzNYDpRXLDEvMt_qe_kMjGT4CwyS&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Back at home"&#62;
      Back at home
    

      &#60;img src="https://drive.google.com/thumbnail?id=1IdmA3HLDO7KWFYv14x3y745ZaWV-6nDh&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Do not touch post-it"&#62;
      "Do not touch"
    

      &#60;img src="https://drive.google.com/thumbnail?id=1ZUmNXLWdWfDfuBv2GsoMrPaJxxeTe0Ly&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Not haunted post-it"&#62;
      "Not haunted"
    

      &#60;img src="https://drive.google.com/thumbnail?id=1jjK_R7UsLon8u4WCAi1uqQzOwxMzd00U&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Importing into Meta AI"&#62;
      Importing into Meta AI
    

      &#60;img src="https://drive.google.com/thumbnail?id=1rVukoU3VyBL4iOYa7Vk70yyNtkiIcxOH&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Selecting photos"&#62;
      Selecting photos
    

      &#60;img src="https://drive.google.com/thumbnail?id=1M8XjOE4XVm2F5eiolTivR5qcSGI6XlEB&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:contain; display:block;" alt="Figma Make processing"&#62;
      Figma Make — processing the prompt
    

      &#60;img src="https://drive.google.com/thumbnail?id=1UGATcessulPfW0MKG1sBu8uQwaEzk6At&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Push notification"&#62;
      Push notification — it's done
    

      &#60;img src="https://drive.google.com/thumbnail?id=1O85JvGbptYbq-5XYobKY7yTviQUWUwhJ&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:cover; display:block;" alt="Images loaded"&#62;
      Images loaded
    

      &#60;img src="https://drive.google.com/thumbnail?id=1qRShtGM46V9eDAv383pM7cm3mvKQ83lF&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:contain; display:block;" alt="Living Draft generated"&#62;
      The generated output
    

      &#60;img src="https://drive.google.com/thumbnail?id=1KxeSQZ91mmcF3hTG4Z7LJS6p8KvSQgx1&#38;amp;sz=w1200" style="width:100%; height:580px; object-fit:contain; display:block;" alt="Figma prototype"&#62;
      Refined in Figma
    

  ←
  →

  
  var idx = 0;
  var track = document.getElementById('carousel-track');
  var total = track.children.length;
  var dotContainer = document.getElementById('dots');
  for (var i = 0; i &#60; total; i++) {
    var d = document.createElement('div');
    d.style.cssText = 'width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.4);transition:background 0.2s;';
    dotContainer.appendChild(d);
  }
  function render() {
    track.style.transform = 'translateX(-' + (idx * 100) + '%)';
    var dots = dotContainer.children;
    for (var i = 0; i &#60; total; i++) {
      dots[i].style.background = i === idx ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.4)';
    }
  }
  function move(dir) { idx = (idx + dir + total) % total; render(); }
  render();


The Problem
Translating physical space into digital presence requires a chain of interpretive decisions — what matters, what to emphasize, how to express it visually. Today that chain requires a human at every link. Living Draft compresses them into a single step.The PipelineCapture → environmental analysis → content extraction → layout generation → live artifact. Each stage runs autonomously. The system doesn't ask for confirmation — it commits to interpretations and produces something you can publish.


&#60;img width="1507" height="1764" width_o="1507" height_o="1764" data-src="https://freight.cargo.site/t/original/i/b016587de15357ca2fbdb31580437b90d912c8d07c4ce5de867324fde40f028f/living_draft_architecture_diagram.png" data-mid="246218734" border="0" data-scale="74" src="https://freight.cargo.site/w/1000/i/b016587de15357ca2fbdb31580437b90d912c8d07c4ce5de867324fde40f028f/living_draft_architecture_diagram.png" /&#62;The Output
A live, navigable website generated entirely from a glasses capture. No templates selected. No copy written. No layout decisions made by hand.


  ↓ Live demo — scroll + click to explore


Why It MattersThis is a proof of concept for a broader design principle: the most powerful AI tools don't assist the creative process — they compress it. Living Draft demonstrates what happens when the entire loop from perception to artifact is automated, and what new design decisions emerge when your job is to orchestrate that loop rather than execute it.


— Artifacts —


    Want to build on this?
    Duplicate it to your Figma drafts and make it your own.
  
  
    Duplicate in Figma →
  

  BUILT WITH
  Ray-Ban Meta Smart Glasses · Claude by Anthropic · Figma Make · Playwright · fswatch · iCloud Drive · ntfy.sh


</description>
		
	</item>
		
		
	<item>
		<title>Gemini Live AI Agent</title>
				
		<link>https://brandikinard.com/Gemini-Live-AI-Agent</link>

		<pubDate>Thu, 19 Mar 2026 00:04:27 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/Gemini-Live-AI-Agent</guid>

		<description>
	
	&#60;img width="3000" height="1680" width_o="3000" height_o="1680" data-src="https://freight.cargo.site/t/original/i/f4cd7aed531db1240fed0d40c90a4f758d8843c9b9a026822335404523f44085/Ray-Ban-Meta-Wayfarer-streams-live-video-to-Clutch-via-Bluetooth.png" data-mid="246222620" border="0"  src="https://freight.cargo.site/w/1000/i/f4cd7aed531db1240fed0d40c90a4f758d8843c9b9a026822335404523f44085/Ray-Ban-Meta-Wayfarer-streams-live-video-to-Clutch-via-Bluetooth.png" /&#62;
	

	Clutch
Clutch is an AI how-to agent that sees real-world tasks through Ray-Ban Meta smart glasses or a phone camera and guides you step by step — in your language, with voice narration, AI-generated images, and contextual YouTube tutorials. Built on the Gemini Live API (bidirectional audio streaming), Google ADK, and Cloud Run, the core challenge wasn’t UI — it was designing for a probabilistic agent: silent tool failures, skipped steps, and leaky internal state. The UX was built to absorb uncertainty without exposing it to the user. Competed in the Gemini Live Agent Challenge (up to $80,000 prize pool).
Role — Solo Designer &#38;amp; Engineer · Gemini Live API · Google ADK · Cloud Run · SwiftUI · Python · Ray-Ban Meta Wayfarer · Bidirectional Audio Streaming · Agentic UI Design · iOS

	
	&#60;img width="1280" height="400" width_o="1280" height_o="400" data-src="https://freight.cargo.site/t/original/i/e3c5ab7c9b04a9b14d2dd76b1cd47877a42b67aa3e1c2084db10ef3dbfdf8a94/clutch-readme-banner.png" data-mid="246222738" border="0"  src="https://freight.cargo.site/w/1000/i/e3c5ab7c9b04a9b14d2dd76b1cd47877a42b67aa3e1c2084db10ef3dbfdf8a94/clutch-readme-banner.png" /&#62;

The Concept

A task assistant that lives at the edge of the physical world. You're under the hood of a car, your hands are dirty, and you need to know what to do next. Clutch is the only tool in your box that tells you.


&#60;img width="2998" height="1672" width_o="2998" height_o="1672" data-src="https://freight.cargo.site/t/original/i/df54720dc0171239b7cad09a8c5b298df11cdaa426aca8961720343237efb420/YouTube-tutorials-auto-matched-to-your-task-via-YouTube-Data-API-v3.png" data-mid="246222623" border="0"  src="https://freight.cargo.site/w/1000/i/df54720dc0171239b7cad09a8c5b298df11cdaa426aca8961720343237efb420/YouTube-tutorials-auto-matched-to-your-task-via-YouTube-Data-API-v3.png" /&#62;The Agent
Architecture
Three core tools: generate_steps (Gemini 2.5 Flash + parallel image generation), search_youtube (YouTube Data API v3), and advance_step (frontend wizard signal). All image generation is baked directly into generate_steps via asyncio.gather — running four images in parallel rather than relying on the agent to call a separate tool it would frequently skip.

&#60;img width="680" height="720" width_o="680" height_o="720" data-src="https://freight.cargo.site/t/original/i/ccc5c6c54c3d1c3afdaf32b8f9c8e5e51e0e8acbf503c1abc6363e7be4f563ad/clutch_architecture_diagram.png" data-mid="246222624" border="0"  src="https://freight.cargo.site/w/680/i/ccc5c6c54c3d1c3afdaf32b8f9c8e5e51e0e8acbf503c1abc6363e7be4f563ad/clutch_architecture_diagram.png" /&#62;


The Experience
Step-by-step wizard with AI-generated reference images for each stage. Voice-first navigation with manual tap fallback. Cross-lingual switching across five languages mid-session. Camera preview streaming from glasses or phone. A floating liquid glass toolbar on iOS. All surfaces designed as refractive panels against a Gemini gradient background — the visual language of a product positioned between Google and Apple.


	&#60;img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/119731008c30eb21a4233614734b8353528db8c084a8ead48eb3d59e4f121f3b/language-switch.gif" data-mid="246222661" border="0"  src="https://freight.cargo.site/w/1000/i/119731008c30eb21a4233614734b8353528db8c084a8ead48eb3d59e4f121f3b/language-switch.gif" /&#62;
	&#60;img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/9173b658a3a88f3d93ed5c2ce7d6a42439718cd45e85f96ba9c771e97a534b9b/YouTube.gif" data-mid="246222662" border="0"  src="https://freight.cargo.site/w/1000/i/9173b658a3a88f3d93ed5c2ce7d6a42439718cd45e85f96ba9c771e97a534b9b/YouTube.gif" /&#62;
	&#60;img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/ef70eba53ff2b3097c9760c8d6b2d6bfbcc3957a9658e5bc6ab22c2e7c158fb3/annotation.gif" data-mid="246222670" border="0"  src="https://freight.cargo.site/w/1000/i/ef70eba53ff2b3097c9760c8d6b2d6bfbcc3957a9658e5bc6ab22c2e7c158fb3/annotation.gif" /&#62;
	&#60;img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/c2fa7b12b6560143cb6068fc779cb29819e02fe0839c904b45fc6c7e153efe19/wizard-steps.gif" data-mid="246222711" border="0"  src="https://freight.cargo.site/w/1000/i/c2fa7b12b6560143cb6068fc779cb29819e02fe0839c904b45fc6c7e153efe19/wizard-steps.gif" /&#62;
	

	&#60;img width="2996" height="1676" width_o="2996" height_o="1676" data-src="https://freight.cargo.site/t/original/i/e1527e8d01721e0a4bface273261ed2ee1c7109eb83a01bb1a1883b90e431d90/AI-generated-steps-with-Imagen-4-reference-images-guide-you-hands-free.png" data-mid="246222734" border="0"  src="https://freight.cargo.site/w/1000/i/e1527e8d01721e0a4bface273261ed2ee1c7109eb83a01bb1a1883b90e431d90/AI-generated-steps-with-Imagen-4-reference-images-guide-you-hands-free.png" /&#62;

Designing for Probabilistic BehaviorThe agent doesn't always do what the prompt says. It sometimes reads its own tool output aloud. It sometimes advances steps before the user is ready. It sometimes asks "how's that going?" three times in a row. These aren't bugs — they're the nature of LLM agents under real latency and instruction-following constraints. The design solution was a manual wizard layer that stays correct regardless of agent behavior: the user always has ground truth on screen even when the voice experience drifts. Graceful degradation as a first-class design requirement.
    

Live
clutch-vyt2xlbryq-uc.a.run.app · github.com/Brandi-Kinard/clutch
	

</description>
		
	</item>
		
		
	<item>
		<title>Dev Center Redesign</title>
				
		<link>https://brandikinard.com/Dev-Center-Redesign</link>

		<pubDate>Thu, 25 May 2023 05:11:40 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/Dev-Center-Redesign</guid>

		<description>
	
	&#60;img width="3456" height="1748" width_o="3456" height_o="1748" data-src="https://freight.cargo.site/t/original/i/810ce2f5513a07a29c0566725865969799065764a667ce69c4ac4a08198a4b7c/image-4.png" data-mid="226148491" border="0"  src="https://freight.cargo.site/w/1000/i/810ce2f5513a07a29c0566725865969799065764a667ce69c4ac4a08198a4b7c/image-4.png" /&#62;
	

	Meta Horizon Developer Center UI/UX Redesign
Lost in the Metaverse: Rescuing Developers from Documentation Chaos
Building for the metaverse is a monumental task. In 2023, as Meta ramped up its efforts to build Horizon OS, the underlying platform for immersive VR/MR experiences, a critical bottleneck emerged: the developer experience. The Meta Horizon Developer Center (MHDC), the primary resource for developers building on the platform, was failing to keep pace. Instead of empowering creators, it was hindering them. This is the story of how we transformed the MHDC from a source of frustration into a catalyst for innovation, completed in a rapid 8-week sprint leading up to Meta Connect 2024.


	The ProblemLost in the Documentation Maze
Imagine you're a developer, eager to create the next groundbreaking VR/MR experience. You dive into the Meta Horizon Developer Center, looking for guidance on a specific SDK. Instead of clear instructions, you encounter:


	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/8d6e0fcf5a0d04cbebfcdaf92bc450ff1e484ffc92c2811dc917b88467569578/image-26.png" data-mid="226359922" border="0"  src="https://freight.cargo.site/w/200/i/8d6e0fcf5a0d04cbebfcdaf92bc450ff1e484ffc92c2811dc917b88467569578/image-26.png" /&#62;
	A Labyrinth of Links
Documentation was scattered across multiple sites and platforms (internal wikis). There was no clear hierarchy or navigation. Finding the right information felt like navigating a maze.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/fd1c28e3350a3fd48039db31a5ee8c196ec7497079d8143bcc8cabd67464ce82/image-1.png" data-mid="226359959" border="0"  src="https://freight.cargo.site/w/200/i/fd1c28e3350a3fd48039db31a5ee8c196ec7497079d8143bcc8cabd67464ce82/image-1.png" /&#62;
	Inconsistent Branding
The visual design and terminology varied wildly between different sections, creating a disjointed and unprofessional experience. It felt like exploring a patchwork quilt, not a cohesive platform.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/b540439a56887214b7603380137176ff9c17c6dd6ea6b529385e1303563e671d/image-2.png" data-mid="226359963" border="0"  src="https://freight.cargo.site/w/200/i/b540439a56887214b7603380137176ff9c17c6dd6ea6b529385e1303563e671d/image-2.png" /&#62;
	Broken Search
The search functionality was unreliable, often returning irrelevant results or no results at all. Developers were left to manually sift through pages of documentation.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/5a2bd83f94d996429140047a0b4b4c51b229c1f41ad63fab47b14c7042f163c0/image-4.png" data-mid="226359971" border="0"  src="https://freight.cargo.site/w/200/i/5a2bd83f94d996429140047a0b4b4c51b229c1f41ad63fab47b14c7042f163c0/image-4.png" /&#62;
	
Outdated Information
Some documentation was out-of-date, leading to confusion and wasted development time.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/ba5d7b620c82120d2442a84673d2fc3622daafb6e8d17c968dd71ec2a322e78e/image-5.png" data-mid="226359972" border="0"  src="https://freight.cargo.site/w/200/i/ba5d7b620c82120d2442a84673d2fc3622daafb6e8d17c968dd71ec2a322e78e/image-5.png" /&#62;
	Lack of Clear Learning Paths
New developers struggled to understand where to begin. There were no structured learning paths to guide them through the platform's capabilities.
	

	The MHDC was more than just a documentation problem; it was a strategic liability. This was actively costing Meta development time, and potentially, the ability to recruit and retain top VR/MR developer talent. A poor developer experience could stifle innovation and push developers towards competing platforms.


	My RoleArchitect, Builder, and Advocate
As a UX/UI Designer within the Horizon OS organization (specifically, the Developer Education and Lifecycle pillar, Developer Education and Workflow Tools pod), I took on the challenge of leading the MHDC redesign. This wasn't just a design project; it was a rescue mission. I acted as a:

	
	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/03fd98bd8ffd05733ab5682e60ea6f4410eb676d23f29b2a169ae91a750065cc/role.png" data-mid="226361204" border="0"  src="https://freight.cargo.site/w/200/i/03fd98bd8ffd05733ab5682e60ea6f4410eb676d23f29b2a169ae91a750065cc/role.png" /&#62;
	UX/UI Designer
I was responsible for the overall information architecture, user flows, visual design, and interaction design of the new MHDC.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/bbb9cdeafc826a43036bd553b8fed582a2b77e06ad976cdfefc9abc0692fb9e9/role-1.png" data-mid="226361206" border="0"  src="https://freight.cargo.site/w/200/i/bbb9cdeafc826a43036bd553b8fed582a2b77e06ad976cdfefc9abc0692fb9e9/role-1.png" /&#62;
	Project Manager
I facilitated collaboration between cross-functional teams (content designers, engineers, product managers) to ensure we stayed on track and met our deadlines.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/7848ca0ea289bdd889a84f9f3001015b5495214fd48ad8e49cf6ba9d4ee7b03d/role-2.png" data-mid="226361207" border="0"  src="https://freight.cargo.site/w/200/i/7848ca0ea289bdd889a84f9f3001015b5495214fd48ad8e49cf6ba9d4ee7b03d/role-2.png" /&#62;
	
Front-End Engineer
I contributed directly to the codebase, fixing bugs and optimizing performance. This hands-on approach allowed me to bridge the gap between design and implementation.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/53435c38c23f8ef422593e0abb1952a4aed6ca55b9fe59044212e5565d1616b0/role-3.png" data-mid="226361208" border="0"  src="https://freight.cargo.site/w/200/i/53435c38c23f8ef422593e0abb1952a4aed6ca55b9fe59044212e5565d1616b0/role-3.png" /&#62;
	Content Strategist (Partial)
I worked closely with content designers to ensure consistency in terminology, tone, and structure across all documentation.


	DiscoveryDeveloper Expectations in a New Reality
We knew the MHDC had problems, but anecdotal evidence wasn't enough. We needed to deeply understand the why behind the frustration. My initial hypothesis was that the rapid evolution of VR/MR technology, and Horizon OS itself, had outpaced the documentation, creating a widening gap between developer needs and the available resources. Developers' expectations for a smooth, intuitive development experience were increasing.


	Deeper InsightsUncovering the Pain Points


Before diving into design, we needed to understand the developers' pain points firsthand. A UX Researcher and I collaborated on the following research initiatives:


	&#60;img width="1223" height="843" width_o="1223" height_o="843" data-src="https://freight.cargo.site/t/original/i/33d5a29ea97e1f793d2f10ebaa105aa4255284af89c734b8ab0be249fd9e1563/Profile-banner---3.png" data-mid="226362631" border="0"  src="https://freight.cargo.site/w/1000/i/33d5a29ea97e1f793d2f10ebaa105aa4255284af89c734b8ab0be249fd9e1563/Profile-banner---3.png" /&#62;


	Usability Testing
I curated the test cases for the usability testing sessions, focusing on key user flows and potential pain points. We then observed 12 developers (a mix of experienced and novice Horizon OS developers) attempting to complete common tasks using the existing MHDC, such as finding API documentation, understanding setup procedures, and troubleshooting common errors.
	

	&#60;img width="1212" height="832" width_o="1212" height_o="832" data-src="https://freight.cargo.site/t/original/i/82188b755d4f7c4efdca53f6282fd075719012c79c692c48a6a9a217ca6d0424/Profile-banner---4.png" data-mid="226362658" border="0"  src="https://freight.cargo.site/w/1000/i/82188b755d4f7c4efdca53f6282fd075719012c79c692c48a6a9a217ca6d0424/Profile-banner---4.png" /&#62;
	Developer Surveys
The UX Researcher and I collaborated on the survey form design, including questions, prompts, and field types, to gather broader, quantitative feedback from 50 developers about their experiences with the MHDC. We asked about their frequency of use, their satisfaction levels, and their biggest pain points.
	

	&#60;img width="1223" height="843" width_o="1223" height_o="843" data-src="https://freight.cargo.site/t/original/i/9978b6f7863071ae866a7347c0dd547917ee83219aa7bd59bbd87b516d3e278a/Profile-banner---6.png" data-mid="226362659" border="0"  src="https://freight.cargo.site/w/1000/i/9978b6f7863071ae866a7347c0dd547917ee83219aa7bd59bbd87b516d3e278a/Profile-banner---6.png" /&#62;
	
Stakeholder Interviews
I led the one-on-one stakeholder interviews with product managers and engineers working on Horizon OS to understand their perspectives on the MHDC, their priorities, and any known technical limitations.
	

	&#60;img width="1212" height="832" width_o="1212" height_o="832" data-src="https://freight.cargo.site/t/original/i/dd997cec8fcf3013bf96966350d4f309625ae6c33ca3dea996daf223f4b401d3/Profile-banner---9.png" data-mid="226362660" border="0"  src="https://freight.cargo.site/w/1000/i/dd997cec8fcf3013bf96966350d4f309625ae6c33ca3dea996daf223f4b401d3/Profile-banner---9.png" /&#62;
	Competitive Analysis
In addition to the team's research, I conducted my own heuristic evaluations and competitive analysis of the developer portals of competing VR/MR platforms (e.g., Unity, Unreal Engine) to identify best practices and areas for differentiation.
	

	Key Findings (Synthesized Insights):
Insight 1: 
"I can't find anything!" 
The overwhelming feedback, echoing across all research methods, was that the existing MHDC was incredibly difficult to navigate. Developers spent a disproportionate amount of time searching for information, hindering their productivity.

Insight 2: 
"Is this even up-to-date?" 
Developers lacked confidence in the accuracy and currency of the documentation. This uncertainty led to wasted time debugging issues that stemmed from outdated information and a reluctance to trust the platform.

Insight 3: 
"I feel lost." 
New developers, in particular, felt overwhelmed by the sheer volume of disorganized information and the lack of clear guidance on where to start. The onboarding experience was practically non-existent.

Insight 4:
 "The search is useless." The search functionality was consistently cited as a major point of failure. Developers reported receiving irrelevant results, too many results, or no results at all.

Insight 5: 
"It feels fragmented." 
The inconsistent branding, terminology, and visual styles across different sections created a jarring and unprofessional experience, undermining developers' confidence in the platform.


	Design PrinciplesGuiding the Transformation
Based on our research and the strategic goals of Horizon OS, we established four core design principles:


	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	
Discoverability
Every piece of information should be easily findable, within a maximum of three clicks. This was paramount.
	

	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	Clarity
Documentation should be concise, jargon-free, and easy to understand, regardless of a developer's experience level. We needed to speak the developers' language.
	

	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	Consistency
The MHDC should have a unified visual design and consistent terminology, reflecting the Meta Horizon brand and fostering a sense of trust.
	

	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	Guidance
The platform should provide clear learning paths for new developers, guiding them from basic concepts to advanced techniques, and offer contextual help throughout.


	Design ProcessBuilding the Solution – A Rapid, Iterative Approach
Our 8-week timeline was incredibly aggressive, demanding a highly iterative and collaborative approach, mirroring the agile development methodology.

	
	WEEK 
1-2
	Information Architecture Overhaul
My cross-functional team and I completely restructured the MHDC's information architecture. We moved away from a platform-centric organization (e.g., "Unity," "Unreal Engine") to a task-based organization (e.g., "Why Meta Quest" (Getting Started), "Design," "Develop," "API Reference," "Distribute"). We used card sorting with developers to validate our proposed structure and ensure it aligned with their mental models (Figure 1).

&#60;img width="4096" height="1714" width_o="4096" height_o="1714" data-src="https://freight.cargo.site/t/original/i/7656fb5ff56b819c174753fab8f436372436b6c7ce7323c703111d2726b8302b/Frame-5.png" data-mid="226366232" border="0"  src="https://freight.cargo.site/w/1000/i/7656fb5ff56b819c174753fab8f436372436b6c7ce7323c703111d2726b8302b/Frame-5.png" /&#62;
(Figure 1 -&#38;nbsp;Card sorting exercise to validate the proposed task-based information architecture)To visualize the new structure, I created a comprehensive information architecture map (Figure 2):
&#60;img width="3997" height="2583" width_o="3997" height_o="2583" data-src="https://freight.cargo.site/t/original/i/79258492dd3ef974f237e8881a39481a30aa1a9f6c34b20ce803ac904b506ae4/Frame-14001532.png" data-mid="226366299" border="0"  src="https://freight.cargo.site/w/1000/i/79258492dd3ef974f237e8881a39481a30aa1a9f6c34b20ce803ac904b506ae4/Frame-14001532.png" /&#62;
(Figure 2 -&#38;nbsp;Information architecture map illustrating the new, task-oriented organization of the MHDC)This map illustrates the new, task-oriented organization of the MHDC. Key areas, such as "Why Meta Quest," "Design (i.e. HIG)," "API Reference," and "Distribute", are clearly defined, providing a logical flow for developers to find the information they need. The map also reveals the depth and breadth of the content, highlighting the significant effort involved in reorganizing and restructuring the entire platform. Notice the clear distinction between high-level categories (like "Design Landing Page" and "Development Landing Page") and the more granular sub-sections, designed for efficient navigation.


	WEEK 
3-4
	Wireframing and Prototyping
From initial ink sketches on paper to digital refinements in Procreate, I explored a range of design concepts (Figure 1). This iterative sketching process directly fed into my work on low-fidelity wireframes and interactive prototypes in Figma and Framer, where I rapidly iterated on navigation, layout, and interaction. Partnering with the UX Researcher, we conducted quick, iterative usability tests with internal developers and stakeholders—essentially, dogfooding our designs. I also regularly presented design iterations in critiques with product designers from other Horizon OS teams at Meta Reality Labs, incorporating feedback and adjusting designs on the fly.
&#60;img width="1075" height="798" width_o="1075" height_o="798" data-src="https://freight.cargo.site/t/original/i/473621f340a682b445c6dc8b1b3d0ccb3dd17371513504d17a1bd0a7d8b02862/klnbk.png" data-mid="226366317" border="0"  src="https://freight.cargo.site/w/1000/i/473621f340a682b445c6dc8b1b3d0ccb3dd17371513504d17a1bd0a7d8b02862/klnbk.png" /&#62;
(Figure 1 -&#38;nbsp;Early wireframe exploration, focusing on navigation and content layout)


	WEEK 
5-6
	Visual Design and Branding
I developed a new visual design language for the MHDC, aligning it with the Meta Horizon brand guidelines. I prioritized a clean, modern aesthetic that was both visually appealing and functional. I focused on readability, accessibility, and creating a sense of trust and professionalism.Early explorations also considered how the MHDC fit within the broader Meta for Developers ecosystem. I experimented with layouts that showcased different categories of developer tools and resources, as seen in this early concept for a "Social Technologies" landing page (Figure 1):

&#60;img width="1542" height="1342" width_o="1542" height_o="1342" data-src="https://freight.cargo.site/t/original/i/d3358bff9d10170ab7e1b9c20fcd964aa49793932d1e7494210b47714db8c544/rg.png" data-mid="226366449" border="0"  src="https://freight.cargo.site/w/1000/i/d3358bff9d10170ab7e1b9c20fcd964aa49793932d1e7494210b47714db8c544/rg.png" /&#62;
(Figure 1 - Early design exploration for a 'Social Technologies' landing page, informing visual hierarchy decisions)
This exploration, while focusing on a broader section of the developer portal, helped solidify my approach to visual hierarchy, card design, and using imagery effectively. However, for the MHDC, the guiding principles of Discoverability and Clarity demanded a more streamlined, information-dense design. Figure 2 demonstrates this shift, contrasting the previous, overly simplified API references page with the new, information-rich, yet balanced Unity documentation API references page. The new design prioritizes quick access to key information without sacrificing visual appeal.

&#60;img width="4107" height="1342" width_o="4107" height_o="1342" data-src="https://freight.cargo.site/t/original/i/428a3a37f7c4f63fc59ae613bb0aa91512616c69cf15f2250e90f2b7e6a50638/frame-old-new.png" data-mid="226366374" border="0"  src="https://freight.cargo.site/w/1000/i/428a3a37f7c4f63fc59ae613bb0aa91512616c69cf15f2250e90f2b7e6a50638/frame-old-new.png" /&#62;(Figure 2 - Before and after: Redesign of the Unity documentation API references page, prioritizing discoverability and clarity)
To ensure consistency and scalability, I also developed a comprehensive component library within Figma (Figure 3). This library included reusable UI elements, such as buttons, cards, navigation components, and form elements, each designed to adhere to the Meta Horizon brand guidelines and to be responsive across different screen sizes.
&#60;img width="3104" height="1974" width_o="3104" height_o="1974" data-src="https://freight.cargo.site/t/original/i/7b9026e6d84c9dfd19cc691f8078cc9e29ac146392df50bbf7c9b038bf046032/image-15.png" data-mid="226154105" border="0"  src="https://freight.cargo.site/w/1000/i/7b9026e6d84c9dfd19cc691f8078cc9e29ac146392df50bbf7c9b038bf046032/image-15.png" /&#62;(Figure 3 - The MHDC component library in Figma, ensuring consistency and scalability)
This component-based approach ensured a consistent visual language across the MHDC. For example, the card component below (Figure 4) is used for Download cards, maintaining its anatomy, states, affordances, and behavior, while incorporating download-specific elements. This approach considered both desktop and mobile web, as seen in the transition from desktop sidesheet to mobile bottom sheet below (Figure 5). Ultimately, it streamlined design and development.
&#60;img width="4574" height="1342" width_o="4574" height_o="1342" data-src="https://freight.cargo.site/t/original/i/778cc8f899d56f5040d926c9b4943eaa30132da7bcd6149337532bd748942d5f/wegwrg.png" data-mid="226366387" border="0"  src="https://freight.cargo.site/w/1000/i/778cc8f899d56f5040d926c9b4943eaa30132da7bcd6149337532bd748942d5f/wegwrg.png" /&#62;
(Figure 4 - Card component variations, demonstrating different states)

&#60;img width="3041" height="1342" width_o="3041" height_o="1342" data-src="https://freight.cargo.site/t/original/i/841519e64679204f4fe199d611c5403eccddce71a4f72fce963dea6decb118ec/afgwe.png" data-mid="226366386" border="0"  src="https://freight.cargo.site/w/1000/i/841519e64679204f4fe199d611c5403eccddce71a4f72fce963dea6decb118ec/afgwe.png" /&#62;(Figure 5 - Responsive design of the sheet component, adapting to desktop and mobile viewports)
&#38;nbsp;


	&#38;nbsp;


	I played a direct role in several key features that significantly improved the developer experience:


	Page Feedback Widget
	
	
	A Beacon of Continuous Improvement
	
We knew that the journey didn't end with the launch. To ensure continuous improvement and keep our fingers on the pulse of the developer community, I designed and implemented a page feedback widget. This allowed developers to share their thoughts and suggestions directly within the MHDC, creating a direct line of communication between developers and the MHDC team.
 This seemingly simple feature had a profound impact. It fostered a sense of community and collaboration, allowing us to continuously iterate and improve the platform based on real-time feedback from the people who mattered most: the developers.
	

	Problem
We needed a way to gather real-time feedback from developers on the quality and usefulness of the documentation.


Solution
I designed and implemented a page feedback widget that allowed developers to easily rate the helpfulness of a page (thumbs up/down) and provide optional text feedback. This created a direct line of communication between developers and the MHDC team.


Process
I explored multiple design iterations, considering different visual styles, interaction patterns, and levels of detail. I collaborated with engineers to ensure feasibility and integration with the existing codebase.


	Early explorations of the widget focused on finding a clear and unobtrusive way to integrate the feedback mechanism into the page layout, while also exploring various visual styles and interaction patterns. These images show a couple such explorations:
	&#60;img width="581" height="640" width_o="581" height_o="640" data-src="https://freight.cargo.site/t/original/i/48b99eed8cc87e3b674dbd973fdf17e73e8f5d3bd14f4edba0bd065c3bab4fb8/Bold.png" data-mid="226378942" border="0"  src="https://freight.cargo.site/w/581/i/48b99eed8cc87e3b674dbd973fdf17e73e8f5d3bd14f4edba0bd065c3bab4fb8/Bold.png" /&#62;
(Figure 1 - Initial sketch and design for the page feedback widget, exploring various placements and interaction concepts) 
&#60;img width="1196" height="816" width_o="1196" height_o="816" data-src="https://freight.cargo.site/t/original/i/a95c77a629a959ad2fcf72c9e9e8283ede09202d3db9729f35b3b60797df9303/feedba.png" data-mid="226389399" border="0"  src="https://freight.cargo.site/w/1000/i/a95c77a629a959ad2fcf72c9e9e8283ede09202d3db9729f35b3b60797df9303/feedba.png" /&#62;
(Figure 2 - Early design exploring the integration of the feedback widget within the page layout)
&#38;nbsp;


Design Iterations and Rationale
The design evolved through several iterations, each refining the user experience and visual integration.&#38;nbsp;


 (Version 1)&#38;nbsp;This iteration aligned closely with the MHDC's new branding. The colors and fonts were consistent with other elements in the right rail (such as uppercase section headers), and the thumbs-up/down icons were proportionally sized to the text. A key addition was a dropdown menu appearing after a thumbs-down selection, allowing users to specify the reason for their negative feedback (e.g., "Content not clear," "Outdated information"). This provided more actionable feedback.


	&#60;img width="600" height="661" width_o="600" height_o="661" data-src="https://freight.cargo.site/t/original/i/d89895e86f96924191ba16d95c0c268e4a07b5f1b3c5aa3eb7b90771b563ca34/version1.gif" data-mid="226378465" border="0"  src="https://freight.cargo.site/w/600/i/d89895e86f96924191ba16d95c0c268e4a07b5f1b3c5aa3eb7b90771b563ca34/version1.gif" /&#62;(Figure 3 - Version 1 page feedback widget)


(Version 2) Similar to Version 1, this iteration replaced the dropdown menu with a free-form text field, providing users with more flexibility in their feedback. I considered making this field optional to reduce friction.

	&#60;img width="600" height="661" width_o="600" height_o="661" data-src="https://freight.cargo.site/t/original/i/54f096264d018a4e0af891056d207511538feea358b3913bb1da0daf41ea700f/version2.gif" data-mid="226378464" border="0"  src="https://freight.cargo.site/w/600/i/54f096264d018a4e0af891056d207511538feea358b3913bb1da0daf41ea700f/version2.gif" /&#62;(Figure 4 - Version 2 page feedback widget)


	 (Version 3)&#38;nbsp;This version took a step back towards the legacy feedback feature's design and user experience, primarily to assess user familiarity and preference. However, I updated the thumbs-up/down icon sizes and adjusted the prompt's font size for better visual balance. I also aligned the colors with the right rail's secondary text and icon colors for greater visual consistency.


	&#60;img width="600" height="661" width_o="600" height_o="661" data-src="https://freight.cargo.site/t/original/i/30959f9cc10dceb6552556c69b6a0543a9b2385ca84d979d73b25dad8a7299dc/version3.gif" data-mid="226378463" border="0"  src="https://freight.cargo.site/w/600/i/30959f9cc10dceb6552556c69b6a0543a9b2385ca84d979d73b25dad8a7299dc/version3.gif" /&#62;(Figure 5 - Version 3 page feedback widget)


	 (Version 4) Building upon Version 2, this iteration added a checkbox labeled "Notify me when this page is updated." This feature aimed to close the feedback loop, demonstrating to users that their input directly contributed to improvements and fostering a stronger relationship.


	&#60;img width="600" height="661" width_o="600" height_o="661" data-src="https://freight.cargo.site/t/original/i/8977d1d7db93bf92512e98c610e0fe4de1c7cf71256d45deb10c17090ae6d91a/version4.gif" data-mid="226378462" border="0"  src="https://freight.cargo.site/w/600/i/8977d1d7db93bf92512e98c610e0fe4de1c7cf71256d45deb10c17090ae6d91a/version4.gif" /&#62;(Figure 6 - Version 4 page feedback widget)


	These iterations were presented to the team, and I gathered internal feedback to evaluate the trade-offs of each approach. Considerations included visual consistency, ease of use, the level of detail in the feedback collected, and the potential for future development (e.g., integrating the feedback directly into a task management system).These iterations were presented to the team, gathering feedback on trade-offs involving visual consistency, ease of use, feedback detail, and future development potential (like task management integration).

Phased Rollout Strategy
MVP (Connect 2024) -&#38;gt; Version 3 was chosen for launch, balancing familiarity, visual consistency, and minimal development effort for the deadline (Figure 7).
&#60;img width="2338" height="1280" width_o="2338" height_o="1280" data-src="https://freight.cargo.site/t/original/i/e2bae35852e33667b313c831c78e125b78fb5f52ecc7cb78d27141728342bbae/image-19.png" data-mid="226379392" border="0"  src="https://freight.cargo.site/w/1000/i/e2bae35852e33667b313c831c78e125b78fb5f52ecc7cb78d27141728342bbae/image-19.png" /&#62;
(Figure 7 -&#38;nbsp;Final design of the page feedback widget (Version 3) chosen for the MVP launch)
Fast Follow -&#38;gt; Post-launch, we planned to transition to Version 2, integrating feedback directly into our internal task management system.

Future Iteration -&#38;gt; Version 4, with a "Notify me" option, was the long-term goal, closing the feedback loop and enabling direct user communication.
&#60;img width="1526" height="783" width_o="1526" height_o="783" data-src="https://freight.cargo.site/t/original/i/2e9a56f337c181c5609cdc2ec9199fbe30155e86541aa879e4d11e4e11f8adce/v2and4.png" data-mid="226379461" border="0"  src="https://freight.cargo.site/w/1000/i/2e9a56f337c181c5609cdc2ec9199fbe30155e86541aa879e4d11e4e11f8adce/v2and4.png" /&#62;

Functional Prototype for Faster Buy-in
Beyond Figma mockups (Figure 8-9), I built a fully interactive prototype using HTML, CSS, and JavaScript (React/JSX). This accurately replicated the widget's live appearance and behavior, accelerating stakeholder buy-in and providing the engineering team with ready-to-use code and SVG assets, significantly reducing development time (Figure 10).
&#60;img width="2342" height="938" width_o="2342" height_o="938" data-src="https://freight.cargo.site/t/original/i/e3b6dfdfce58598aa6fde4bd350d09fc126a3076219490c54746ac71dfecd45b/image-21.png" data-mid="226379484" border="0"  src="https://freight.cargo.site/w/1000/i/e3b6dfdfce58598aa6fde4bd350d09fc126a3076219490c54746ac71dfecd45b/image-21.png" /&#62;
(Figure 8 - Feedback widget precise spacing for optimal usability and visual balance)

&#60;img width="2342" height="1354" width_o="2342" height_o="1354" data-src="https://freight.cargo.site/t/original/i/de010df1b0f007db314d883e52e0118dfedc0238940c8e921889200b16b6019e/image-22.png" data-mid="226379485" border="0"  src="https://freight.cargo.site/w/1000/i/de010df1b0f007db314d883e52e0118dfedc0238940c8e921889200b16b6019e/image-22.png" /&#62;
(Figure 9 - Placement and spacing of the page feedback widget within the right rail, adhering to the overall page layout)
&#60;img width="1171" height="836" width_o="1171" height_o="836" data-src="https://freight.cargo.site/t/original/i/eb622dc03f7899f4cbd207e1a6ed5682bdfbaeb12997d1329ee7e0ec3f2afe6d/Isolated.png" data-mid="226379476" border="0"  src="https://freight.cargo.site/w/1000/i/eb622dc03f7899f4cbd207e1a6ed5682bdfbaeb12997d1329ee7e0ec3f2afe6d/Isolated.png" /&#62;
(Figure 10 - JavaScript code snippet for the page feedback widget, handling user interaction and data submission)

Try the Prototype
Impact

The feedback widget became a vital source of continuous improvement, allowing us to quickly identify and address issues with the documentation.


	Enhanced Login Feature
	
	
	A Welcoming Gateway
	
The initial login experience for the MHDC was a critical touchpoint, serving as the first impression for developers. I wanted this initial interaction to be welcoming, intuitive, and aligned with the overall Meta brand experience. 


	Problem
The existing login  process inherited from the old site was clunky and uninviting. It presented a small, contextual menu that lacked visual appeal and didn't effectively communicate the value proposition of the MHDC to potential users. It felt disconnected from the rest of the platform and didn't align with the design patterns used by other Meta web applications (Figure 1-2).


Solution
I redesigned the login and account management experience with a developer-centric approach, focusing on clarity, efficiency, and brand consistency. This involved two key components:
 Pre-Authentication (Login)
A redesigned login flow utilizing a sidesheet that slides in from the right, providing ample space to highlight key platform benefits and create a more welcoming initial interaction.

Post-Authentication (Account Management)
A full-width dropdown menu, triggered by clicking the user's avatar, providing clear access to account settings and a prominent "Log Out" option. This dropdown also included standard navigation links, ensuring consistent access to key areas of the MHDC regardless of login state.

&#60;img width="600" height="319" width_o="600" height_o="319" data-src="https://freight.cargo.site/t/original/i/011a153e4e6c8f5df71e5672d8d0cd3ee74a9d4e1fd1463d12f9a62552cbfbbb/old_login.gif" data-mid="226379993" border="0"  src="https://freight.cargo.site/w/600/i/011a153e4e6c8f5df71e5672d8d0cd3ee74a9d4e1fd1463d12f9a62552cbfbbb/old_login.gif" /&#62;(Figure 1 - Previous login experience using a contextual menu)


&#60;img width="600" height="319" width_o="600" height_o="319" data-src="https://freight.cargo.site/t/original/i/68cb79a03bd5d67781f69da6a99b97eda5e4d2bd01235ad2827022a39ced85af/old_authenticated.gif" data-mid="226379999" border="0"  src="https://freight.cargo.site/w/600/i/68cb79a03bd5d67781f69da6a99b97eda5e4d2bd01235ad2827022a39ced85af/old_authenticated.gif" /&#62;(Figure 2 - Previous account management experience, using a contextual menu)
Process
My design process involved close collaboration with the Meta brand identity team to ensure full compliance with Meta's authentication standards and security protocols. I also conducted a competitive analysis of login (Figure 3) and account management (Figure 4) patterns across other Meta web properties, including Meta Store, to identify best practices and ensure a cohesive user experience. This research informed my decision to move away from the existing contextual menus.


&#60;img width="600" height="319" width_o="600" height_o="319" data-src="https://freight.cargo.site/t/original/i/313b5a3596679ee264468907946ba070b5f7ad38eaf78a0ba350128a759c9176/inspo_login.gif" data-mid="226380015" border="0"  src="https://freight.cargo.site/w/600/i/313b5a3596679ee264468907946ba070b5f7ad38eaf78a0ba350128a759c9176/inspo_login.gif" /&#62;(Figure 3 - Meta Store's login pattern, using a side sheet (competitive analysis of login patterns from various resources))&#38;nbsp;
&#60;img width="600" height="319" width_o="600" height_o="319" data-src="https://freight.cargo.site/t/original/i/d318dc0982c23bbd2c9277dd3d0a2aae2bf29d97c2df2db394dbcfa191d3462b/inspo_authenticated.gif" data-mid="226380016" border="0"  src="https://freight.cargo.site/w/600/i/d318dc0982c23bbd2c9277dd3d0a2aae2bf29d97c2df2db394dbcfa191d3462b/inspo_authenticated.gif" /&#62;
(Figure 4 - Meta Store's account management pattern, using a top-nav dropdown (competitive analysis of post-login account management patterns))
&#38;nbsp;

	
	&#38;nbsp;&#38;nbsp;
	&#38;nbsp;
	Design Iterations and RationaleThe design evolved through several key iterations, driven by internal reviews:
&#38;nbsp;

	&#38;nbsp;

	
	 Shift to Sidesheet (Pre-Login)
 Recognizing the limitations of the contextual menu for pre-authentication, I proposed a sidesheet approach (Figure 5). This provided more space for a visually engaging login experience, allowing for the potential inclusion of key value propositions, an idea I briefly explored with Content Designers (Figure 6). This sidesheet design also aligned with the design pattern used by Meta Store, promoting consistency across Meta's web properties. Ultimately, we prioritized a streamlined login for the MVP, focusing on the core functionality.


	&#60;img width="3382" height="2296" width_o="3382" height_o="2296" data-src="https://freight.cargo.site/t/original/i/6db2dd6c1bbcfd33a00447edbabce600c396c532d8680580d3ea08263d50edb4/image-25.png" data-mid="226380047" border="0"  src="https://freight.cargo.site/w/1000/i/6db2dd6c1bbcfd33a00447edbabce600c396c532d8680580d3ea08263d50edb4/image-25.png" /&#62;(Figure 5 - Comparison of login patterns: Meta Store (front) and the previous MHDC (back))
&#38;nbsp;
&#60;img width="2880" height="1954" width_o="2880" height_o="1954" data-src="https://freight.cargo.site/t/original/i/65b86c8af8728a6a8b28d60d6f6fbbdb4fb91dc0d1b219e25f491528117c78a0/image-26.png" data-mid="226380101" border="0"  src="https://freight.cargo.site/w/1000/i/65b86c8af8728a6a8b28d60d6f6fbbdb4fb91dc0d1b219e25f491528117c78a0/image-26.png" /&#62;(Figure 6 - Early design exploration for the login redesign, with annotations and feedback (proposed login sidesheet design, offering space for value proposition messaging (later deferred for MVP))


	Full-Width Dropdown (Post-Login)

For post-authentication, I initially explored expanding the contextual menu. However, to maintain consistency with the broader Meta ecosystem ​(specifically, the Meta Store implementation) and provide a more scalable solution, I transitioned to a full-width dropdown menu&#38;nbsp;(Figure 7-8) activated by the user's avatar. This provided clear, consistent access to account management options and other key navigation links.

	&#60;img width="3420" height="2296" width_o="3420" height_o="2296" data-src="https://freight.cargo.site/t/original/i/642053a296341c70e304a7fba64db2773119a314813258fa2f3be11652f51be7/image-24.png" data-mid="226380094" border="0"  src="https://freight.cargo.site/w/1000/i/642053a296341c70e304a7fba64db2773119a314813258fa2f3be11652f51be7/image-24.png" /&#62;
(Figure 7 - Comparison of account management patterns: Meta Store (front) and the previous MHDC (back))

&#60;img width="2880" height="1954" width_o="2880" height_o="1954" data-src="https://freight.cargo.site/t/original/i/b9248ebf8e284cb8e3097410f8df91464debf13c80f8cc53e0dfc72ce7b8a0aa/image-27.png" data-mid="226380123" border="0"  src="https://freight.cargo.site/w/1000/i/b9248ebf8e284cb8e3097410f8df91464debf13c80f8cc53e0dfc72ce7b8a0aa/image-27.png" /&#62;
(Figure 8 - Design exploration for the account management redesign, including annotations (proposed full-width dropdown design for account management, promoting consistency with Meta's design system))


	MVP and Future Iterations
 
Due to time constraints and the need to prioritize core functionality for the Meta Connect 2024 launch, we decided to initially omit the value proposition messaging within the login sidesheet. This messaging was planned for a future iteration. The core login functionality (Figure 9) and account management dropdown (Figure 10) were prioritized for the MVP.


	&#60;img width="2342" height="2110" width_o="2342" height_o="2110" data-src="https://freight.cargo.site/t/original/i/8db28dc470b585ba8dd918369f3efa4c0da6b64aff206e091113164ed2a25733/image-29.png" data-mid="226380134" border="0"  src="https://freight.cargo.site/w/1000/i/8db28dc470b585ba8dd918369f3efa4c0da6b64aff206e091113164ed2a25733/image-29.png" /&#62;(Figure 9 - Final MVP design for the login experience, focusing on core functionality)
&#60;img width="2342" height="1034" width_o="2342" height_o="1034" data-src="https://freight.cargo.site/t/original/i/4ffb0f8ad5cffcf78affcdfdcc23c2f69699511cb2b51eccb0dacbbd385b95aa/image-28.png" data-mid="226380144" border="0"  src="https://freight.cargo.site/w/1000/i/4ffb0f8ad5cffcf78affcdfdcc23c2f69699511cb2b51eccb0dacbbd385b95aa/image-28.png" /&#62;
(Figure 10 - Final MVP design of the account management dropdown, providing clear access to key options)


I also created prototypes to demonstrate these interactive states (Figure 11-12).


&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/c96632fe77bf9856b57034f6d9f6f41ce059ec524d8cba68e3d1d949caf12d84/It-is-a-new-day.gif" data-mid="226380027" border="0"  src="https://freight.cargo.site/w/1000/i/c96632fe77bf9856b57034f6d9f6f41ce059ec524d8cba68e3d1d949caf12d84/It-is-a-new-day.gif" /&#62;(Figure 11 - Interactive prototype demonstrating the login sidesheet animation)
&#60;img width="600" height="406" width_o="600" height_o="406" data-src="https://freight.cargo.site/t/original/i/b1acc454521034161f0e8ca141aad6a00456a37a848df5d59a38361d76e941aa/new_authenticated.gif" data-mid="226380038" border="0"  src="https://freight.cargo.site/w/600/i/b1acc454521034161f0e8ca141aad6a00456a37a848df5d59a38361d76e941aa/new_authenticated.gif" /&#62;(Figure 12 - Interactive prototype demonstrating the full-width account management dropdown)


Impact

The redesigned login and account management experience created a significantly more welcoming and intuitive entry point to the MHDC. By aligning with established Meta design patterns, I improved usability and fostered a sense of familiarity for developers already using other Meta products. The phased approach allowed me to deliver a functional and visually appealing solution for the launch, while laying the groundwork for future enhancements.

	
	Platform Selection Design
	
	
	Guiding Developers to the Right Path
	
A seemingly small, but critical, aspect of the MHDC redesign was ensuring that developers could easily find content relevant to their chosen development platform (e.g., Unity, Unreal Engine, Native). An intuitive and unbiased platform selection experience was crucial for both new and existing users.


	Problem
The initial engineering proposal involved a gating side navigation bar that defaulted to Unity for all logged-out users accessing the `/develop` and `/documentation` sections. This approach presented several significant problems:Platform bias.
It implicitly favored Unity developers, potentially alienating or confusing developers using other platforms.

Information overload.For new users unfamiliar with the different platform options, the side navigation, combined with the default Unity content, could be overwhelming and create a poor first impression.Unnecessary friction.It forced users who weren't interested in Unity to navigate away from the default, adding unnecessary steps to their workflow.&#60;img width="1810" height="915" width_o="1810" height_o="915" data-src="https://freight.cargo.site/t/original/i/deb1131c70ef6df7ffdcfcc66e38e2841514e4ca60eae6b7260839b903d7300c/image-30.png" data-mid="226380840" border="0"  src="https://freight.cargo.site/w/1000/i/deb1131c70ef6df7ffdcfcc66e38e2841514e4ca60eae6b7260839b903d7300c/image-30.png" /&#62;
(Figure 1 - Initial engineering proposal with a default Unity side navigation, creating platform bias)

Solution
To address these issues, I proposed and rapidly prototyped a "progressive reveal" approach:
 Logged-in users with preferences.
Users who had previously set a platform preference would be taken directly to their platform-specific content, streamlining their experience.&#38;nbsp;

New or logged-out users.Users without a saved preference would encounter a clean, introductory landing page that clearly presented the available platform options (Unity, Unreal Engine, Native, etc.), allowing them to make an informed choice.Removed side navigation.For new or logged-out user, I removed the side navigation to have them focus on the platform options.


Process
Recognizing the potential impact of this design decision, I moved quickly to develop a working prototype within an hour. This rapid prototyping approach allowed me to visualize the solution and communicate its benefits to the team effectively. I then collaborated closely with engineers and the technical documentation manager to gather feedback and iterate on the design.


	Design Iterations and RationaleThe platform selection design evolved through several key iterations:
&#38;nbsp;

	
	 Initial Prototype (Side Navigation Removal) My first prototype focused on removing the gating side navigation for users without a platform preference, immediately addressing the information overload and platform bias issues (Figure 2).&#38;nbsp;Landing Page DesignI designed a clean and intuitive landing page for new/logged-out users, clearly presenting the platform options with brief descriptions and relevant icons (Figure 3).
Platform Preference Management (Logged-in Users)
 Based on feedback from the engineering team, I designed a mechanism for logged-in users to easily change their platform preference. This involved a simple, intuitive interface within the user's account settings. I explored a "Back" vs "Clear Filter" for the user.
	

	&#60;img width="1379" height="928" width_o="1379" height_o="928" data-src="https://freight.cargo.site/t/original/i/bb44be7db5d146955b3a5fab8f42b1e9786fe537defd1a794439e9202fb4f28f/image-34.png" data-mid="226381387" border="0"  src="https://freight.cargo.site/w/1000/i/bb44be7db5d146955b3a5fab8f42b1e9786fe537defd1a794439e9202fb4f28f/image-34.png" /&#62;(Figure 2 - Initial mockup focusing on removing the side navigation to create a cleaner user flow)
 

&#38;nbsp;
&#60;img width="800" height="500" width_o="800" height_o="500" data-src="https://freight.cargo.site/t/original/i/fdda506d0ca0c3e69676f87277f54700cf1306654a698f914697a33ae0efcc22/ezgif-53fc273158bd1a.gif" data-mid="226381256" border="0"  src="https://freight.cargo.site/w/800/i/fdda506d0ca0c3e69676f87277f54700cf1306654a698f914697a33ae0efcc22/ezgif-53fc273158bd1a.gif" /&#62;(Figure 3 - Redesigned landing page for new/logged-out users, offering clear platform choices)
	

	“Back” vs. “Clear Filters” CTA
 I opted for a "Back" button (Figure 5) instead of "Clear Filters" (Figure 4) for the platform selection, believing it would be more intuitively understandable for users navigating back to the platform selection.
&#38;nbsp;Platform Comparison (Proposed)The technical documentation manager suggested adding a comparison table to the landing page, highlighting the key differences between the platforms to further aid decision-making. While this was a valuable suggestion, it was deferred for a later iteration due to time constraints.&#38;nbsp;
	&#60;img width="832" height="819" width_o="832" height_o="819" data-src="https://freight.cargo.site/t/original/i/daacbf0bb178f08214e66343d2263c1eb56bdce85a7e8470aeb743c15e485e7f/image-32.png" data-mid="226381292" border="0"  src="https://freight.cargo.site/w/832/i/daacbf0bb178f08214e66343d2263c1eb56bdce85a7e8470aeb743c15e485e7f/image-32.png" /&#62;
(Figure 4 - Prototype exploring a 'Clear Filters' option for platform preference management)

&#60;img width="785" height="774" width_o="785" height_o="774" data-src="https://freight.cargo.site/t/original/i/745911babf6c6381523c33fa608a53333578f69863f65868a1906fefda788f1c/image-33.png" data-mid="226381294" border="0"  src="https://freight.cargo.site/w/785/i/745911babf6c6381523c33fa608a53333578f69863f65868a1906fefda788f1c/image-33.png" /&#62;
(Figure 5 - Prototype demonstrating the 'Back' button for intuitive navigation)
	
&#38;nbsp;&#60;img width="1282" height="776" width_o="1282" height_o="776" data-src="https://freight.cargo.site/t/original/i/6cb6027ff3cc82c2eda56fcdc2fca7e6bce53a8c15dc3718b4a665120d00186b/Capture-2025-02-11-041923.png" data-mid="226381558" border="0"  src="https://freight.cargo.site/w/1000/i/6cb6027ff3cc82c2eda56fcdc2fca7e6bce53a8c15dc3718b4a665120d00186b/Capture-2025-02-11-041923.png" /&#62;
(Figure 6 - Final implemented solution for platform selection, ensuring a user-friendly experience)

	
	Final Solution
 I made sure the engineers implemented the final product bug-free and according to the design spec.

Impact

This rapid prototyping and collaborative approach resulted in a significantly improved platform selection experience. By removing the initial bias towards Unity and providing a clear, intuitive pathway for platform selection, we created a more welcoming and user-friendly experience for all developers, regardless of their platform choice. This seemingly small change had a significant positive impact on discoverability and user satisfaction, while also maintaining development feasibility.

	
	Content Integration Crisis and Resolution
As we approached the final weeks before the Meta Connect 2024 launch, a critical bottleneck emerged: content readiness. The original project plan relied on numerous Content Designers, Technical Documentation Engineers, and Marketing POCs to provide the final images, videos, code snippets, links, and text for all the site's pages. However, progress was significantly behind schedule, and the assigned Project Manager was overwhelmed, struggling to track down missing assets and coordinate across the various teams. This posed a serious risk to our launch timeline. Recognizing the urgency of the situation, I stepped in to take on additional project management responsibilities, even though it wasn't formally part of my role as a UX/UI Designer. My goal was to untangle the complex web of dependencies and ensure that all necessary content was delivered in time for the engineers to complete the site's implementation. My approach involved the following:
 
Creating a living progress tracker.
I developed a detailed spreadsheet (Figure 7) to track the status of every content asset for every page of the MHDC. This spreadsheet included columns for the page name, draft, assigned POC, status (e.g., "On Track," "Blocked," "Ready for Review," "Under Review," "Completed"), due date, and any relevant notes. This provided a single source of truth for the entire team.

 Establishing a cross-functional collaboration.
I created a dedicated communication channel, a shared Google Doc, where the Content Designers, Technical Documentation Engineers, and Marketing POCs could communicate with me directly, ask questions, and provide updates. This fostered real-time collaboration and issue resolution.


 Direct outreach and accountability.
I proactively contacted each POC, often multiple times, to clarify requirements, identify roadblocks, and ensure they understood the urgency of their tasks. I documented their commitments and held them accountable for delivering their assigned content on time. This involved a significant amount of "nagging," but it was necessary to drive progress.

 Untangling dependencies.
I worked closely with the PM to identify and resolve any dependencies between different content assets or teams. This often involved tracking down the correct POC for a particular asset, as the initial assignments were sometimes unclear or outdated. &#38;nbsp;

&#60;img width="3686" height="1854" width_o="3686" height_o="1854" data-src="https://freight.cargo.site/t/original/i/70e01b00ae8a59f2706a4667edde500d1871ba955ecde90c811cf22965bf929c/image-8.png" data-mid="226366938" border="0"  src="https://freight.cargo.site/w/1000/i/70e01b00ae8a59f2706a4667edde500d1871ba955ecde90c811cf22965bf929c/image-8.png" /&#62;(Figure 7 - Content asset tracking spreadsheet, ensuring all materials were delivered before launch)
This intense, focused effort, while demanding, proved highly effective. Despite some initial doubts and a few stragglers, all critical content assets were delivered in time for the engineers to complete the site's implementation before the Meta Connect 2024 deadline. This experience highlighted the importance of proactive communication, clear accountability, and a willingness to go above and beyond to ensure project success. 
	

	WEEK 7-8
	Implementation, Refinement, and the Devil in the Details
The final two weeks were a whirlwind of activity, transitioning from design to a fully functional, live platform. While I worked closely with the engineering team to implement the new design and address any remaining bugs or performance issues, my role extended far beyond traditional design responsibilities. I became a craftsman, meticulously refining every detail of the MHDC to ensure a polished and seamless experience for developers. This involved diving directly into the codebase (production code) – the CMS (Content Management System) used by engineers to develop MHDC – using primarily the React (JavaScript library) framework. I wasn't just handing off designs; I was actively involved in ensuring their accurate and effective implementation. This proactive approach allowed me to identify and resolve issues that might have otherwise been missed or delayed, directly contributing to a smoother launch. 
The carousel below provides a glimpse into my typical QA process, demonstrating how I meticulously compared the live site against the Figma design specs and swiftly addressed any discrepancies, as shown in the example involving missing image assets on the homepage.


&#60;img width="1097" height="737" width_o="1097" height_o="737" data-src="https://freight.cargo.site/t/original/i/bf951ad95665eed1c96f9d75d8e2c21cd43a74d42d85c6483b4fcdf2f422dcd4/image-13.png" data-mid="226386493" border="0"  src="https://freight.cargo.site/w/1000/i/bf951ad95665eed1c96f9d75d8e2c21cd43a74d42d85c6483b4fcdf2f422dcd4/image-13.png" /&#62;
&#60;img width="1160" height="651" width_o="1160" height_o="651" data-src="https://freight.cargo.site/t/original/i/d337fa24e5ac684a7b7d897a0397f8917e13aa72a41f104d6b316d800c4e6a0c/image-14.png" data-mid="226386505" border="0"  src="https://freight.cargo.site/w/1000/i/d337fa24e5ac684a7b7d897a0397f8917e13aa72a41f104d6b316d800c4e6a0c/image-14.png" /&#62;
&#60;img width="1229" height="655" width_o="1229" height_o="655" data-src="https://freight.cargo.site/t/original/i/f0bcdebe7d9a1b2002f4c84f46d9587a5e06b25bc046825f4da2f82755c357f6/image-15.png" data-mid="226386506" border="0"  src="https://freight.cargo.site/w/1000/i/f0bcdebe7d9a1b2002f4c84f46d9587a5e06b25bc046825f4da2f82755c357f6/image-15.png" /&#62;
&#60;img width="1336" height="808" width_o="1336" height_o="808" data-src="https://freight.cargo.site/t/original/i/e580809bcdb88faeca06dba10eb9d8464718713eecbdb60cb77c6e4d85a793e9/image-17.png" data-mid="226386507" border="0"  src="https://freight.cargo.site/w/1000/i/e580809bcdb88faeca06dba10eb9d8464718713eecbdb60cb77c6e4d85a793e9/image-17.png" /&#62;
(Figure 1 -&#38;nbsp;QA process: Identifying and addressing discrepancies between the live site and the Figma design specifications.)
My Hands-On Approach to Front-End Engineering and Bug Fixes
 
 My engineering background proved invaluable during this phase. I was able to assist the engineering team with last-minute changes to the site structure, accommodate urgent content updates, and, crucially, squash bugs that threatened the user experience. Here are some specific examples of my front-end contributions: 
 

	Learn More LinksI discovered and resolved an issue where the 'Learn more' links on several cards on the "Develop" pages (Unity/Unreal Engine) were redirecting users to incorrect sections (Figure 1). This involved debugging the link logic within the CMS and updating the `href` attributes to ensure each button led to its intended destination (Figure 2).
View Live Example


	&#60;img width="1246" height="768" width_o="1246" height_o="768" data-src="https://freight.cargo.site/t/original/i/17e5e9392a5cb1b9bd26b9a78dc30741f1ba5bdfcb26933c800b0f3abf3c9070/Recording-2024-08-22-144543-1.gif" data-mid="226370304" border="0"  src="https://freight.cargo.site/w/1000/i/17e5e9392a5cb1b9bd26b9a78dc30741f1ba5bdfcb26933c800b0f3abf3c9070/Recording-2024-08-22-144543-1.gif" /&#62;(Figure 1 - Before: Corrected 'Learn More' link destinations on the Develop pages)

&#60;img width="600" height="395" width_o="600" height_o="395" data-src="https://freight.cargo.site/t/original/i/972a282bceee0fca62cb6124ba4033dd49e3f32986e9c1c485d2b2e1e0bb11d1/ewfwe-1.gif" data-mid="226367483" border="0"  src="https://freight.cargo.site/w/600/i/972a282bceee0fca62cb6124ba4033dd49e3f32986e9c1c485d2b2e1e0bb11d1/ewfwe-1.gif" /&#62;(Figure 2 - After: Corrected 'Learn More' link destinations on the Develop pages)


	Phanto Card Link
The 'Learn more' button for the Phanto card on the "Code samples" page was directing users to a non-existent page (Figures 1 and 2). I tracked down the correct GitHub repository links and updated the button accordingly, ensuring users could access this valuable resource (Figure 3). 
View Live Example

	&#60;img width="1240" height="794" width_o="1240" height_o="794" data-src="https://freight.cargo.site/t/original/i/098a46f5c4d030ae01f5f14f07b2fcfe47087a24dd57238374821a8a9149b4d6/Recording-2024-08-22-140115.gif" data-mid="226375644" border="0"  src="https://freight.cargo.site/w/1000/i/098a46f5c4d030ae01f5f14f07b2fcfe47087a24dd57238374821a8a9149b4d6/Recording-2024-08-22-140115.gif" /&#62;(Figure 1 - Before: Resolved an incorrect link for the Phanto card, directing users to the correct GitHub repository)

&#60;img width="1262" height="808" width_o="1262" height_o="808" data-src="https://freight.cargo.site/t/original/i/da717cdbf844b070eb69a82ea77d680dd86cdf26d314f97768ec16323f7a99e5/Screenshot-2024-08-22-135959.png" data-mid="226375625" border="0"  src="https://freight.cargo.site/w/1000/i/da717cdbf844b070eb69a82ea77d680dd86cdf26d314f97768ec16323f7a99e5/Screenshot-2024-08-22-135959.png" /&#62;(Figure 2 - Before: Resolved an incorrect link for the Phanto card, directing users to the correct GitHub repository)

&#60;img width="600" height="449" width_o="600" height_o="449" data-src="https://freight.cargo.site/t/original/i/50e461f44fca881298539a1856fd07f7db5a2ced5b05ffe07d5e8dd3bacffa94/phanto.gif" data-mid="226375643" border="0"  src="https://freight.cargo.site/w/600/i/50e461f44fca881298539a1856fd07f7db5a2ced5b05ffe07d5e8dd3bacffa94/phanto.gif" /&#62;(Figure 3 - After: Resolved an incorrect link for the Phanto card, directing users to the correct GitHub repository)


	API References Layout
QA Engineers noticed inconsistencies in the layout of sections on the "API references" page (Figure 1). Working with the CSS (Figure 2), I adjusted the height and width properties to ensure a consistent and visually appealing presentation across all sections (Figure 3). 
View Live Example
	&#60;img width="3158" height="1704" width_o="3158" height_o="1704" data-src="https://freight.cargo.site/t/original/i/dcd30508dc840405137801588a64ca35065422a21ade7bde800585b7cced17ec/image-10.png" data-mid="226371221" border="0"  src="https://freight.cargo.site/w/1000/i/dcd30508dc840405137801588a64ca35065422a21ade7bde800585b7cced17ec/image-10.png" /&#62;(Figure 1 - Before: Addressed layout inconsistencies on the API references page)

&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/7efaa1fa5b5da5dd09df7906648c2b36518c177a79d8ebdfb89da3a95ba184be/It-is-a-new-day-6.gif" data-mid="226371217" border="0"  src="https://freight.cargo.site/w/1000/i/7efaa1fa5b5da5dd09df7906648c2b36518c177a79d8ebdfb89da3a95ba184be/It-is-a-new-day-6.gif" /&#62;(Figure 2 - Process: Addressed layout inconsistencies on the API references page)

&#60;img width="1278" height="787" width_o="1278" height_o="787" data-src="https://freight.cargo.site/t/original/i/a0dbc79fea83174cf68160712ae45b2a11c17986a9a13f2273e4e1ed85896ebb/image-11.png" data-mid="226371219" border="0"  src="https://freight.cargo.site/w/1000/i/a0dbc79fea83174cf68160712ae45b2a11c17986a9a13f2273e4e1ed85896ebb/image-11.png" /&#62;(Figure 3 - After: Addressed layout inconsistencies on the API references page)


	Unity Page Alignment
On the "Develop" Landing page (Unity), QA Engineers identified misaligned 'Learn more' buttons and inconsistent card padding (Figure 1). I meticulously adjusted the styling in CMS to match the precise specifications of the Figma design (Figure 2), ensuring pixel-perfect implementation (Figure 3). 
View Live Example
	&#60;img width="1058" height="544" width_o="1058" height_o="544" data-src="https://freight.cargo.site/t/original/i/371e2ef6bf8a21a34b75c6674a517b942f733a0c7bd29eb9678a9256bb0c4e73/image-8.png" data-mid="226371276" border="0"  src="https://freight.cargo.site/w/1000/i/371e2ef6bf8a21a34b75c6674a517b942f733a0c7bd29eb9678a9256bb0c4e73/image-8.png" /&#62;(Figure 1 - Before: Ensured precise alignment of elements on the Unity Develop Landing page)

&#60;img width="1045" height="486" width_o="1045" height_o="486" data-src="https://freight.cargo.site/t/original/i/ecf042c136fb41f6ac85efd43de4e9e34caae19b09c99f3a54e8adab058d1292/image-7.png" data-mid="226371284" border="0"  src="https://freight.cargo.site/w/1000/i/ecf042c136fb41f6ac85efd43de4e9e34caae19b09c99f3a54e8adab058d1292/image-7.png" /&#62;(Figure 2 - Design Spec: Ensured precise alignment of elements on the Unity Develop Landing page)
&#60;img width="1057" height="556" width_o="1057" height_o="556" data-src="https://freight.cargo.site/t/original/i/0d28388085b8a3c94a9d41f0d6f34726df86383151b5adb1324119103d92dbbf/image-6.png" data-mid="226371289" border="0"  src="https://freight.cargo.site/w/1000/i/0d28388085b8a3c94a9d41f0d6f34726df86383151b5adb1324119103d92dbbf/image-6.png" /&#62;(Figure 3 - After: Ensured precise alignment of elements on the Unity Develop Landing page)


	Icon Consistency
To maintain visual consistency with our design guidelines on the "Design (HIG)" page, I updated several icons on the design pages, replacing filled icons (Figure 1) with their outlined counterparts (Figure 2). This involved updating SVG assets and verifying their correct rendering across different browsers. 
View Live Example

	&#60;img width="2048" height="545" width_o="2048" height_o="545" data-src="https://freight.cargo.site/t/original/i/78e5c282ce0ac20cfeefa76ca3642812aea891ab135e9c6e4c7ca590dd62bddc/sdf.png" data-mid="226371417" border="0"  src="https://freight.cargo.site/w/1000/i/78e5c282ce0ac20cfeefa76ca3642812aea891ab135e9c6e4c7ca590dd62bddc/sdf.png" /&#62;(Figure 1 - Before: Updated design page icons to outlined versions for visual consistency)

 &#60;img width="2048" height="545" width_o="2048" height_o="545" data-src="https://freight.cargo.site/t/original/i/7b4dc9a929c0b768bd48e120dc3b24c36690e1074b76ce5307e5056da407e35d/aw.png" data-mid="226371418" border="0"  src="https://freight.cargo.site/w/1000/i/7b4dc9a929c0b768bd48e120dc3b24c36690e1074b76ce5307e5056da407e35d/aw.png" /&#62;(Figure 2 - After: Updated design page icons to outlined versions for visual consistency)


	These are just a few examples of the many small but crucial refinements I made during this phase. It was a hands-on, detail-oriented effort, driven by a commitment to delivering the best possible experience for our developers. It wasn't just about fixing bugs; it was about ensuring that the final product truly reflected the design vision and met the high standards we had set for ourselves. We conducted final rounds of QA testing, and collaborated closely with technical writers to ensure consistent, accurate and clear content and copy.

We wrapped up development phase with two days to spare before the launch at Meta Connect 2024.
&#60;img width="2440" height="1360" width_o="2440" height_o="1360" data-src="https://freight.cargo.site/t/original/i/3f185cd676ef03cddaa17d322445f3a1e142fb7a6f1ccd065e1e5ae3e5b7e424/Screenshot-2025-02-11-at-5.35.10AM.png" data-mid="226383391" border="0"  src="https://freight.cargo.site/w/1000/i/3f185cd676ef03cddaa17d322445f3a1e142fb7a6f1ccd065e1e5ae3e5b7e424/Screenshot-2025-02-11-at-5.35.10AM.png" /&#62;
	

	Challenges and Tradeoffs:


	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	
Tight Timeline
The 8-week deadline was the biggest constraint. We had to prioritize ruthlessly, focusing on the most critical features and content for the Meta Connect 2024 launch. We adopted a "Minimum Viable Product" (MVP) approach, knowing that we could iterate and improve after the initial release.
	
	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	
Legacy Content
Migrating and updating the vast amount of existing documentation was a significant undertaking. We had to make difficult decisions about what to keep, what to rewrite, and what to archive. We prioritized content based on usage data and developer feedback.
	
	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	
Cross-Platform Consistency
Ensuring a consistent experience across different platforms (desktop, mobile, VR) presented ongoing design and technical challenges.
	

	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	Balancing Needs
Balancing the needs of new developers (who needed clear guidance) with the needs of experienced developers (who wanted quick access to specific information) required careful consideration.

	
	SolutionThe New Meta Horizon Developer Center
The redesigned MHDC is a dramatic improvement, representing a paradigm shift in how Meta supports its VR/MR developer community. Key features include:


	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/5f76f8c3c7d8f62735b13bf565422e66ac9e6368fd743e419db2ca11b75d9978/forward.png" data-mid="226382693" border="0"  src="https://freight.cargo.site/w/200/i/5f76f8c3c7d8f62735b13bf565422e66ac9e6368fd743e419db2ca11b75d9978/forward.png" /&#62;
	Intuitive Navigation
A clear and consistent navigation system, organized by developer tasks and workflows, makes it easy to find information.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/fd1c28e3350a3fd48039db31a5ee8c196ec7497079d8143bcc8cabd67464ce82/image-1.png" data-mid="226359959" border="0"  src="https://freight.cargo.site/w/200/i/fd1c28e3350a3fd48039db31a5ee8c196ec7497079d8143bcc8cabd67464ce82/image-1.png" /&#62;
	Consistent Branding
A unified visual design and consistent terminology create a professional and cohesive experience, building trust and confidence.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/b540439a56887214b7603380137176ff9c17c6dd6ea6b529385e1303563e671d/image-2.png" data-mid="226359963" border="0"  src="https://freight.cargo.site/w/200/i/b540439a56887214b7603380137176ff9c17c6dd6ea6b529385e1303563e671d/image-2.png" /&#62;
	Powerful Search
A completely redesigned search engine, provides accurate and relevant results.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/89b7cd4bccb2fa927662ad949e25cc80e0591e71647d1c7aaf9afd710f504501/forward2.png" data-mid="226382807" border="0"  src="https://freight.cargo.site/w/200/i/89b7cd4bccb2fa927662ad949e25cc80e0591e71647d1c7aaf9afd710f504501/forward2.png" /&#62;
	
Concise and Clear Documentation
Documentation is written in plain language, with clear examples, code snippets, and interactive tutorials.
	

	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/ba5d7b620c82120d2442a84673d2fc3622daafb6e8d17c968dd71ec2a322e78e/image-5.png" data-mid="226359972" border="0"  src="https://freight.cargo.site/w/200/i/ba5d7b620c82120d2442a84673d2fc3622daafb6e8d17c968dd71ec2a322e78e/image-5.png" /&#62;
	Structured Learning Paths
Curated learning paths guide new developers through the platform's capabilities, providing a clear onboarding experience.
	
	&#60;img width="200" height="120" width_o="200" height_o="120" data-src="https://freight.cargo.site/t/original/i/154afeca83a6aa39b59f85875e8df7b98a3ae34bb537793455abd475567accdd/forward-1.png" data-mid="226382683" border="0"  src="https://freight.cargo.site/w/200/i/154afeca83a6aa39b59f85875e8df7b98a3ae34bb537793455abd475567accdd/forward-1.png" /&#62;
	Interactive Elements
The design incorporated more interactive elements, like the platform selection and feedback widget.
	
	
These before-and-after screenshots illustrate the dramatic improvement in the user experience of the Meta Horizon Developer Center.

&#60;img width="4228" height="1552" width_o="4228" height_o="1552" data-src="https://freight.cargo.site/t/original/i/09d6266e583ee3c0880a6e180b73045f83c425688929473c61957224db782f0b/Frame-1400001536.png" data-mid="226385417" border="0"  src="https://freight.cargo.site/w/1000/i/09d6266e583ee3c0880a6e180b73045f83c425688929473c61957224db782f0b/Frame-1400001536.png" /&#62;DESIGN
Before (left): Outdated design, cluttered layout, confusing navigation. 
After (right): Modern, clean, design reflectin Meta Horizon, improved usability.

&#60;img width="8028" height="1552" width_o="8028" height_o="1552" data-src="https://freight.cargo.site/t/original/i/67fe7dd8db77f867b01caf40ea8739ee41509f023cf666399ee16c28b07ac877/Frame-1400001535.png" data-mid="226385202" border="0"  src="https://freight.cargo.site/w/1000/i/67fe7dd8db77f867b01caf40ea8739ee41509f023cf666399ee16c28b07ac877/Frame-1400001535.png" /&#62;INFORMATION ARCHITECTURE
Before (left): Disorganized structure, difficult to find content.After (right): Logical, task-based structure, easy to navigate and scalable.

&#60;img width="4228" height="1552" width_o="4228" height_o="1552" data-src="https://freight.cargo.site/t/original/i/261ab3f2de5db27c9f6840e822a02af3b4a79238f1ef378ecf73a89c1ce1d0dd/Frame-1400001537.png" data-mid="226385652" border="0"  src="https://freight.cargo.site/w/1000/i/261ab3f2de5db27c9f6840e822a02af3b4a79238f1ef378ecf73a89c1ce1d0dd/Frame-1400001537.png" /&#62;BRANDINGBefore (left): Inconsistent branding, outdated domain (Oculus.com).After (right): Unified Meta Horizon branding, consistent design elements.

&#60;img width="4228" height="1552" width_o="4228" height_o="1552" data-src="https://freight.cargo.site/t/original/i/d2f7b9f1c2f324e0251921de54f7fa4e0c2ddb57caab4aceff61a94c719d3801/Frame-1400001538.png" data-mid="226385661" border="0"  src="https://freight.cargo.site/w/1000/i/d2f7b9f1c2f324e0251921de54f7fa4e0c2ddb57caab4aceff61a94c719d3801/Frame-1400001538.png" /&#62;SEARCHBefore (left): Limited functionality, irrelevant search results.After (right): Powerful, flexible search with improved relevance.

&#60;img width="4228" height="1552" width_o="4228" height_o="1552" data-src="https://freight.cargo.site/t/original/i/b726da1c374115f18083a58af44eacb3dcf0410d26c1208fefb2dd74dba62209/Frame-1400001539.png" data-mid="226385650" border="0"  src="https://freight.cargo.site/w/1000/i/b726da1c374115f18083a58af44eacb3dcf0410d26c1208fefb2dd74dba62209/Frame-1400001539.png" /&#62;MARKETING PAGESBefore (left): Image of the previous MHDC marketing page.After (right): New content focused on onboarding and key use cases.
&#38;nbsp;
OutcomesReaching the Summit of Success
The redesigned MHDC launched to widespread acclaim at Meta Connect 2024. We didn't just meet expectations; we significantly exceeded them, setting a new benchmark for developer platforms within Meta and the broader VR/MR industry.


Quantitative Triumphs:

991 total updates landed: 426 from Doc Eng, 565 from Eng/Product.
59 new design topics added.
Learning Objectives (LOs) identified for 53 different product areas (out of a possible 63).
Improved organization and standardization from 0% to 91% compliant features/guides (Unity only prioritized for Connect timeframe):
&#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; Analytics indicated a 35% increase in searches that returned a helpful result.
&#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; 20% decrease in the amount of time users were spending on the search result pages.

Qualitative Accolades:

"The new MHDC is a game-changer! It's so much easier to find what I need, and the learning paths are incredibly helpful."- Developer feedback from post-launch survey

"This is a massive improvement over the old system. The team has done an incredible job of making the MHDC more user-friendly and intuitive." - Internal stakeholder feedback


Efficiency Milestones:
Delivered all assets 10-15% ahead of schedule.Lessons LearnedNavigating the Seas of Change

	
	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	
User Research is Paramount
Deeply understanding developer needs through rigorous research is essential for creating a truly effective developer platform.
	
	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	
Collaboration is Key
Close, continuous collaboration between design, engineering, content, and product management is crucial for success, especially on a tight timeline.
	
	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	
Iteration is Essential
Don't be afraid to iterate and refine your designs based on feedback. Rapid prototyping and testing are invaluable.
	

	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	Prioritize Ruthlessly
When facing constraints, focus on the most critical features and content first. Embrace the MVP approach.

	
	&#60;img width="100" height="100" width_o="100" height_o="100" data-src="https://freight.cargo.site/t/original/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" data-mid="226363251" border="0"  src="https://freight.cargo.site/w/100/i/105cc64bb9407c0b43adbba83e9eb333ff6dc38216a29630aa533a4bf2950d67/bullet.png" /&#62;
	Advocate for the User
Always be the voice of the user in design and development decisions.

	
Moving ForwardA Continuing Voyage
The redesigned MHDC is a testament to the power of user-centric design and collaborative development. It's a platform that empowers developers to shape the future of VR/MR experiences, and I'm incredibly proud to have played a key role in its transformation. The launch is not the end; it's the beginning of a continuous journey of improvement, driven by developer feedback and a commitment to excellence. We will continue to monitor usage, gather feedback, and iterate on the platform to ensure it remains a valuable resource for the Meta Horizon developer community.


</description>
		
	</item>
		
		
	<item>
		<title>Mobile Search</title>
				
		<link>https://brandikinard.com/Mobile-Search</link>

		<pubDate>Fri, 06 Jan 2023 08:21:46 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/Mobile-Search</guid>

		<description>
	
	&#60;img width="3604" height="2703" width_o="3604" height_o="2703" data-src="https://freight.cargo.site/t/original/i/095f8f4bb00da90b2128302de87bc1e489de6cf731b652a6e1a6aa38a7b364f8/Cover-for-search.png" data-mid="163745750" border="0"  src="https://freight.cargo.site/w/1000/i/095f8f4bb00da90b2128302de87bc1e489de6cf731b652a6e1a6aa38a7b364f8/Cover-for-search.png" /&#62;
	

	Mobile Search&#38;nbsp;Role — iOS/Android Product Design

Rationale
Updated the search experience on the Confluence mobile app so that: 
Users can easily search for pages, people and spaces. Users can follow profiles or spaces within the search experience. Users can visit profiles and see more completed information about the person they are searching for.

	
	&#60;img width="3646" height="1300" width_o="3646" height_o="1300" data-src="https://freight.cargo.site/t/original/i/7d2a1e8af17400c71eecee00ea0b6ed630e979cdafbd1e6c248c865fa703c13e/Screen-Shot-2022-09-26-at-11.13.45-AM.png" data-mid="163758994" border="0"  src="https://freight.cargo.site/w/1000/i/7d2a1e8af17400c71eecee00ea0b6ed630e979cdafbd1e6c248c865fa703c13e/Screen-Shot-2022-09-26-at-11.13.45-AM.png" /&#62;
	

	ProblemAccording to search app data on the Confluence web app, our users try to find Spaces (9%) and People (3%) besides Confluence items (85%). However, on mobile, users could NOT search for people or spaces and the lack of people &#38;amp;&#38;nbsp;which meant users couldn’t follow people they wanted &#38;amp; spaces they liked :-(
&#60;img width="80" height="80" width_o="80" height_o="80" data-src="https://freight.cargo.site/t/original/i/5f4c285a9b1c83032af471afb57c0c5af0e8b5e42469fd8cd4edd27548b88e8a/Confluence.png" data-mid="163768706" border="0"  src="https://freight.cargo.site/w/80/i/5f4c285a9b1c83032af471afb57c0c5af0e8b5e42469fd8cd4edd27548b88e8a/Confluence.png" /&#62;
Objectives
Redesigned the UI of search screens to be able to display people, pages, and spaces in the results.

&#60;img width="1116" height="1008" width_o="1116" height_o="1008" data-src="https://freight.cargo.site/t/original/i/3dbb764b3f1bf5d626583d6b23ff67dc57149fd06d699e78059b5bad96e9c24d/oldsearch.png" data-mid="163768020" border="0"  src="https://freight.cargo.site/w/1000/i/3dbb764b3f1bf5d626583d6b23ff67dc57149fd06d699e78059b5bad96e9c24d/oldsearch.png" /&#62;
There wasn’t enough functionality in the old search experience.
&#60;img width="1116" height="1008" width_o="1116" height_o="1008" data-src="https://freight.cargo.site/t/original/i/6ab4ce6dbb07dfd5b5b278569fe6a248f05a8ccea99837b1583608cafc8b41ed/newsearch.png" data-mid="163768019" border="0"  src="https://freight.cargo.site/w/1000/i/6ab4ce6dbb07dfd5b5b278569fe6a248f05a8ccea99837b1583608cafc8b41ed/newsearch.png" /&#62;
The search experience allows users to select chips to filter results.
Updated the search APIs and queries to provide smart suggestions and include different types of results (spaces &#38;amp; people).

&#60;img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/9e340546a5637e815ba1300537a5a2e7051753d963db6863540bd9d372bd5583/Screen-Shot-2022-09-13-at-4.11.17-PM.png" data-mid="163765786" border="0"  src="https://freight.cargo.site/w/1000/i/9e340546a5637e815ba1300537a5a2e7051753d963db6863540bd9d372bd5583/Screen-Shot-2022-09-13-at-4.11.17-PM.png" /&#62;
Discovered &#38;amp; leveraged unsalvaged bits of metadata to use in the search design with my Engineer partners. &#38;nbsp;

Created UI of a new profile screen that can display more meaningful information to the person.&#38;nbsp;

&#60;img width="370" height="800" width_o="370" height_o="800" data-src="https://freight.cargo.site/t/original/i/967baca9b89bd181d1aa1f04f9e32c04b14e975575e09bd94cfa80fd6f53967e/iosOldProfileCard.png" data-mid="163764907" border="0" data-scale="33" src="https://freight.cargo.site/w/370/i/967baca9b89bd181d1aa1f04f9e32c04b14e975575e09bd94cfa80fd6f53967e/iosOldProfileCard.png" /&#62;
(Old design) Profile card lacked details about the person and interrupts whatever the user is doing; users would have to tap “Personal Space” to navigate to a full screen with more details about the person.
&#60;img width="407" height="812" width_o="407" height_o="812" data-src="https://freight.cargo.site/t/original/i/92c7161d0d4f6d792ea807c5c2365f617e80a08f7d7c1f45d76943e80712d18d/large-detent-area_2x-1.png" data-mid="163763193" border="0" data-scale="33" src="https://freight.cargo.site/w/407/i/92c7161d0d4f6d792ea807c5c2365f617e80a08f7d7c1f45d76943e80712d18d/large-detent-area_2x-1.png" /&#62;&#38;nbsp;&#38;nbsp;&#38;nbsp;&#60;img width="407" height="812" width_o="407" height_o="812" data-src="https://freight.cargo.site/t/original/i/1cefab72bebf6914cf5373b9ab80837cb05b9d924f615273c09b9dc4fed001f7/medium-detent-area_2x-1.png" data-mid="163763194" border="0" data-scale="33" src="https://freight.cargo.site/w/407/i/1cefab72bebf6914cf5373b9ab80837cb05b9d924f615273c09b9dc4fed001f7/medium-detent-area_2x-1.png" /&#62; 
Android and iOS design guidelines specify particular heights at which a sheet naturally rests. For ios, large is the height of a fully expanded sheet and medium is about half of the fully expanded height.&#38;nbsp;
&#60;img width="375" height="812" width_o="375" height_o="812" data-src="https://freight.cargo.site/t/original/i/d3f5f662759b633f62f7d0470c0b888f65bc5eb27d7d76022b017577b18b94bc/newProfileSheetMedium.png" data-mid="163765023" border="0" data-scale="35" src="https://freight.cargo.site/w/375/i/d3f5f662759b633f62f7d0470c0b888f65bc5eb27d7d76022b017577b18b94bc/newProfileSheetMedium.png" /&#62;&#38;nbsp;&#38;nbsp;&#38;nbsp;&#38;nbsp;&#60;img width="375" height="812" width_o="375" height_o="812" data-src="https://freight.cargo.site/t/original/i/417839591b454a78d688db48e22d6831b4b74c3174c69fce06f1fb47a28eb0cd/newProfileSheetLarge.png" data-mid="163765021" border="0" data-scale="35" src="https://freight.cargo.site/w/375/i/417839591b454a78d688db48e22d6831b4b74c3174c69fce06f1fb47a28eb0cd/newProfileSheetLarge.png" /&#62;
(Updated design) Profile Sheet provides more details about the person and avoids interrupting the user’s experience by presenting details as nonimmersive content.&#38;nbsp;
	

	Scope
Captured all product requirements in the design and built consensus with cross-functional partners (3 iOS developers, 2 Android developers and 1 Engineering Manager) to reach the best outcome.&#38;nbsp;
User Flow
	

	Launch search screenUser taps on the Search button to view the search screen.
︎ Search as a full screen experience

	
&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/6dc5addd203a2eaa832abe6afea27451378c34bcef40062b95333145ab5d0d2d/launch.gif" data-mid="163751043" border="0"  src="https://freight.cargo.site/w/426/i/6dc5addd203a2eaa832abe6afea27451378c34bcef40062b95333145ab5d0d2d/launch.gif" /&#62;
	

	Input queryUser enters a search query.
 

	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/f73c238d17fcfef1fade1c7304f89d2d586fbb7af32f3d810de3fc561a974309/searchQuery.gif" data-mid="163753302" border="0"  src="https://freight.cargo.site/w/426/i/f73c238d17fcfef1fade1c7304f89d2d586fbb7af32f3d810de3fc561a974309/searchQuery.gif" /&#62;
	

	Search stateSearch is successful and shows results.
(When search query is typed) ︎ Show a subset of matched pages︎ Show a subset of matched spaces︎ Show a subset of matched people

	
	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/876af2e34a5970bc52fe3c044cdc11bdef126af8af76383561762e060923e472/successState.gif" data-mid="163756834" border="0"  src="https://freight.cargo.site/w/426/i/876af2e34a5970bc52fe3c044cdc11bdef126af8af76383561762e060923e472/successState.gif" /&#62;
	

	Empty stateSearch API returns no results (empty state)

	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/c28c7ced25cb792cc3452e3307e9991e5a9a70cf1c1cd58563d464adef27f242/emptyState.gif" data-mid="163756856" border="0"  src="https://freight.cargo.site/w/426/i/c28c7ced25cb792cc3452e3307e9991e5a9a70cf1c1cd58563d464adef27f242/emptyState.gif" /&#62;
	

	Error stateSearch API returns an error (error state).
	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/aa2854794943756c66d186955036866d1f18ae5665d321f8f3ba8ae27d8f475e/errorState.gif" data-mid="163757025" border="0"  src="https://freight.cargo.site/w/426/i/aa2854794943756c66d186955036866d1f18ae5665d321f8f3ba8ae27d8f475e/errorState.gif" /&#62;
	

	Tap on a Page to view the PageUser taps on a Page in the search results.


	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/923b349ac5d684bc0e4b92c1178feb932a7f44937ace87a9fb6745cec297d1b7/tapPage.gif" data-mid="163757189" border="0"  src="https://freight.cargo.site/w/426/i/923b349ac5d684bc0e4b92c1178feb932a7f44937ace87a9fb6745cec297d1b7/tapPage.gif" /&#62;
	

	Tap on a Space to view teh SpaceUser taps on a Space in the&#38;nbsp; search results.
	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/4bf59ee6f3f2e15d00cf929a28647ce401c571cf337b9c17c9f080ae7d902f98/tapSpace.gif" data-mid="163757320" border="0"  src="https://freight.cargo.site/w/426/i/4bf59ee6f3f2e15d00cf929a28647ce401c571cf337b9c17c9f080ae7d902f98/tapSpace.gif" /&#62;
	

	Tap on a person to view the person’s profile cardUsre taps on a Person in the search results.
	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/f4483a9a6e2d2f6b35d4803a1a35af6959c65c5b0781cdb147daa89cb7a40d92/tapPerson.gif" data-mid="163757362" border="0"  src="https://freight.cargo.site/w/426/i/f4483a9a6e2d2f6b35d4803a1a35af6959c65c5b0781cdb147daa89cb7a40d92/tapPerson.gif" /&#62;
	

	Tap on the “See All” button in the Pages sectionUser taps&#38;nbsp; on the See All button in the Page section.(When user taps See All on one of each section) ︎ They can see the one type of search results with infinite scrolls.

	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/b182947cf9325fa2f7b6f0004776fa330077fa1745fd69c77e8f351e306ac56c/tapSeeAll.gif" data-mid="163757484" border="0"  src="https://freight.cargo.site/w/426/i/b182947cf9325fa2f7b6f0004776fa330077fa1745fd69c77e8f351e306ac56c/tapSeeAll.gif" /&#62;
	

	Tap on the “Pages” chip/bubble buttonUser taps on the Pages chip/bubble button.︎ Show matching excerpt within the metadata

	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/c671dd8c95f9024e4dd383dd14c3b1485814bcb00321d84777287a48231227b8/tapPageChip.gif" data-mid="163757836" border="0"  src="https://freight.cargo.site/w/426/i/c671dd8c95f9024e4dd383dd14c3b1485814bcb00321d84777287a48231227b8/tapPageChip.gif" /&#62;
	

	Tap on the “Spaces” chip/bubble buttonUser taps on the Spaces chip/bubble button.
	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/a7fd435392a82a31636c42a6c5bee19a8f35179a7b9d561b33d54d34536bbeb5/tapSpacesChip.gif" data-mid="163758621" border="0"  src="https://freight.cargo.site/w/426/i/a7fd435392a82a31636c42a6c5bee19a8f35179a7b9d561b33d54d34536bbeb5/tapSpacesChip.gif" /&#62;
	

	Tap on the “X” button to clear search queryUser taps on the X button to clear the search.
	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/fbc5e462ce7f34deffc25fe31f6f6d78c09c9942c9808bc7f0f6adef8f5a3370/close.gif" data-mid="163758785" border="0"  src="https://freight.cargo.site/w/426/i/fbc5e462ce7f34deffc25fe31f6f6d78c09c9942c9808bc7f0f6adef8f5a3370/close.gif" /&#62;
	

	Tap the back button OR up button to exit searchUser taps back OR &#38;lt;- button to exit search.
(Default without query)︎ Show a list of recently viewed pages.︎ Show a list of recent spaces.︎ Show a list of recently viewed people.

	&#60;img width="426" height="480" width_o="426" height_o="480" data-src="https://freight.cargo.site/t/original/i/09c1e5e14c0c420b83db5e1343faf62f06e4e7d9b237c3372bed7566aa02bb57/exitSearch.gif" data-mid="163758867" border="0"  src="https://freight.cargo.site/w/426/i/09c1e5e14c0c420b83db5e1343faf62f06e4e7d9b237c3372bed7566aa02bb57/exitSearch.gif" /&#62;
	

You’ve reached the end of this page...
&#60;img width="254" height="132" width_o="254" height_o="132" data-src="https://freight.cargo.site/t/original/i/a4cba6e7a2d9f50ede854c870f42272e92d242bf290796cf385ab71476d734f2/Illustration-Laptop.png" data-mid="163768858" border="0" data-scale="40" src="https://freight.cargo.site/w/254/i/a4cba6e7a2d9f50ede854c870f42272e92d242bf290796cf385ab71476d734f2/Illustration-Laptop.png" /&#62;

Thank You!
	

</description>
		
	</item>
		
		
	<item>
		<title>Breakerbox</title>
				
		<link>https://brandikinard.com/Breakerbox</link>

		<pubDate>Sat, 15 Aug 2020 17:34:23 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/Breakerbox</guid>

		<description>
	
	&#60;img width="3840" height="2400" width_o="3840" height_o="2400" data-src="https://freight.cargo.site/t/original/i/5ede574fb7fd975ff9f3b0b7120b80532224e827f288a2974b1f949caaffb753/bbox_screen2.gif" data-mid="79971877" border="0"  src="https://freight.cargo.site/w/1000/i/5ede574fb7fd975ff9f3b0b7120b80532224e827f288a2974b1f949caaffb753/bbox_screen2.gif" /&#62;
	

	Breakerbox
At Breakerbox — an energy consultant startup — I worked with the design team to bring one of IDEO CoLab’s first venture design projects from a concept to reality — a fully fleshed-out brand, ready to conquer the world. Collaborating with both a team at Exelon and IDEO teams, the Breakerbox crew iterated on countless versions of the product’s deisgn and marketing.Role — Creative &#38;amp; Art Direction, Branding, Product Design, Illustration, User Research, Content Strategy, Front-End Development&#38;nbsp;

	
	&#60;img width="1264" height="790" width_o="1264" height_o="790" data-src="https://freight.cargo.site/t/original/i/d06c9fc1d528bb3db856bacefdb9c4c13151d8ac5ab22c248f1a90620745290c/bb1.gif" data-mid="133959273" border="0" data-scale="73" src="https://freight.cargo.site/w/1000/i/d06c9fc1d528bb3db856bacefdb9c4c13151d8ac5ab22c248f1a90620745290c/bb1.gif" /&#62;
	

	The productThe Breakerbox product evolved from being a standard energy marketplace to a digital energy consultancy that brings concierge level service to a digital buying experience. The world of energy brokerage lives in the dark ages– paper contracts and bills, back alley dealings with brokers that have hundreds of uneducated clientele, and one-and-done relationships with energy suppliers. Breakerbox is meant not only to get small and medium-sized business owners the best price on your energy supply, but also take a holistic approach to the management of their properties. With usage monitoring and insights on how to invest in optimizing a location, Breakerbox brings a long-term relationship to a short-term focused market. 
&#60;img width="480" height="412" width_o="480" height_o="412" data-src="https://freight.cargo.site/t/original/i/b50979365325c8d852232c8ef67e91ffc86fecdb098100645a3b5d78b91e7319/pink_cube_loading_breakerbox_HIGHRES.gif" data-mid="79972126" border="0" data-scale="25" src="https://freight.cargo.site/w/480/i/b50979365325c8d852232c8ef67e91ffc86fecdb098100645a3b5d78b91e7319/pink_cube_loading_breakerbox_HIGHRES.gif" /&#62;
	

The visual styleI worked with other IDEO collaborators on the Breakerbox brand &#38;amp; visual style, testing different illustrattion styles and data visualization patterns to find the right attitude for the product.
 Logotype

&#60;img width="1728" height="138" width_o="1728" height_o="138" data-src="https://freight.cargo.site/t/original/i/f2dd9dabb72991cad48e90c347e5659fd62a29696ded1a6602c7b66988be7726/Screen-Shot-2020-08-22-at-6.05.18-PM.png" data-mid="80588380" border="0" data-scale="62" src="https://freight.cargo.site/w/1000/i/f2dd9dabb72991cad48e90c347e5659fd62a29696ded1a6602c7b66988be7726/Screen-Shot-2020-08-22-at-6.05.18-PM.png" /&#62;

Color Palette

&#60;img width="1376" height="590" width_o="1376" height_o="590" data-src="https://freight.cargo.site/t/original/i/9b6c985baba0878412ecb1f859c68640c28ea8496ec0d6d92bb2e296a52a3479/Screen-Shot-2020-08-22-at-6.03.06-PM.png" data-mid="80588177" border="0" data-scale="62" src="https://freight.cargo.site/w/1000/i/9b6c985baba0878412ecb1f859c68640c28ea8496ec0d6d92bb2e296a52a3479/Screen-Shot-2020-08-22-at-6.03.06-PM.png" /&#62;

Typeface
&#60;img width="708" height="182" width_o="708" height_o="182" data-src="https://freight.cargo.site/t/original/i/7e9b0809dd942386c4527a4336a160f17e822b6002298d6b8a0fe93a5e24c8a8/Screen-Shot-2020-08-22-at-6.15.32-PM.png" data-mid="80588583" border="0" data-scale="43" src="https://freight.cargo.site/w/708/i/7e9b0809dd942386c4527a4336a160f17e822b6002298d6b8a0fe93a5e24c8a8/Screen-Shot-2020-08-22-at-6.15.32-PM.png" /&#62;


Single source of truth

Near the beginning of my time with Breakerbox, we hunkered down creating a design system in Figma from my initial components, and together the team put together auto-flow components and accessible versions of our color palettes.

&#60;img width="1774" height="1288" width_o="1774" height_o="1288" data-src="https://freight.cargo.site/t/original/i/52be13d0cc18a79f594c8c413324483a391653187c3c50cf6023a5ff00df2ea5/61.png" data-mid="133959640" border="0" data-scale="66" src="https://freight.cargo.site/w/1000/i/52be13d0cc18a79f594c8c413324483a391653187c3c50cf6023a5ff00df2ea5/61.png" /&#62;

	
Putting the fun in functionality
Breakerbox has a wide gamut of data types to represent, and needs to feel light enough for the user to engage with the data rather than be overwhelmed by it. For this reason, we adjusted the Breakerbox visual aesthetic to embrace more rounded organic forms rather than our initial isometric styling. Initial designs were rigid and complex, while the newer ones were more simplistic, squishy and lighter, with more intentional color association and animation rather than having unnecessary moments that tended to distract during user tests.


	Iconography scribbles

&#60;img width="2378" height="1327" width_o="2378" height_o="1327" data-src="https://freight.cargo.site/t/original/i/235681d947be6ab72d0cdcac75131cb7684ccc8c0b3d84226ebaa233083ac469/IMG_2604.JPG" data-mid="80587452" border="0" data-scale="59" src="https://freight.cargo.site/w/1000/i/235681d947be6ab72d0cdcac75131cb7684ccc8c0b3d84226ebaa233083ac469/IMG_2604.JPG" /&#62;
&#60;img width="1216" height="744" width_o="1216" height_o="744" data-src="https://freight.cargo.site/t/original/i/0229fbc5eedc882c8738ce293d53733828ed3f7faf1c4639977a58f1aec8534b/Screen-Shot-2020-08-22-at-5.45.42-PM.png" data-mid="80587610" border="0" data-scale="55" src="https://freight.cargo.site/w/1000/i/0229fbc5eedc882c8738ce293d53733828ed3f7faf1c4639977a58f1aec8534b/Screen-Shot-2020-08-22-at-5.45.42-PM.png" /&#62;&#38;nbsp;
&#60;img width="752" height="294" width_o="752" height_o="294" data-src="https://freight.cargo.site/t/original/i/4084e5f039d4d8f4ac0c2fbac05f8af41e432486282c3539dafc58b7220d11c7/Screen-Shot-2020-08-22-at-5.46.13-PM.png" data-mid="80587609" border="0" data-scale="36" src="https://freight.cargo.site/w/752/i/4084e5f039d4d8f4ac0c2fbac05f8af41e432486282c3539dafc58b7220d11c7/Screen-Shot-2020-08-22-at-5.46.13-PM.png" /&#62;
	

At the speed of thought
 The day-one version of the product itself takes a simple location based on-boarding approach, moving away from a dashboard driven experience and more towards seeing a a personalized set of contracts with a tool set to guide the user to seeing what the best fit for them is. From here we I worked with subject matter experts to understand the user flow.


	User journey mapping
&#60;img width="2036" height="618" width_o="2036" height_o="618" data-src="https://freight.cargo.site/t/original/i/56b9337a3ada389aa9d44d8f5a635d3948255ba404c72bf5a06505b8e920e3c7/Screen-Shot-2020-08-15-at-1.42.08-PM.png" data-mid="79971986" border="0"  src="https://freight.cargo.site/w/1000/i/56b9337a3ada389aa9d44d8f5a635d3948255ba404c72bf5a06505b8e920e3c7/Screen-Shot-2020-08-15-at-1.42.08-PM.png" /&#62;


Iterative prototyping
We went through multiple iterations of this view over time, and even explored what it would look like after a users had purchased a contract.
Version 1
&#60;img width="2000" height="1225" width_o="2000" height_o="1225" data-src="https://freight.cargo.site/t/original/i/d1ba07291d70965ac185814992b100bf990a52eba2f2d6d18ef1658f4d68fde2/1-1.jpeg" data-mid="133960357" border="0" data-scale="67" src="https://freight.cargo.site/w/1000/i/d1ba07291d70965ac185814992b100bf990a52eba2f2d6d18ef1658f4d68fde2/1-1.jpeg" /&#62;

Version 2
&#60;img width="2000" height="1225" width_o="2000" height_o="1225" data-src="https://freight.cargo.site/t/original/i/3408478b5a2ff4622dd80b77226421128e1336832270391fff0fbd91969c5a85/1-2.jpeg" data-mid="133960356" border="0" data-scale="66" src="https://freight.cargo.site/w/1000/i/3408478b5a2ff4622dd80b77226421128e1336832270391fff0fbd91969c5a85/1-2.jpeg" /&#62;

Version 3
&#60;img width="2000" height="1342" width_o="2000" height_o="1342" data-src="https://freight.cargo.site/t/original/i/d46dcbb363f35b64b6fa39fc9bafcc199bb3050b2dd01de90a8d292590210c2e/1-2-.jpeg" data-mid="133960355" border="0" data-scale="67" src="https://freight.cargo.site/w/1000/i/d46dcbb363f35b64b6fa39fc9bafcc199bb3050b2dd01de90a8d292590210c2e/1-2-.jpeg" /&#62;
(Seeing market price)Version 1
&#60;img width="2000" height="1224" width_o="2000" height_o="1224" data-src="https://freight.cargo.site/t/original/i/d59060ab8b52868b0ce3e92c1b726ce0705213366c1b46e7bb28db4d09ab62d1/2-1.jpeg" data-mid="133960354" border="0" data-scale="68" src="https://freight.cargo.site/w/1000/i/d59060ab8b52868b0ce3e92c1b726ce0705213366c1b46e7bb28db4d09ab62d1/2-1.jpeg" /&#62;

Version 2
&#60;img width="2000" height="1341" width_o="2000" height_o="1341" data-src="https://freight.cargo.site/t/original/i/12109237eef06e13b5745b16e3aff589429060b93fdba1f4f0f81fb505bbf6cf/2-2.jpeg" data-mid="133960352" border="0" data-scale="69" src="https://freight.cargo.site/w/1000/i/12109237eef06e13b5745b16e3aff589429060b93fdba1f4f0f81fb505bbf6cf/2-2.jpeg" /&#62;

Version 3
&#60;img width="2000" height="1250" width_o="2000" height_o="1250" data-src="https://freight.cargo.site/t/original/i/fe500710de1e402085b502227e79b7c944deb65aa9839779984ec44dc9151a82/2-3.jpeg" data-mid="133960351" border="0" data-scale="70" src="https://freight.cargo.site/w/1000/i/fe500710de1e402085b502227e79b7c944deb65aa9839779984ec44dc9151a82/2-3.jpeg" /&#62;
(Tracking usage)
 Version 1
&#60;img width="2000" height="1225" width_o="2000" height_o="1225" data-src="https://freight.cargo.site/t/original/i/e2ff0cb9e566aaff2052cfb5b7f6caa22283403c4974dfa4eeb40465b1c2f6f8/3-1.jpeg" data-mid="133960350" border="0" data-scale="71" src="https://freight.cargo.site/w/1000/i/e2ff0cb9e566aaff2052cfb5b7f6caa22283403c4974dfa4eeb40465b1c2f6f8/3-1.jpeg" /&#62;

Version 2
&#60;img width="2000" height="1342" width_o="2000" height_o="1342" data-src="https://freight.cargo.site/t/original/i/e49dbdbb68fccd889759dbf62ccb1a41337a10f7939c7263fc565cdc87ebf192/2-4.jpeg" data-mid="133960496" border="0" data-scale="72" src="https://freight.cargo.site/w/1000/i/e49dbdbb68fccd889759dbf62ccb1a41337a10f7939c7263fc565cdc87ebf192/2-4.jpeg" /&#62;
The energy explainerSomething that we struggled with during the design process was a disparity in the audience for our product. We tried creating many different versions of an explainer for the process, making illustrations and diagrams, a web animation, and finally found a set of simple illustrations and animations that got the point across rather quickly in a way that wasn’t too distracting.

&#60;img width="1672" height="870" width_o="1672" height_o="870" data-src="https://freight.cargo.site/t/original/i/4320b07bdbd128879bd170c4f1fb726cc53f6345431bcf2128e13b6b2a051bb8/Screen-Shot-2022-02-18-at-2.18.45-PM.png" data-mid="133960956" border="0" data-scale="53" src="https://freight.cargo.site/w/1000/i/4320b07bdbd128879bd170c4f1fb726cc53f6345431bcf2128e13b6b2a051bb8/Screen-Shot-2022-02-18-at-2.18.45-PM.png" /&#62;

	
It was fun!
Working at Breakerbox and seeing the brand come to life has been very rewarding for me as a designer. I'm really proud of what I've done here.


	Figma web app prototype (ready-to-bake!)


&#60;img width="1960" height="1424" width_o="1960" height_o="1424" data-src="https://freight.cargo.site/t/original/i/675f4a9868719390090471527a4bd489213f3fff08104c51f4022241470a7cdb/Screen-Shot-2020-08-26-at-4.15.31-PM.png" data-mid="80952955" border="0"  src="https://freight.cargo.site/w/1000/i/675f4a9868719390090471527a4bd489213f3fff08104c51f4022241470a7cdb/Screen-Shot-2020-08-26-at-4.15.31-PM.png" /&#62;

&#60;img width="1016" height="1372" width_o="1016" height_o="1372" data-src="https://freight.cargo.site/t/original/i/72670815c9a27d1fb58a02e243bf91c41d9f14213ce929336c260e2dc6a2d1d9/Screen-Shot-2020-08-26-at-3.21.01-PM.png" data-mid="80948508" border="0" data-scale="57" src="https://freight.cargo.site/w/1000/i/72670815c9a27d1fb58a02e243bf91c41d9f14213ce929336c260e2dc6a2d1d9/Screen-Shot-2020-08-26-at-3.21.01-PM.png" /&#62;
	

</description>
		
	</item>
		
		
	<item>
		<title>Old Photo Restorer</title>
				
		<link>https://brandikinard.com/Old-Photo-Restorer</link>

		<pubDate>Fri, 05 Jul 2024 05:39:12 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/Old-Photo-Restorer</guid>

		<description>
	
	&#60;img width="940" height="788" width_o="940" height_o="788" data-src="https://freight.cargo.site/t/original/i/02c807eb1d5f1beba4fd70c58a2c9716671664abeb944f3b499419b6bcc59108/1.gif" data-mid="214148540" border="0"  src="https://freight.cargo.site/w/940/i/02c807eb1d5f1beba4fd70c58a2c9716671664abeb944f3b499419b6bcc59108/1.gif" /&#62;
	

	Old Photo RestorerIn this project, I developed a Streamlit application that restores old photos by digitally repairing damages like scratches. Users can upload a photo, directly paint over imperfections on a drawable canvas, and choose from advanced inpainting algorithms—Navier Stokes (NS) and Fast Marching Method (Telea)—to seamlessly blend repairs. The final restored image can be previewed and downloaded directly. This tool simplifies photo restoration, making it accessible without needing complex software.
Role — Applied AI (Computer Vision) Egnineering, Prototyping, Content Design, Creative Direction

	
&#60;img width="940" height="788" width_o="940" height_o="788" data-src="https://freight.cargo.site/t/original/i/6ffaac8e66358bc080a2278befa294c35ff53e2a06493a47aed27434331b4c68/2.gif" data-mid="214148539" border="0"  src="https://freight.cargo.site/w/940/i/6ffaac8e66358bc080a2278befa294c35ff53e2a06493a47aed27434331b4c68/2.gif" /&#62;Check out my code on GitHub. &#38;nbsp;


&#60;img width="940" height="788" width_o="940" height_o="788" data-src="https://freight.cargo.site/t/original/i/949299db3987d31a0c429ceaa715696c72755b43a0373c54c4685d37b809553f/4.gif" data-mid="214148543" border="0"  src="https://freight.cargo.site/w/940/i/949299db3987d31a0c429ceaa715696c72755b43a0373c54c4685d37b809553f/4.gif" /&#62;&#60;img width="940" height="788" width_o="940" height_o="788" data-src="https://freight.cargo.site/t/original/i/b9f70aecbb3443462d1bc4414d513f404165efec7b28531420fdb053f7217454/5.gif" data-mid="214148544" border="0"  src="https://freight.cargo.site/w/940/i/b9f70aecbb3443462d1bc4414d513f404165efec7b28531420fdb053f7217454/5.gif" /&#62;

&#60;img width="940" height="788" width_o="940" height_o="788" data-src="https://freight.cargo.site/t/original/i/83e7a63b1c7fe2846f6c9793f71efa445f723328deaebe412cca3f1bdb9828e7/6.gif" data-mid="214148541" border="0"  src="https://freight.cargo.site/w/940/i/83e7a63b1c7fe2846f6c9793f71efa445f723328deaebe412cca3f1bdb9828e7/6.gif" /&#62;
&#60;img width="940" height="788" width_o="940" height_o="788" data-src="https://freight.cargo.site/t/original/i/1ef68c5e97c420baa027e5a56df7d7010257ca174bad417fecd5510b9d8fed15/7.gif" data-mid="214148542" border="0"  src="https://freight.cargo.site/w/940/i/1ef68c5e97c420baa027e5a56df7d7010257ca174bad417fecd5510b9d8fed15/7.gif" /&#62;


</description>
		
	</item>
		
		
	<item>
		<title>Assisted Reality (AR)</title>
				
		<link>https://brandikinard.com/Assisted-Reality-AR</link>

		<pubDate>Thu, 25 May 2023 12:00:32 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/Assisted-Reality-AR</guid>

		<description>
	
	&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/521b76f76ede90ffca1aee2133fb8dc1c1b8cd89615f366027dd43582d1b2bca/slide-2.jpeg" data-mid="179929240" border="0"  src="https://freight.cargo.site/w/1000/i/521b76f76ede90ffca1aee2133fb8dc1c1b8cd89615f366027dd43582d1b2bca/slide-2.jpeg" /&#62;
	

	Future of Work: Non-Obstructive Assisted Reality (AR)
In this project, I explored the many possibilities for the future of work for modern frontline workers. As hybrid work becomes the new norm, a digitally empowering deskless workforce will provide organizations a competitive edge.Role — list of roles

	
	&#60;img width="1000" height="343" width_o="1000" height_o="343" data-src="https://freight.cargo.site/t/original/i/95af0ae4448647f9ff78c09f7f118a3ed627377347a671850b5880b29129ff34/Headwear-HMT-1-Side-1.png" data-mid="179929497" border="0"  src="https://freight.cargo.site/w/1000/i/95af0ae4448647f9ff78c09f7f118a3ed627377347a671850b5880b29129ff34/Headwear-HMT-1-Side-1.png" /&#62;For this project, I used RealWear head-mounted displays, which allow the modern frontline workforce to connect with experts and access information in real-time while freeing their hands to enhance safety, collaborate, and reduce equipment downtime.To showcase this technology, I developed a proof of concept for the Vantage application on RealWear. RealWear is an assisted reality HMD. At the time, the Vantage app was already available on mobile devices, but it had not yet been introduced to HMDs. With this project, I initiated that introduction.


&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/4c683ee464b666498006d6d7186fc49d8d41f41e3580865b1e15cfe12233fa82/slide-4.jpg" data-mid="179932987" border="0"  src="https://freight.cargo.site/w/1000/i/4c683ee464b666498006d6d7186fc49d8d41f41e3580865b1e15cfe12233fa82/slide-4.jpg" /&#62;
In this project, I used instructions for making a PB&#38;amp;J sandwich as a parody of work instructions.

&#60;img width="838" height="546" width_o="838" height_o="546" data-src="https://freight.cargo.site/t/original/i/16e590e84f68339aa9c376c0d6c5139aca4cae28bdefcffe2bc3f367e8f2491f/image-1.png" data-mid="179933838" border="0"  src="https://freight.cargo.site/w/838/i/16e590e84f68339aa9c376c0d6c5139aca4cae28bdefcffe2bc3f367e8f2491f/image-1.png" /&#62;
&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/ed4069f00b97a82728820977bca64bd7401fcc3c97d62c4183f144e523d9a880/slide-5.jpg" data-mid="179932996" border="0"  src="https://freight.cargo.site/w/1000/i/ed4069f00b97a82728820977bca64bd7401fcc3c97d62c4183f144e523d9a880/slide-5.jpg" /&#62;

Check out some of the sketches for the project:
Low-Fidelity Sketches
&#60;img width="854" height="480" width_o="854" height_o="480" data-src="https://freight.cargo.site/t/original/i/c796526fac4036b83473e92d89f6a61758855aca0aef95d209b545a6e51d977b/Untitled_Artwork-5-6.png" data-mid="179932660" border="0"  src="https://freight.cargo.site/w/854/i/c796526fac4036b83473e92d89f6a61758855aca0aef95d209b545a6e51d977b/Untitled_Artwork-5-6.png" /&#62;
&#60;img width="854" height="480" width_o="854" height_o="480" data-src="https://freight.cargo.site/t/original/i/fcd2b2d346337c830db72bdc2ea70a96c8e6a478a4f84263d681e3b708db6c2f/Untitled_Artwork-7-2.png" data-mid="179932663" border="0"  src="https://freight.cargo.site/w/854/i/fcd2b2d346337c830db72bdc2ea70a96c8e6a478a4f84263d681e3b708db6c2f/Untitled_Artwork-7-2.png" /&#62;


High-Fidelity Sketches
Procedure Overview - a summary of the steps for making a PB&#38;amp;J sandwich.
&#60;img width="854" height="480" width_o="854" height_o="480" data-src="https://freight.cargo.site/t/original/i/442b1213e24e672f4ae55a66a2b081304e6f2b5a3ec7646f7cf8d0fc65c9c263/Procedure-Overview.png" data-mid="179932310" border="0"  src="https://freight.cargo.site/w/854/i/442b1213e24e672f4ae55a66a2b081304e6f2b5a3ec7646f7cf8d0fc65c9c263/Procedure-Overview.png" /&#62;
&#60;img width="858" height="484" width_o="858" height_o="484" data-src="https://freight.cargo.site/t/original/i/164de960bcf5c8ee53a7fcec5a4dfcd5bd611325579ada2c7ce9f99cdd39515e/Media-Viewer---video-player---video-paused-state.png" data-mid="179932700" border="0"  src="https://freight.cargo.site/w/858/i/164de960bcf5c8ee53a7fcec5a4dfcd5bd611325579ada2c7ce9f99cdd39515e/Media-Viewer---video-player---video-paused-state.png" /&#62;
&#60;img width="854" height="480" width_o="854" height_o="480" data-src="https://freight.cargo.site/t/original/i/35fb746b60cdfada112fd7e8cfa5f842c654718680d822c02e01bf8959b34297/Step-Card---final-step.png" data-mid="179932722" border="0"  src="https://freight.cargo.site/w/854/i/35fb746b60cdfada112fd7e8cfa5f842c654718680d822c02e01bf8959b34297/Step-Card---final-step.png" /&#62;
&#60;img width="855" height="480" width_o="855" height_o="480" data-src="https://freight.cargo.site/t/original/i/d13ba314d0c551ff09887e877ddd4862e55acb3ac150fe607f9713f3b5b8b417/Submission-Review---Pagination-Steps-6-9.png" data-mid="179932822" border="0"  src="https://freight.cargo.site/w/855/i/d13ba314d0c551ff09887e877ddd4862e55acb3ac150fe607f9713f3b5b8b417/Submission-Review---Pagination-Steps-6-9.png" /&#62;


User Flow and Edge Cases
&#60;img width="1544" height="763" width_o="1544" height_o="763" data-src="https://freight.cargo.site/t/original/i/a58de20b6dc56063ce68adda02d163ee64f36f09d1eac4dbb3d892eed13e104f/image-13.png" data-mid="179932435" border="0"  src="https://freight.cargo.site/w/1000/i/a58de20b6dc56063ce68adda02d163ee64f36f09d1eac4dbb3d892eed13e104f/image-13.png" /&#62;close up shot
&#60;img width="1362" height="891" width_o="1362" height_o="891" data-src="https://freight.cargo.site/t/original/i/8341bb06c3d03735f232886bff1d772ca65de5f70d9440c43963c9f6f7cd2127/image-14.png" data-mid="179932583" border="0"  src="https://freight.cargo.site/w/1000/i/8341bb06c3d03735f232886bff1d772ca65de5f70d9440c43963c9f6f7cd2127/image-14.png" /&#62;
I had a blast working on this project and exploring the possibilities of non-obstructive assisted reality. Not only does this technology have the potential to revolutionize the way we work, but it also has the potential to increase safety and efficiency in the workplace.


Don't forget to check out the Vantage app I designed as the Lead Designer on the Vuforia Mixed Reality HMD team at PTC, which is available on the RealWear Marketplace.
&#60;img width="400" height="400" width_o="400" height_o="400" data-src="https://freight.cargo.site/t/original/i/a567cd7c78cbd1d1b6bff4ae88c49d0e4c73e2a17eb1e2c61d9b735c2e791040/xthumb-front_angle.png.pagespeed.ic.O2KCRAZXUy.png" data-mid="179933051" border="0"  src="https://freight.cargo.site/w/400/i/a567cd7c78cbd1d1b6bff4ae88c49d0e4c73e2a17eb1e2c61d9b735c2e791040/xthumb-front_angle.png.pagespeed.ic.O2KCRAZXUy.png" /&#62;

	
</description>
		
	</item>
		
		
	<item>
		<title>ARSG Design System</title>
				
		<link>https://brandikinard.com/ARSG-Design-System</link>

		<pubDate>Tue, 26 Dec 2023 19:38:23 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/ARSG-Design-System</guid>

		<description>
	
	&#60;img width="1218" height="900" width_o="1218" height_o="900" data-src="https://freight.cargo.site/t/original/i/01ef9c5c213dbe34aad416229b0f5236b9ab718a7e8877c0640b89e320fe4707/Frame-433453147.png" data-mid="200159232" border="0"  src="https://freight.cargo.site/w/1000/i/01ef9c5c213dbe34aad416229b0f5236b9ab718a7e8877c0640b89e320fe4707/Frame-433453147.png" /&#62;
	

	AR Smart Glasses Design SystemAs a visionary behind the AR Smart Glasses Design System, I've redefined the interaction paradigm for Meta Ray-Ban Smart Glasses and the companion Meta Wearables App (MWA), merging sleek design with unparalleled functionality.
Role — Production Designer, System Librarian

	
	&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/b7662ac7899cb82ad3ace5dacc9ad740e6251b87bd14a1c4beb91542770f6384/Supernova_Marketing_2.png" data-mid="200158695" border="0"  src="https://freight.cargo.site/w/1000/i/b7662ac7899cb82ad3ace5dacc9ad740e6251b87bd14a1c4beb91542770f6384/Supernova_Marketing_2.png" /&#62;

My role was pivotal - curating and managing the system's library, ensuring each component not only aligned with our visionary standards but also enhanced the user experience. I spearheaded the design, implementation, and scalability of our system, making sure every pattern and UI template propelled efficiency and innovation. My rigorous attention to detail ensured that each element was optimized for performance and aesthetics.

&#60;img width="512" height="341" width_o="512" height_o="341" data-src="https://freight.cargo.site/t/original/i/d1abc862ab02da2abf5133d9d50f0e4c66d69074c7d8e79df5d33f25b1a29ffd/unnamed.jpg" data-mid="200169268" border="0" data-scale="100" src="https://freight.cargo.site/w/512/i/d1abc862ab02da2abf5133d9d50f0e4c66d69074c7d8e79df5d33f25b1a29ffd/unnamed.jpg" /&#62;My mission was ambitious: to transcend the conventional boundaries of AR and wearable technology. I achieved this by crafting a design system that stands as a benchmark in the industry, elevating the everyday experience of users worldwide.
&#60;img width="512" height="288" width_o="512" height_o="288" data-src="https://freight.cargo.site/t/original/i/8f567ed29561294d677ea9e5c423af4485c1683d69c51fdaa305981a0e510ab7/unnamed.gif" data-mid="200169150" border="0" data-scale="100" src="https://freight.cargo.site/w/512/i/8f567ed29561294d677ea9e5c423af4485c1683d69c51fdaa305981a0e510ab7/unnamed.gif" /&#62;
In collaboration with Ray-Ban, Meta Reality Labs fashioned not just smart glasses but a symbol of the seamless integration of technology and style. The Meta Ray-Ban Smart Glasses are more than a product; they're a testament to what happens when imagination meets innovation.
&#60;img width="1532" height="862" width_o="1532" height_o="862" data-src="https://freight.cargo.site/t/original/i/190861b39a23a2b119972c6351b28bfa8d2154d80c153104045bcfb42cd04d16/Frame-433452678saa1.png" data-mid="200170364" border="0" data-scale="56" src="https://freight.cargo.site/w/1000/i/190861b39a23a2b119972c6351b28bfa8d2154d80c153104045bcfb42cd04d16/Frame-433452678saa1.png" /&#62;&#60;img width="1063" height="276" width_o="1063" height_o="276" data-src="https://freight.cargo.site/t/original/i/6e576cb7cbfdbd715093ed7278ef204a5f5fbe40dea7928a2056a7bbaed7ac11/Frame-433452678saa123w.png" data-mid="200170894" border="0" data-scale="56" src="https://freight.cargo.site/w/1000/i/6e576cb7cbfdbd715093ed7278ef204a5f5fbe40dea7928a2056a7bbaed7ac11/Frame-433452678saa123w.png" /&#62;&#60;img width="951" height="501" width_o="951" height_o="501" data-src="https://freight.cargo.site/t/original/i/b4778f6a82802ab961788b677c48b025fa464de787505b35a906d89e0fd19195/Frame-433452678saa5.png" data-mid="200170708" border="0" data-scale="56" src="https://freight.cargo.site/w/951/i/b4778f6a82802ab961788b677c48b025fa464de787505b35a906d89e0fd19195/Frame-433452678saa5.png" /&#62;
&#60;img width="1752" height="926" width_o="1752" height_o="926" data-src="https://freight.cargo.site/t/original/i/5bc36e72c6dbf80a414cb602f80f4004aac7e82f8907c506e0bf42e3162eebce/Frame-433452678saa2asfa.png" data-mid="200170948" border="0" data-scale="56" src="https://freight.cargo.site/w/1000/i/5bc36e72c6dbf80a414cb602f80f4004aac7e82f8907c506e0bf42e3162eebce/Frame-433452678saa2asfa.png" /&#62;
&#60;img width="1744" height="661" width_o="1744" height_o="661" data-src="https://freight.cargo.site/t/original/i/2fc25dcbeafd8d1ddcf4a1c76244bc64ecbb8883023adc4235980e6a254f2f73/Frame-sdg-vssdg.png" data-mid="200171147" border="0" data-scale="56" src="https://freight.cargo.site/w/1000/i/2fc25dcbeafd8d1ddcf4a1c76244bc64ecbb8883023adc4235980e6a254f2f73/Frame-sdg-vssdg.png" /&#62;
&#60;img width="1548" height="541" width_o="1548" height_o="541" data-src="https://freight.cargo.site/t/original/i/f0160757fe3500c02bf5cc70ab883e412fab752d01ee617d687701e2b57cdcc7/Frame-sdg-vssdg1.png" data-mid="200171224" border="0" data-scale="56" src="https://freight.cargo.site/w/1000/i/f0160757fe3500c02bf5cc70ab883e412fab752d01ee617d687701e2b57cdcc7/Frame-sdg-vssdg1.png" /&#62;
&#60;img width="524" height="300" width_o="524" height_o="300" data-src="https://freight.cargo.site/t/original/i/d1fb7f535e4f4c853da533ad82d6141991daaab98dfa2a494efabb6e990f6500/Frame-sdgefwe.png" data-mid="200171283" border="0" data-scale="100" src="https://freight.cargo.site/w/524/i/d1fb7f535e4f4c853da533ad82d6141991daaab98dfa2a494efabb6e990f6500/Frame-sdgefwe.png" /&#62;


	&#60;img width="590" height="926" width_o="590" height_o="926" data-src="https://freight.cargo.site/t/original/i/90fc61516708667bfe9abe1ea4b3faed657354a0a59350103b9882a02ce678b5/Frame-433452678saa4.png" data-mid="200170705" border="0"  src="https://freight.cargo.site/w/590/i/90fc61516708667bfe9abe1ea4b3faed657354a0a59350103b9882a02ce678b5/Frame-433452678saa4.png" /&#62;

	With an eye for intuitive interaction and visual harmony, I've ensured that our design system embodies sophistication and ease. Each UI element, from the share bar to the AI features, is a tribute to our commitment to excellence and user-centric design.
	

&#60;img width="512" height="288" width_o="512" height_o="288" data-src="https://freight.cargo.site/t/original/i/ac460e6cbef7d7d79928c360f36c3f5db513aae7d18f39e7576a21a8da24ba5b/unnamed-2.gif" data-mid="200169147" border="0" data-scale="100" src="https://freight.cargo.site/w/512/i/ac460e6cbef7d7d79928c360f36c3f5db513aae7d18f39e7576a21a8da24ba5b/unnamed-2.gif" /&#62;As a key figure in Product Design, my contributions extended to pioneering the Multi-Modal AI feature. This groundbreaking work included crafting user interfaces and interactions that leverage AI to revolutionize how we perceive and interact with the world. From gesture controls to advanced analytics, each component I designed was a step towards a more intuitive and personalized user journey.

&#60;img width="1921" height="1080" width_o="1921" height_o="1080" data-src="https://freight.cargo.site/t/original/i/fe975d394813650d279724a77467a86abaeeef5586b45163d7e378d2751e4484/Multi-modal-Boutique.png" data-mid="200158684" border="0"  src="https://freight.cargo.site/w/1000/i/fe975d394813650d279724a77467a86abaeeef5586b45163d7e378d2751e4484/Multi-modal-Boutique.png" /&#62;
Imagine pointing your smart glasses at a scene and engaging in a dynamic, informative conversation with AI. That's the reality I've helped create...

	
	&#60;img width="1921" height="1080" width_o="1921" height_o="1080" data-src="https://freight.cargo.site/t/original/i/3b4f9c183afcfd2b1aec952bd562e3d56402e9d55ca13e07e73f0dbe11998f80/Multi-modal-Boutique2.png" data-mid="200158685" border="0"  src="https://freight.cargo.site/w/1000/i/3b4f9c183afcfd2b1aec952bd562e3d56402e9d55ca13e07e73f0dbe11998f80/Multi-modal-Boutique2.png" /&#62;
&#60;img width="1921" height="1080" width_o="1921" height_o="1080" data-src="https://freight.cargo.site/t/original/i/8d2c5cf20b9f0592dafca5b72702d6036ded5342e52aeb726cbf19e1197121b0/Multi-modal-Cafe2.png" data-mid="200158688" border="0"  src="https://freight.cargo.site/w/1000/i/8d2c5cf20b9f0592dafca5b72702d6036ded5342e52aeb726cbf19e1197121b0/Multi-modal-Cafe2.png" /&#62;
	&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/4754077c95200cae2ce34b0ed5ebfc5f39301c583dfea522cc532a493ca11133/Multi-modal-Building-01.png" data-mid="200158686" border="0"  src="https://freight.cargo.site/w/1000/i/4754077c95200cae2ce34b0ed5ebfc5f39301c583dfea522cc532a493ca11133/Multi-modal-Building-01.png" /&#62;
&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/04765c3c6f5fb4116f603381dae4313f46a39eac3e33c3a7ffeb0a56f015004e/Barbecue-use-case.png" data-mid="200171064" border="0"  src="https://freight.cargo.site/w/1000/i/04765c3c6f5fb4116f603381dae4313f46a39eac3e33c3a7ffeb0a56f015004e/Barbecue-use-case.png" /&#62;

	
	 The Multi-Modal AI feature isn't just innovative—it's intuitive, bringing the digital and physical worlds closer than ever.

&#60;img width="1197" height="672" width_o="1197" height_o="672" data-src="https://freight.cargo.site/t/original/i/f08c934ebf15877021e75c0b3ace53b1115edb7ef0be7c7b8e14f459d43a5b44/Screenshot-2023-12-26-at-11.20.31PM.png" data-mid="200171763" border="0"  src="https://freight.cargo.site/w/1000/i/f08c934ebf15877021e75c0b3ace53b1115edb7ef0be7c7b8e14f459d43a5b44/Screenshot-2023-12-26-at-11.20.31PM.png" /&#62;This feature stands as a testament to my unwavering commitment to innovation and excellence in AR. It's not just about the assets; it's about leaping into the future of AR user experiences.&#38;nbsp;
&#60;img width="1920" height="1081" width_o="1920" height_o="1081" data-src="https://freight.cargo.site/t/original/i/bfa2362eb1a50dc9ee4767820c040442e05c1afd568bd35c4df13926f83de02c/Slide2.png" data-mid="200158704" border="0" data-scale="53" src="https://freight.cargo.site/w/1000/i/bfa2362eb1a50dc9ee4767820c040442e05c1afd568bd35c4df13926f83de02c/Slide2.png" /&#62;Embark on a journey of innovation and user delight with Meta's AR Smart Glasses Design System and Meta Wearables App. I'm proud to be at the forefront of this exciting new era in augmented reality.

&#60;img width="186" height="186" width_o="186" height_o="186" data-src="https://freight.cargo.site/t/original/i/72ac686e3fed41187b1aa44749f399ea0f01194440a30c2ef288f8cb1812df65/Illustration.png" data-mid="200171108" border="0"  src="https://freight.cargo.site/w/186/i/72ac686e3fed41187b1aa44749f399ea0f01194440a30c2ef288f8cb1812df65/Illustration.png" /&#62;
	

</description>
		
	</item>
		
		
	<item>
		<title>AR Demo Summit</title>
				
		<link>https://brandikinard.com/AR-Demo-Summit</link>

		<pubDate>Tue, 26 Dec 2023 17:48:29 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/AR-Demo-Summit</guid>

		<description>
	
	&#60;img width="2400" height="600" width_o="2400" height_o="600" data-src="https://freight.cargo.site/t/original/i/c2b4b7b3c8362629ccd8c5dd45f6c7e317c8a5f61db2bd49f40246e28ccaeab1/BANNER-LOGO.png" data-mid="200150765" border="0"  src="https://freight.cargo.site/w/1000/i/c2b4b7b3c8362629ccd8c5dd45f6c7e317c8a5f61db2bd49f40246e28ccaeab1/BANNER-LOGO.png" /&#62;
	

	AR Demo SummitWelcome to my creative journey in crafting unforgettable branding experiences for high-profile conferences like the AR Demo Summit at Meta.Role — Creative Visionary, Production Artist

	
It all begins with a ping from a big wig in the company... &#60;img width="388" height="350" width_o="388" height_o="350" data-src="https://freight.cargo.site/t/original/i/87cab400e006bb09726aec7883ec5ea8a7bae19463c96c04a2dc096bbbb2c5a2/Screenshot-2023-12-26-at-1.10.25PM.png" data-mid="200149600" border="0"  src="https://freight.cargo.site/w/388/i/87cab400e006bb09726aec7883ec5ea8a7bae19463c96c04a2dc096bbbb2c5a2/Screenshot-2023-12-26-at-1.10.25PM.png" /&#62;
This is the familiar starting point for many of my conference-related projects — someone entrusting me with the visual branding, because my expertise is highly regarded. After all, you can’t spell 'Branding' without 'Brandi' (that's me).&#38;nbsp;
&#60;img width="1000" height="1000" width_o="1000" height_o="1000" data-src="https://freight.cargo.site/t/original/i/94767f6e3f0e98162b5a8b7e2cc53918c0af79a72492b09bf5d52a2d544b6549/Frame-1010105980.png" data-mid="200153579" border="0" data-scale="34" src="https://freight.cargo.site/w/1000/i/94767f6e3f0e98162b5a8b7e2cc53918c0af79a72492b09bf5d52a2d544b6549/Frame-1010105980.png" /&#62;
This time, I faced an exciting challenge with a tight deadline of just around 2.5 weeks. My mission: to create stunning branding materials—posters, booth signage, forms, demo lists, stickers, and more—for Meta Reality Labs' prestigious AR Demo Summit.&#60;img width="1000" height="1000" width_o="1000" height_o="1000" data-src="https://freight.cargo.site/t/original/i/c226351477da831e36ac3ea349f7ec59004b39690f697e7f822f7f208e11d8ee/Frame-1010105981.png" data-mid="200153578" border="0" data-scale="27" src="https://freight.cargo.site/w/1000/i/c226351477da831e36ac3ea349f7ec59004b39690f697e7f822f7f208e11d8ee/Frame-1010105981.png" /&#62;

&#60;img width="1440" height="1920" width_o="1440" height_o="1920" data-src="https://freight.cargo.site/t/original/i/2f8f97ba539fb8edfb60520620485f4603304b204f896d6ad9169e42e0495c61/image-1059.png" data-mid="200149452" border="0"  src="https://freight.cargo.site/w/1000/i/2f8f97ba539fb8edfb60520620485f4603304b204f896d6ad9169e42e0495c61/image-1059.png" /&#62;The AR Demo Summit is a dazzling showcase of the latest Augmented Reality (AR) technology.
&#60;img width="3000" height="1688" width_o="3000" height_o="1688" data-src="https://freight.cargo.site/t/original/i/2780bca28e694f97a9bfca4dd58f29032dae3f905a8c03f4a70a72e47ccbd33c/369515898_707562827671519_6788039569246032534_n.png" data-mid="200149521" border="0"  src="https://freight.cargo.site/w/1000/i/2780bca28e694f97a9bfca4dd58f29032dae3f905a8c03f4a70a72e47ccbd33c/369515898_707562827671519_6788039569246032534_n.png" /&#62;

&#60;img width="4096" height="3451" width_o="4096" height_o="3451" data-src="https://freight.cargo.site/t/original/i/a18176c6558933c5eb96378add1318b1431aa97aee106fff3748a7612c764113/368498708_644060014571513_7586506823347770902_n.png" data-mid="200149520" border="0" data-scale="58" src="https://freight.cargo.site/w/1000/i/a18176c6558933c5eb96378add1318b1431aa97aee106fff3748a7612c764113/368498708_644060014571513_7586506823347770902_n.png" /&#62;&#38;nbsp; &#38;nbsp;&#60;img width="1536" height="2048" width_o="1536" height_o="2048" data-src="https://freight.cargo.site/t/original/i/c3b9d218868da29cb95c2b7184e1a6fddd1054351430213b0291fcdd6bb3fd8f/image-1053.png" data-mid="200149470" border="0" data-scale="37" src="https://freight.cargo.site/w/1000/i/c3b9d218868da29cb95c2b7184e1a6fddd1054351430213b0291fcdd6bb3fd8f/image-1053.png" /&#62;It unites developers, designers, and industry leaders to share their innovations and insights. &#60;img width="1920" height="1440" width_o="1920" height_o="1440" data-src="https://freight.cargo.site/t/original/i/8fc8493efcbcd5be71a8bf92e44928d6a8566a6e211b4e9ea60805830819521d/image-1060.png" data-mid="200149464" border="0"  src="https://freight.cargo.site/w/1000/i/8fc8493efcbcd5be71a8bf92e44928d6a8566a6e211b4e9ea60805830819521d/image-1060.png" /&#62;The summit features live demos, captivating presentations, and immersive workshops on diverse AR topics, from hardware to software and user experience. It's an opportunity for attendees to witness the cutting edge of AR technology and ignite their own creative spark.
&#60;img width="5547" height="1382" width_o="5547" height_o="1382" data-src="https://freight.cargo.site/t/original/i/67f8de570f8fb49f5a8e18d50a53d2af2ffb1d8cdd69b2251aec028f8e4ea95e/flowersstickers.png" data-mid="200151048" border="0"  src="https://freight.cargo.site/w/1000/i/67f8de570f8fb49f5a8e18d50a53d2af2ffb1d8cdd69b2251aec028f8e4ea95e/flowersstickers.png" /&#62;

&#60;img width="884" height="1244" width_o="884" height_o="1244" data-src="https://freight.cargo.site/t/original/i/876b193e72d5e39d5f989fda82951c50da6fddfdcd4afca873d8cf18b5d88d26/400787030_1546042646205767_2529237458436671664_n.png" data-mid="200149526" border="0" data-scale="38" src="https://freight.cargo.site/w/884/i/876b193e72d5e39d5f989fda82951c50da6fddfdcd4afca873d8cf18b5d88d26/400787030_1546042646205767_2529237458436671664_n.png" /&#62; &#38;nbsp; &#60;img width="2048" height="2287" width_o="2048" height_o="2287" data-src="https://freight.cargo.site/t/original/i/0d52f2dc49e52edeb8f22686fd2349e8539bda06edef54e6373b3ea0771dc7ca/400700858_356308276903319_8060445419981837733_n.png" data-mid="200149524" border="0" data-scale="47" src="https://freight.cargo.site/w/1000/i/0d52f2dc49e52edeb8f22686fd2349e8539bda06edef54e6373b3ea0771dc7ca/400700858_356308276903319_8060445419981837733_n.png" /&#62;&#38;nbsp; &#38;nbsp;&#60;img width="4096" height="819" width_o="4096" height_o="819" data-src="https://freight.cargo.site/t/original/i/71724e6135d413a5208795412434691b4d4a63baecfd215bc7eb8f2ae12da7c1/403401835_295276003484357_7353424660152005918_n.png" data-mid="200149527" border="0"  src="https://freight.cargo.site/w/1000/i/71724e6135d413a5208795412434691b4d4a63baecfd215bc7eb8f2ae12da7c1/403401835_295276003484357_7353424660152005918_n.png" /&#62;

&#60;img width="2016" height="1134" width_o="2016" height_o="1134" data-src="https://freight.cargo.site/t/original/i/212025335fdc9965aeafaf9006a16c26eda9e6277b09b4e8d0eb87771bb93307/386845798_741516030644325_3132439238470349993_n.jpg" data-mid="200149522" border="0"  src="https://freight.cargo.site/w/1000/i/212025335fdc9965aeafaf9006a16c26eda9e6277b09b4e8d0eb87771bb93307/386845798_741516030644325_3132439238470349993_n.jpg" /&#62;
&#60;img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/61526ca871169877ab36cc4043e114c502d682c856ae615e88714e10fc514cec/image-1052.png" data-mid="200149471" border="0"  src="https://freight.cargo.site/w/1000/i/61526ca871169877ab36cc4043e114c502d682c856ae615e88714e10fc514cec/image-1052.png" /&#62;
And it concluded with heartfelt gratitude...

&#60;img width="794" height="282" width_o="794" height_o="282" data-src="https://freight.cargo.site/t/original/i/69301732cc0f450737c495d44eab8619354e5fc12dd6657f441d571da9efc744/thanks2.png" data-mid="200153284" border="0"  src="https://freight.cargo.site/w/794/i/69301732cc0f450737c495d44eab8619354e5fc12dd6657f441d571da9efc744/thanks2.png" /&#62;


&#60;img width="1000" height="1000" width_o="1000" height_o="1000" data-src="https://freight.cargo.site/t/original/i/8cbafe8432acd236c4db25578766f69625d75a3e764dfb2cae89ab5289dd5b71/Frame-1010105983.png" data-mid="200153574" border="0" data-scale="29" src="https://freight.cargo.site/w/1000/i/8cbafe8432acd236c4db25578766f69625d75a3e764dfb2cae89ab5289dd5b71/Frame-1010105983.png" /&#62;


</description>
		
	</item>
		
		
	<item>
		<title>AR Spatial Training</title>
				
		<link>https://brandikinard.com/AR-Spatial-Training</link>

		<pubDate>Sat, 15 Aug 2020 17:34:21 +0000</pubDate>

		<dc:creator>Brandi Kinard</dc:creator>

		<guid isPermaLink="true">https://brandikinard.com/AR-Spatial-Training</guid>

		<description>
	
	&#60;img width="1594" height="894" width_o="1594" height_o="894" data-src="https://freight.cargo.site/t/original/i/889591b1f92ac8249b78679ae105f1ddc187de90f2a5f50fe12dde8d06239f7d/QR_code_scan_01.gif" data-mid="179899635" border="0"  src="https://freight.cargo.site/w/1000/i/889591b1f92ac8249b78679ae105f1ddc187de90f2a5f50fe12dde8d06239f7d/QR_code_scan_01.gif" /&#62;
	

	AR Solutions for Spatial Training
As the Lead Augmented Reality Designer for the Vuforia Mixed Reality HMD (head-mounted display) team at PTC, I helped shape the vision for our customers' workflow and worked on industrial AR spatial training. Here's an overview of my work:

Role(s) — Augmented Reality Prototyping, Unity Development, UX Design, Technical Writing, Pilot Testing

	
	&#60;img width="1280" height="720" width_o="1280" height_o="720" data-src="https://freight.cargo.site/t/original/i/767ca2db924e8282e55e176730965fad65d5dd5616d68f8e3e66c7a2f16a395b/image-1.jpg" data-mid="179900512" border="0"  src="https://freight.cargo.site/w/1000/i/767ca2db924e8282e55e176730965fad65d5dd5616d68f8e3e66c7a2f16a395b/image-1.jpg" /&#62;

	
Spatial computing is the future! With digital twin renderings, machines can interact seamlessly with people in their environment. Vuforia AR Enterprise suite of applications is a unique solution for large persistent AR experiences. It enables companies to close the loop on performance management, improve machine learning capabilities with spatial analytics, and optimize design and factory floor operations.

	
	&#60;img width="446" height="486" width_o="446" height_o="486" data-src="https://freight.cargo.site/t/original/i/52b734e1dabbf9fa47a871f715677f6cda4cc2926b8884143776e86369764546/Untitled-2.png" data-mid="179901464" border="0"  src="https://freight.cargo.site/w/446/i/52b734e1dabbf9fa47a871f715677f6cda4cc2926b8884143776e86369764546/Untitled-2.png" /&#62;
	I helped build the Vuforia AR Enterprise Product Portfolio to help customers drive digital transformation and improve productivity. Think of me as someone who can help create these digital twin experiences for companies!


Spatial Computing + AR Vision&#60;img width="1920" height="1082" width_o="1920" height_o="1082" data-src="https://freight.cargo.site/t/original/i/bddf5f80068bb8266fe47a9c82e643513e379ea7e3fb0edf109f0d87e50ade5a/Untitled-3.png" data-mid="179901924" border="0"  src="https://freight.cargo.site/w/1000/i/bddf5f80068bb8266fe47a9c82e643513e379ea7e3fb0edf109f0d87e50ade5a/Untitled-3.png" /&#62;The factory floor of the future calls for ‘Augmented Factory Operations’ at scale by providing individual frontline workers with digital tools designed to enhance the way they work.

Build an Industrial AR cloud (”Metaverse”) &#60;img width="1920" height="1054" width_o="1920" height_o="1054" data-src="https://freight.cargo.site/t/original/i/eee2e6b4b5b756558142d93a64d8fc28266d41703c030d4d92d9622ca2b5e05e/Untitled-5.png" data-mid="179901947" border="0"  src="https://freight.cargo.site/w/1000/i/eee2e6b4b5b756558142d93a64d8fc28266d41703c030d4d92d9622ca2b5e05e/Untitled-5.png" /&#62;
A scalable, persistent and spatial fabric that enables augmented reality operations at scale by:

Providing tools that help gain context from the environment &#38;amp; contribute information back to the space.Facilitating relevant data &#38;amp; content to be spatially organized &#38;amp; accessible in the right place &#38;amp; at the right time (data/content could be IoT, PLM, ERP, MES, Documentation).Enhancing collaboration &#38;amp; visibility with a shared perspective or spaces across multiple parties.Expanding upon the functionality of other Vuforia solutions allowing them to scale spatially (spatially locatable/searchable procedures, Chalk calls, etc.).
What is a “Spatial Digital Twin”?&#60;img width="2344" height="1436" width_o="2344" height_o="1436" data-src="https://freight.cargo.site/t/original/i/302e358f91e4713506395f5df287fae6b40b9ab44dac25cd72cca5cd175f80e7/Untitled-6.png" data-mid="179902432" border="0"  src="https://freight.cargo.site/w/1000/i/302e358f91e4713506395f5df287fae6b40b9ab44dac25cd72cca5cd175f80e7/Untitled-6.png" /&#62;

A “Spatial Digital Twin” is a collaborative, persistent, world-locked digital virtualization of a physical environment used to facilitate a bi-directional transfer of data between the digital &#38;amp; physical worlds.It is accessible by parties on-site by superimposing context with an augmented overlay of the twin against the environment, and accessible by remote partiesSpatial Digital Twins can be used for: Contextualizing objects with a space with digital information curated for maximizing the productivity of individual roles; enabling a multi-party spatial communication medium that can use the topology of the environment as a canvas for collaboration; unlocking a new dimension of spatial traceability&#60;img width="2344" height="1044" width_o="2344" height_o="1044" data-src="https://freight.cargo.site/t/original/i/41db17550f9e11086c02c4666e62709449224d4e77a5dccb900cfbc4e4e341d7/Untitled-12.png" data-mid="179903617" border="0"  src="https://freight.cargo.site/w/1000/i/41db17550f9e11086c02c4666e62709449224d4e77a5dccb900cfbc4e4e341d7/Untitled-12.png" /&#62;
&#60;img width="2344" height="1044" width_o="2344" height_o="1044" data-src="https://freight.cargo.site/t/original/i/18accd11dc66ef4b178a09dcfb2c40d303d38587f178cb1e5477f6477426236d/Untitled-11.png" data-mid="179903624" border="0"  src="https://freight.cargo.site/w/1000/i/18accd11dc66ef4b178a09dcfb2c40d303d38587f178cb1e5477f6477426236d/Untitled-11.png" /&#62;

Hypothesis: Value of Spatial Digital Twin&#60;img width="2344" height="1044" width_o="2344" height_o="1044" data-src="https://freight.cargo.site/t/original/i/c7b46f96b9c60bed0d2943a55c333943113730a3c3b36ecb8aff63b4717d9788/Untitled-10.png" data-mid="179903462" border="0"  src="https://freight.cargo.site/w/1000/i/c7b46f96b9c60bed0d2943a55c333943113730a3c3b36ecb8aff63b4717d9788/Untitled-10.png" /&#62;

A Spatial Digital Twin&#38;nbsp;is a collaborative, persistent, world-locked digital virtualization of a physical environment used to facilitate a&#38;nbsp;bi-directional transfer of data between the digital &#38;amp; physical worlds.

Spatial Prototype Workflow
Setup: Develop an environmental model with descriptive labels as temporary placeholders for digital content. Match the model to a 3D scan of the environment using an Area Target. 
&#60;img width="866" height="478" width_o="866" height_o="478" data-src="https://freight.cargo.site/t/original/i/079041b55e7766163e10b4acc1f3c0eab7702e91d5003ebd6d335b31ae79bd43/Untitled-15.png" data-mid="179903962" border="0"  src="https://freight.cargo.site/w/866/i/079041b55e7766163e10b4acc1f3c0eab7702e91d5003ebd6d335b31ae79bd43/Untitled-15.png" /&#62;
“As part of the team, I contributed to building the interaction pattern for creating a 3D scan of a space. This allows the creation of an Area Target, which enables the delivery of augmentations to stationary objects in the scanned environment. For an example of this technology in action, check out the Cereal-ARtist project.”
AuthoringView the model in a dollhouse perspective and attach content to the descriptive placeholders.
&#60;img width="654" height="348" width_o="654" height_o="348" data-src="https://freight.cargo.site/t/original/i/438fafe69af9ac93f794ce2f5dc27a5d6600c372aa9f6d870423bb69dcfdd831/Untitled-16.png" data-mid="179904318" border="0"  src="https://freight.cargo.site/w/654/i/438fafe69af9ac93f794ce2f5dc27a5d6600c372aa9f6d870423bb69dcfdd831/Untitled-16.png" /&#62;Use Vuforia Expert Capture, Vuforia Chalk, and Vuforia Studio AR products to provide in-context operational data &#38;amp; documentation, procedural guidance, spatial assignments &#38;amp; navigation, etc. through the experience.


&#60;img width="1441" height="936" width_o="1441" height_o="936" data-src="https://freight.cargo.site/t/original/i/411aed1f4219f5891dec40ff1f3bd3481ff1445b476efd287ac2988465a21519/Untitled-19.png" data-mid="179908753" border="0"  src="https://freight.cargo.site/w/1000/i/411aed1f4219f5891dec40ff1f3bd3481ff1445b476efd287ac2988465a21519/Untitled-19.png" /&#62;&#60;img width="1404" height="784" width_o="1404" height_o="784" data-src="https://freight.cargo.site/t/original/i/f0a2c8cdc5d7296cd4efce18e4e9928153bf7701bb48bf1dd6675af58afa69dd/Screenshot-2023-05-25-at-3.38.54-AM-1.png" data-mid="179904806" border="0"  src="https://freight.cargo.site/w/1000/i/f0a2c8cdc5d7296cd4efce18e4e9928153bf7701bb48bf1dd6675af58afa69dd/Screenshot-2023-05-25-at-3.38.54-AM-1.png" /&#62;
&#60;img width="701" height="456" width_o="701" height_o="456" data-src="https://freight.cargo.site/t/original/i/9710f59f4404879e7e25d102e895a5b0f1ce48f9bf6af4deb5fed48c44ac928c/image-10.png" data-mid="179908996" border="0"  src="https://freight.cargo.site/w/701/i/9710f59f4404879e7e25d102e895a5b0f1ce48f9bf6af4deb5fed48c44ac928c/image-10.png" /&#62;
“I also contributed to launching the Vuforia Capture app on HoloLens 2. The Vuforia Capture app is an industrial AR app that enables workers to create and share AR content.”

&#60;img width="1482" height="846" width_o="1482" height_o="846" data-src="https://freight.cargo.site/t/original/i/379d6a591502fa45d8bb2f8354f7bb19c5a3efb14f2b9e7f7a5fb3ce0d3a1412/Screenshot-2023-05-25-at-3.41.14-AM.png" data-mid="179904823" border="0"  src="https://freight.cargo.site/w/1000/i/379d6a591502fa45d8bb2f8354f7bb19c5a3efb14f2b9e7f7a5fb3ce0d3a1412/Screenshot-2023-05-25-at-3.41.14-AM.png" /&#62;
ConsumptionUsing Vuforia Vantage AR product, the general idea is that when the app recognizes a QR code, it should inititate the spatial training experience.&#38;nbsp;
&#60;img width="1594" height="894" width_o="1594" height_o="894" data-src="https://freight.cargo.site/t/original/i/889591b1f92ac8249b78679ae105f1ddc187de90f2a5f50fe12dde8d06239f7d/QR_code_scan_01.gif" data-mid="179899635" border="0"  src="https://freight.cargo.site/w/1000/i/889591b1f92ac8249b78679ae105f1ddc187de90f2a5f50fe12dde8d06239f7d/QR_code_scan_01.gif" /&#62;

“In addition to contributing to these apps, I also contributed to launching the Vuforia Vantage app on HoloLens 2, Magic Leap, and RealWear devices. The Vuforia Vantage app is an industrial AR app that enables workers to access digital work instructions, 3D models, and more.”

&#60;img width="2880" height="1872" width_o="2880" height_o="1872" data-src="https://freight.cargo.site/t/original/i/39960e482cdac58a1fa765453df70f0c6bcd01cd2b534505dd234a412f5887b0/Untitled-20.png" data-mid="179909170" border="0"  src="https://freight.cargo.site/w/1000/i/39960e482cdac58a1fa765453df70f0c6bcd01cd2b534505dd234a412f5887b0/Untitled-20.png" /&#62;
&#60;img width="1000" height="651" width_o="1000" height_o="651" data-src="https://freight.cargo.site/t/original/i/4a20d76c782ccff445f3b8d23327a6aa19d79744862af53ab704d93ff4a0e9cd/Untitled-21.png" data-mid="179913194" border="0"  src="https://freight.cargo.site/w/1000/i/4a20d76c782ccff445f3b8d23327a6aa19d79744862af53ab704d93ff4a0e9cd/Untitled-21.png" /&#62;&#60;img width="480" height="320" width_o="480" height_o="320" data-src="https://freight.cargo.site/t/original/i/f43e90ee9ce70d0f01b8975335b0d98cc81169de7e186ac091d7f311fb95bd23/Microsoft-Hololens2.jpg" data-mid="179910358" border="0"  src="https://freight.cargo.site/w/480/i/f43e90ee9ce70d0f01b8975335b0d98cc81169de7e186ac091d7f311fb95bd23/Microsoft-Hololens2.jpg" /&#62;&#60;img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/ad67a08e0a97f2ed8ea100802a3b1e42a50cf2f4558c5f2bbc54fa6bd984edd4/vuforia-studio800x450.jpg" data-mid="179900513" border="0"  src="https://freight.cargo.site/w/800/i/ad67a08e0a97f2ed8ea100802a3b1e42a50cf2f4558c5f2bbc54fa6bd984edd4/vuforia-studio800x450.jpg" /&#62;&#60;img width="1024" height="484" width_o="1024" height_o="484" data-src="https://freight.cargo.site/t/original/i/69949fe476c6023d96aeecf1b1c801ab5f544e09d0126bbba98d4494002dfa06/motion-tracking-ptc-1024x484.png" data-mid="179900331" border="0"  src="https://freight.cargo.site/w/1000/i/69949fe476c6023d96aeecf1b1c801ab5f544e09d0126bbba98d4494002dfa06/motion-tracking-ptc-1024x484.png" /&#62;&#60;img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/7ddcd4ae81f25c27631a20af1e4ccdca9cc37d47235d780bef0c77facc706829/Untitled-17.png" data-mid="179905544" border="0"  src="https://freight.cargo.site/w/1000/i/7ddcd4ae81f25c27631a20af1e4ccdca9cc37d47235d780bef0c77facc706829/Untitled-17.png" /&#62;


</description>
		
	</item>
		
	</channel>
</rss>