Hi, I'm Alayna
\r\n\r\n I'm a Senior Design Engineer with several years of experience in\r\n web-based prototyping and creating design tools at NBC, Roku, and\r\n Intuit.\r\n
\r\n{project.title}
\r\n{project.subTitle}
\r\n\r\n For this project, I worked with the Intuit Export Portal design team.\r\n This portal is used by Intuit customer service agents (a.k.a. Intuit\r\n Experts) to assist customers. In this portal Experts can see customer\r\n data while on a call and also manage personal work information such as\r\n their schedule and notes.\r\n
\r\n\r\n The focus for this prototype was updating the \"shell\" of the product -\r\n the left, top, and right navigation elements. The design team wanted to\r\n refresh the components and visual design to align with Intuit Design\r\n Systems. They also rearranged some of the navigation content based on\r\n feedback from their users. The inner content was not finalized for this\r\n phase of prototyping so a responsive column layout was used as a\r\n placeholder.\r\n
\r\n
\r\n\r\n \r\n The functionality required for this prototype was to be able to click\r\n through the left navigation items and open and close the right drawer.\r\n The \"Engagements\" screen needed to show a header and tabs with client\r\n information. Navigation elements also had to behave responsively on\r\n smaller screens.\r\n
\r\n \r\n\r\n This video shows the entire flow of the prototype.\r\n
\r\n\r\n\r\n The most challenging development aspect of this project was the\r\n responsive design of the top navigation. This header included dropdowns,\r\n links, and other information that needed to be accessible on smaller\r\n screens. These navigation items needed to collapse into an overflow\r\n menu.\r\n
\r\n\r\n Opening the milestone dropdown when the header is not in an overflow\r\n state.\r\n
\r\n\r\n\r\n Accessing the milestone dropdown in an overflow state.\r\n
\r\n\r\n\r\n Another responsive aspect of this screen was the overflow behavior for\r\n tabs. Tabs needed an arrow to show that there were more tabs hidden.\r\n When clicked, this arrow needed to scroll the tabs by a set pixel value.\r\n
\r\n
\r\n\r\n \r\n After this prototype had been finalized with the design team, I handed\r\n off the prototype and the code to the development team. They were able\r\n to reuse my work in their production code, which sped up the process to\r\n implement these changes.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default IEPShell;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Pyro\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Pyro = {\r\n title: \"Pyro\",\r\n subTitle: \"Prototyping tool for Intuit designers\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"Intuit designers need a way to quickly create high-fidelity prototypes with interactive components and real user data.\",\r\n goal: \"Develop an intuitive drag-and-drop interface that leverages Intuit Design System components and supports custom data and logic.\",\r\n outcome:\r\n \"Pyro 1.0 was released in November 2020. I continued to maintain the tool and release feature updates.\",\r\n role: \"I worked on a team of five Design Technologists. I wore many hats including developing the product, designing new features, leading user testing sessions, and prioritizing our Jira board.\",\r\n technologies: \"React, Firebase\",\r\n dates: \"February 2020 - April 2022\",\r\n },\r\n links: [],\r\n content: (\r\n <>\r\n\r\n Pyro is a custom prototyping tool built by Intuit Design Technologists\r\n for Intuit designers. It allows anyone to create prototypes using Intuit\r\n Design System components, user data, and logic without writing any code.\r\n I have been working on this project since February 2020 improving the\r\n editor and creating features that cater to QuickBooks design needs.\r\n
\r\n\r\n \r\n\r\n This is the demo video for the initial release of Pyro. Video editing\r\n credits go to my awesome colleagues Heather & Lynda.\r\n
\r\n\r\n\r\n Pyro leverages Craft.js with React\r\n to create drag and drop functionality in the editor. The prototype data\r\n syncs to a Firebase backend.\r\n Users can grab components from the left-side panel and drag them into\r\n the editor. When a component is selected, you can edit its properties in\r\n the right-side panel. These components are either custom components\r\n built for Pyro or they are imported from Intuit's design system.\r\n
\r\n
\r\n \r\n In addition to changing the style of components, you can also set an \"on\r\n click\" action for the component or conditionally show or hide it. This\r\n allows users to build complex prototypes with many pages and branching\r\n flows. This feature is particularly important for TurboTax designers who\r\n often need to create flows with a series of questions.\r\n
\r\n
\r\n \r\n Many QuickBooks designers need to incorporate real user data into\r\n customer testing sessions to help the customer feel like the prototype\r\n is real. Customer data often comes in the form of a list of\r\n transactions, and typically a Design Technologist would build a custom\r\n React prototype to display this data. We added an editable table\r\n component to Pyro that allows designers to upload user data as a CSV,\r\n saving us all time!\r\n
\r\n\r\n \r\n Once Pyro was close to being ready for release, a teammate and I\r\n conducted ten user testing sessions with Intuit designers. We wanted to\r\n learn if there were any major usability issues blocking the release and\r\n get feedback on what features should be added to Pyro. The reaction from\r\n our participants was very positive and they were excited to use Pyro\r\n
\r\n\r\n The main issues that came out of testing were:\r\n
\r\n 1. The onboarding flow was too long and there was more information than\r\n users could process.\r\n
\r\n 2. Users expected to be able to undo and redo changes. (At the time of\r\n testing, this feature was still in development)\r\n
\r\n 3. Adding a new page to the prototype was not intuitive.\r\n
\r\n\r\n \r\n The majority of the issues from user testing were addressed and Pyro\r\n released to Intuit designers in November 2020.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Pyro;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Toolkit\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Toolkit = {\r\n title: \"QB Designer Toolkit\",\r\n subTitle: \"Figma plugin for Intuit designers\",\r\n coverImageSrc: `${imgPrefix}/Cover.png`,\r\n coverPosition: \"center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"How can we leverage Figma plugins to improve Intuit designers' workflows?\",\r\n goal: \"Create a Figma plugin that empowers designers to easily add motion, content, and theming to their work.\",\r\n outcome:\r\n \"The first version of the plugin was released in April 2021, and over time gained more than 238 users. I continued to maintain the plugin and release feature updates.\",\r\n role: \"I was the lead for this tool. I maintained the design and code of this plugin and promoted it to our users.\",\r\n technologies: \"Figma Plugin API, TypeScript, React\",\r\n dates: \"February 2021 - April 2022\",\r\n },\r\n content: (\r\n <>\r\nVersion 1
\r\n\r\n During the fall of 2020, Intuit designers made the switch to using{\" \"}\r\n Figma as their primary design tool.\r\n Figma supports adding{\" \"}\r\n \r\n plugins\r\n \r\n , which are apps you can install to add functionality and improve your\r\n workflow. After experimenting with Figma plugins in a hackathon, I was\r\n eager to develop the first Figma plugin for Intuit designers.\r\n
\r\n\r\n A design hurdle I wanted to tackle was supporting theming, particularly\r\n dark mode. Dark mode has been a work in progress for Intuit design for\r\n some time and is currently an experimental beta setting for QuickBooks.\r\n Dark mode is a priority because it is a feature our users expect, and\r\n also has accessibility benefits such as better contrast and reduced eye\r\n strain. As this feature becomes more used, we need to make sure that\r\n designs will work for both light and dark modes.\r\n
\r\n
\r\n \r\n I created a simple UI that would allow users to toggle both layers and\r\n pages between light and dark mode. I also included a color inspector\r\n that would display the fill and border colors for a selected layer and\r\n show their light and dark mode pairings.\r\n
\r\n\r\n \r\n Inspecting a dark mode design to see the color pairings.\r\n
\r\n\r\n Once I had a solid design, I moved on to developing the functionality\r\n using TypeScript and{\" \"}\r\n Sass. The plugin analyzes a layer's\r\n fill and border colors, finding the appropriate contextual color\r\n pairing, and then changing the layer's colors to the new theme.This\r\n automatic process is completed in a matter of seconds, which saves\r\n designers hours of work in manually changing colors.\r\n
\r\n \r\n\r\n This quick demo of Dark Mode that appeared within a QB Designer Toolkit\r\n instructional video I created.\r\n
\r\n\r\n Design Technologists on my team also created two other plugins that\r\n focus on motion and content. We combined all three plugins to make it\r\n easy for designers to access all of our tools at once. I led the merge\r\n effort and refactored our code to use the same visual style and coding\r\n standards.\r\n
\r\n\r\n Version 1 of this plugin was released to the QuickBooks design community\r\n in April 2021. The plugin now has now been installed by 238 users,\r\n roughly 2/3 of our total designers.\r\n
\r\n\r\n\r\n
Version 2
\r\n\r\n After the successful launch of the plugin, I paused development for\r\n several months to collect analytics and user feedback. In December 2021,\r\n I created a plan to add more functionality to the plugin. I wanted to\r\n target three key areas:\r\n
\r\nOpportunity #1: Refresh the plugin design
\r\n\r\n The first version of this plugin had features that were designed by\r\n separate teams and lacked a common visual language. The design of the\r\n plugin did not support multiple modes of navigation. It was likely that\r\n we would need the flexibility to develop more complex UIs in the future.\r\n
\r\nOpportunity #2: Contextualize analytics data
\r\n\r\n Adding analytics to a Figma plugin can be a bit of a challenge. Since it\r\n is contained within an iFrame, there is no access to certain information\r\n most analytics tools need. For the first launch, I developed a simple\r\n click counting system for the buttons in the plugin. While this did help\r\n me understand which buttons were being used the most, it lacked the\r\n contextual data. Which user clicked, and in what file, and at what time?\r\n I needed this information to make data-driven decisions about the future\r\n of the plugin.\r\n
\r\nOpportunity #3: Add a requested feature
\r\n\r\n Currently, the most used feature within the plugin is the content\r\n generator. My team did user research to get feedback on this feature and\r\n found that a common ask from designers was a way to generate numbers.\r\n
\r\nTackling opportunities
\r\n\r\n I started by redesigning the plugin to create a common visual language.\r\n I chose to use{\" \"}\r\n \r\n UI2, Figma's Design System\r\n {\" \"}\r\n as the basis for my design. Using Figma's components and styles helps\r\n the plugin blend into Figma's UI and seem like a more natural extension\r\n of its capabilities. I also changed the plugin navigation system to\r\n include a flyout menu. Moving page navigation into the flyout menu gave\r\n each feature room for its own navigational elements.\r\n
\r\n
\r\n \r\n Selection of redesigned screens before (left) and after (right)\r\n
\r\n
\r\n Redesigned cover art for installation page
\r\n\r\n My next step was to add analytics. I chose to use{\" \"}\r\n Mixpanel because of its powerful\r\n capabilities and compatibility with Figma plugins. Now, when a user\r\n clicks a button I know their name, the file they are using, and their\r\n overall activity. I can track monthly active users, view a list of Figma\r\n files the plugin is being used in, and see which buttons are clicked the\r\n most. This will help me know which features of the plugin are most\r\n valuable and should be invested in. I now know who the top users of the\r\n plugin are and can ask them for feedback.\r\n
\r\n\r\n \r\n Mixpanel Analytics dashboard\r\n {\" \"}\r\n with three weeks of data\r\n
\r\n\r\n Next, I worked on the random number generation feature. QuickBooks\r\n designers often create data tables with transactional information such\r\n as dates, percentages, and currency values so I wanted to include all of\r\n these options in this feature. This feature has the flexibility to add\r\n one number or a range of numbers, with options to sort the range. This\r\n will reduce the work a designer has to do filling out a table from\r\n minutes to seconds.\r\n
\r\n
\r\n \r\n The UI allows users to customize the format of numbers, currencies, and\r\n dates\r\n
\r\n\r\n Version 2 was released in January 2022, and the plugin continues to be\r\n widely used amongst Intuit designers.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Toolkit;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Flow\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Flow = {\r\n title: \"Flow\",\r\n subTitle: \"Prototyping tool for web & TV\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"Roku designers need a way to easily view their prototypes on TVs for user testing.\",\r\n goal: \"Create an easy to use web platform that exports prototypes to a Roku TV channel.\",\r\n outcome:\r\n \"The fist version of Flow was released in August 2022. I continued to maintain the tool and release feature updates.\",\r\n role: \"I was the sole designer and full stack engineer on this project.\",\r\n technologies: \"React, Node.js, Express, AWS Dynamo DB, AWS S3\",\r\n dates: \"April 2022 - September 2023\",\r\n },\r\n content: (\r\n <>\r\n\r\n Prototyping is at the heart of the Roku UX Engineering team's focus, but\r\n we don't always have time to make every prototype designers request.\r\n Creating an internal prototyping tool allows designers to self-serve\r\n simple prototypes, freeing up UX Engineers to code complex experiences.\r\n Flow empowers designers to create and view their prototypes on a TV and\r\n share them with in-person or remote users for testing.\r\n
\r\n\r\n\r\n The first step I took to make Flow was to plan out the user experience.\r\n The experience is split between creating a prototype on the web and\r\n viewing a prototype on a Roku channel.\r\n
\r\n\r\n\r\n\r\n \r\n I started designing the experience using Roku's web design system\r\n components. I iterated on the design using feedback gathered from my\r\n team. The primary web views are:\r\n
- \r\n
- Login \r\n
- View all prototypes \r\n
- Edit prototype \r\n
- Preview prototype \r\n
\r\n \r\n View all of your prototypes on the Flow home page\r\n
\r\n\r\n\r\n I started developing the website first. I used React to build the UI and\r\n a Node.js to send data to Dynamo DB and store images in a S3 bucket. I\r\n leveraged the open source{\" \"}\r\n React Flow library as the editor\r\n for my interactive diagrams.\r\n
\r\n\r\n Editing a prototype
\r\n\r\n\r\n I built a web preview so users can try out the prototype on the web and\r\n fix issues before viewing on the TV.\r\n
\r\n\r\n Previewing a prototype
\r\n\r\n\r\n The next phase of my development work was creating the Roku channel. I\r\n used an internal technology that functions like to React but works on TV\r\n channels. It is similar to the externally available{\" \"}\r\n Roku SDK.\r\n
\r\n
\r\n \r\n Entering a prototype code on the installed channel\r\n
\r\n\r\n\r\n Flow 1.0 was released in August 2022. I created a demo video to\r\n introduce users to Flow.\r\n
\r\n\r\n \r\n\r\n\r\n As more designers have used the tool I added new features based on their\r\n use cases. These features include fade transitions, long-pressing remote\r\n buttons, allowing videos, screen reader support, and more. Eventually, I\r\n wanted to make a Figma plugin that can export images into Flow to\r\n accelerate the design process.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Flow;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Puffin\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Puffin = {\r\n title: \"Puffin Bulk Generator\",\r\n subTitle: \"Figma plugin for Roku designers\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"Bulk generating assets is an arduous task for designers, and handoff to engineering is a manual, non-standardized process.\",\r\n goal: \"Take the tedious work out of bulk generating assets. Automate work that is currently done with copy/paste, while letting designers have control over tweaking the details. Make it easy to hand off assets to engineers.\",\r\n outcome: \"I released the first version of the plugin in August 2023.\",\r\n role: \"I was the sole designer and developer on this project.\",\r\n technologies: \"Figma Plugin API, TypeScript, React\",\r\n dates: \"April - August 2023\",\r\n },\r\n content: (\r\n <>\r\n\r\n A common problem in the Roku design community is that generating tile\r\n images is a long process involving a lot of copying and pasting. Tile\r\n assets can be a list of TV or movie categories, sports games, local\r\n news, and more. Designers need to verify text translations for each\r\n tile, which can involve generating 100+ tiles at a time. Tile images\r\n must be compressed and follow a naming convention before handing off to\r\n engineers.\r\n
\r\n\r\n\r\n Example of tiles Roku designers generate
\r\n\r\n\r\n My first thought when hearing about these issues was that a Figma plugin\r\n could be a perfect fit to automate many of these tasks. The advantage to\r\n using Figma is that designers can keep their work in one tool, and have\r\n the functionality they need to customize assets.\r\n
\r\n\r\n\r\n When starting my design process I chose to use{\" \"}\r\n \r\n UI2, Figma's Design System\r\n \r\n . I learned from previous experience building plugins that they felt\r\n more integrated with Figma when they used the same design system. I\r\n chose to swap Figma's traditional blue accent with an electric purple to\r\n give it a Roku-themed flair.\r\n
\r\n\r\n\r\n The first challenge was understanding the process designers go through\r\n to customize each tile. I wanted to make bulk generation a \"one-click\"\r\n experience but found it didn't work with the designer's workflows. Each\r\n tile has to be customized - the color changed or an icon repositioned.\r\n It didn't make sense to generate 100 tiles all at once if the designer\r\n would have to go back and tweak each tile. I shifted my mindset to\r\n thinking of it as \"applying a transformation\" to tiles in a multi-step\r\n process.\r\n
\r\n\r\n\r\n Planning the tile generation flow
\r\n\r\n\r\n The next step was to design the export experience. My design\r\n stakeholders requested that I limit the export customizations to\r\n simplify the process. With that direction, I added settings for image\r\n resolutions, formats, and folder naming. Puffin takes care of\r\n standardizing the naming of each layer behind the scenes.\r\n
\r\n\r\n\r\n Another request from the stakeholders was to add a shortcut for creating\r\n Figma components. This feature makes it easy to generate a blank\r\n component with aspect ratio variants since Roku tiles all use the same\r\n set of aspect ratios.\r\n
\r\n\r\n\r\n Finalized designs
\r\n\r\n\r\n My previous experience building Figma plugins accelerated the\r\n development process. I used a handy{\" \"}\r\n \r\n React Figma plugin template\r\n {\" \"}\r\n to start the project. I leveraged{\" \"}\r\n \r\n react-figma-plugin-ds\r\n {\" \"}\r\n for design system components.{\" \"}\r\n \r\n browser-image-compression\r\n {\" \"}\r\n and jszip helped me export\r\n assets.\r\n
\r\n\r\n\r\n Finally, I was ready to share the plugin with the Roku design community.\r\n I created a quick overview video to show what the plugin could do.\r\n
\r\n\r\n \r\n\r\n\r\n Puffin 1.0 launched in August 2023. The next step is to gather user\r\n feedback to determine changes to make in the next version. I would like\r\n to explore stronger image compression techniques such as{\" \"}\r\n \r\n image quantization\r\n \r\n .\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Puffin;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Oso\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Oso = {\r\n title: \"Remote backlight interface\",\r\n subTitle: \"Controlling TV remote hardware\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center top\",\r\n passwordRequired: true,\r\n overview: {\r\n problem:\r\n \"Roku designers needed to control the LED backlight color and behaviors of an experimental TV remote for user testing.\",\r\n goal: \"Develop a web interface that allows designers to control TV remote settings during experimentation and user testing.\",\r\n outcome:\r\n \"Moderators used my interface during user testing sessions to control the remote and gathered useful feedback about the design.\",\r\n role: \"I was the sole designer and software developer on this project. I partnered with a hardware engineer to send signals between the web interface and the remote.\",\r\n technologies: \"React, Web Serial API, Arduino\",\r\n dates: \"September - October 2022\",\r\n },\r\n content: (\r\n <>\r\n\r\n Backlit remote prototypes
\r\n\r\n\r\n The next generation of Roku remotes will be backlit, meaning that when a\r\n user interacts with the remote it will light up. This will make the\r\n buttons easier to see, especially in dark conditions. Roku designers\r\n needed to determine the best LED color for the remote. They also needed\r\n to find the best activation method for the light. The options were touch\r\n (holding remote), proximity (hand is near the remote), or accelerometer\r\n (moving remote). Designers also needed to be able to configure how long\r\n the light would stay on, and how long the light should fade out.\r\n
\r\n\r\n The best way to make decisions about remote backlighting was through\r\n user testing. The designers requested to customize remote\r\n configurations, and have shortcuts to show different configurations\r\n during testing. This is where I came in to design and develop an\r\n interface the designers could use.\r\n
\r\n\r\n\r\n A hardware engineer on my team had built several remotes with an{\" \"}\r\n Arduino that could change the\r\n remote's settings. It was possible to have a website communicate with\r\n the remote's Arduino using the{\" \"}\r\n \r\n Web Serial API\r\n \r\n . The challenge was that I had never used the Web Serial API and I had\r\n only a few weeks to design and build this project.\r\n
\r\n\r\n\r\n I got to work right away. I leveraged several of Roku's web design\r\n system components to build the interface faster. There were several\r\n custom components I needed to build. I created a color picker that could\r\n handle both regular RGB colors as well as{\" \"}\r\n \r\n color temperatures\r\n \r\n . Most of the remote button lights would be a shade of warm white.\r\n Certain buttons that launched channels would use a brand color, such as\r\n red for Netflix..\r\n
\r\n\r\n\r\n Settings used to control the remote
\r\n\r\n\r\n In addition to the main control dashboard I gave designers the ability\r\n to create preset configurations. Presets were important because the user\r\n testing moderator needed to be able to show users different variations\r\n during the session. I set it up so they could apply many settings at\r\n once with the click of a button.\r\n
\r\n\r\n\r\n Creating a preset configuration
\r\n\r\n\r\n User testing sessions showed that the reaction to backlit remotes was\r\n positive. Preference for the light activation method (touch, proximity,\r\n accelerometer) was mixed.\r\n
\r\n\r\n\r\n I learned a lot about communicating with Arduinos in this project. If I\r\n had more time to work on it, I would have iterated on the design and\r\n asked for more feedback. The interface was quite complicated to use due\r\n to the number of settings and customization needed, but could have room\r\n for improvement on simplicity. However, I would call delivering a\r\n complicated prototype on a tight timeline a win.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Oso;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"UXE\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst UXE = {\r\n title: \"Roku UXE Team Site\",\r\n subTitle: \"Showcasing tools & prototypes\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center top\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"The Roku UX Engineering team needed a place to share their tools, prototypes, and roadmap.\",\r\n goal: \"Create a beautiful website that informs other designers about UX Engineering.\",\r\n outcome:\r\n \"The Roku design community was able to learn more about our team's work and how to connect with us.\",\r\n role: \"I was the sole designer and full stack engineer on this project.\",\r\n technologies: \"React, Node.js, AWS Dynamo DB, AWS S3, Jira API\",\r\n dates: \"September 2022 - August 2023\",\r\n },\r\n content: (\r\n <>\r\n\r\n The Roku UX Engineering team needed a way to increase our visibility to\r\n the rest of the design organization. A basic Confluence page would not\r\n do! This website needed to include our internal tools, prototypes, team\r\n roadmap, and FAQs about working with our team.\r\n
\r\n\r\n\r\n When I started designing this project, I knew I wanted to use striking\r\n colors and lots of Roku purple. I was particularly inspired by an ad\r\n campaign Roku had done recently. I loved the rounded shapes and\r\n gradients and wanted to incorporate them in my designs. My goal was for\r\n the website to be attractive to designers and show off our UX\r\n Engineering front-end skills.\r\n
\r\n
\r\n\r\n \r\n The first section of the site shows a list of our internal tools. Each\r\n tool has an accompanying video or image with links to its site. The tab\r\n arrangement on the left allows you to browse the details for each tool.\r\n
\r\n\r\n\r\n \r\n The next section shows the prototypes the team has worked on. The list\r\n style mimics the experience of browsing content on a Roku device. You\r\n can search for prototypes, which is helpful because there are more than\r\n 60 prototypes to view.\r\n
\r\n\r\n\r\n \r\n Each prototype can open in a modal. There you can see more project\r\n details and interact with prototype in an iframe.\r\n
\r\n\r\n\r\n \r\n I also added a hidden form where UX Engineers could add more prototypes\r\n to the list. The data is saved to AWS Dynamo DB and images are uploaded\r\n to AWS S3.\r\n
\r\n\r\n\r\n \r\n The roadmap section displayed a calendar view of the projects the team\r\n is working on. This view syncs with Jira using the{\" \"}\r\n \r\n Jira API\r\n \r\n , so roadmap updates are automatic.\r\n
\r\n\r\n\r\n \r\n The FAQ section lets other designers know how best to work with our\r\n team. It includes two quizzes to assess whether a coded prototype is\r\n necessary and approximately how long a prototype will take to develop.\r\n
\r\n
\r\n 
\r\n \r\n ),\r\n};\r\n\r\nexport default UXE;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"BrandRefresh\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst BrandRefresh = {\r\n title: \"Roku OS Brand Refresh\",\r\n subTitle: \"Prototype of design updates\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center top\",\r\n passwordRequired: true,\r\n overview: {\r\n problem:\r\n \"The Roku Visual Design team needed to showcase their vision of a brand refresh initiative to executives.\",\r\n goal: \"Prototype design updates across the entire Roku OS.\",\r\n outcome: \"I presented the prototype to Roku's VP of Design.\",\r\n role: \"I was the lead engineer on this project and worked with another UX Engineer.\",\r\n technologies: \"Vue.js\",\r\n dates: \"July - August 2023\",\r\n },\r\n content: (\r\n <>\r\n \r\n In fall 2023, Roku plans to release a brand refresh for the Roku\r\n platform. The goals of this refresh are to have better visual appeal and\r\n help users understand the Roku brand. A teammate and I worked with\r\n visual designers to create a prototype that showcases design changes on\r\n every screen of the platform.\r\n
\r\n\r\n\r\n Roku home screen with brand refresh updates
\r\n\r\n\r\n This was a complicated undertaking given the breadth of changes and a\r\n quick timeline. We ran two-week sprints for this project and prioritized\r\n the features that needed to be fully functional. I took charge of\r\n creating, prioritizing, and assigning Jira tickets for each feature.\r\n
\r\n\r\n\r\n Theming was an important aspect of the brand refresh and included black,\r\n purple, and red variations. We used CSS variables to dynamically change\r\n color styles. The prototype included a configuration page that allowed\r\n designers to change the theme.\r\n
\r\n\r\n\r\n Prototype configuration screen
\r\n\r\n\r\n Many screens within the prototype needed to be fully functional. Some of\r\n the screens I created included \"What to Watch\" (content suggestions), a\r\n sports page, and The Roku Channel (Roku's streaming service).\r\n
\r\n\r\n\r\n \"What to Watch\" content suggestions
\r\n\r\n\r\n NFL Sports page
\r\n\r\n\r\n The Roku Channel (Roku's streaming service)
\r\n\r\n\r\n This project concluded with a presentation to Roku's VP of Design. I\r\n demoed the prototype so the executives could get a realistic experience\r\n of what the changes would be like in product.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default BrandRefresh;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"NBCUX\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst NBCUX = {\r\n title: \"NBCUX Self-Service\",\r\n subTitle: \"Figma plugin for NBC Universal\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"top\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"NBC Universal has many internal enterprise tools and not enough designers to support them. Product managers need to create their own layouts in Figma with minimal support from the design team.\",\r\n goal: \"Make Figma easy to use for non-designers by creating a plugin that generates layouts using design system components.\",\r\n outcome:\r\n \"The first version of the plugin was released to users in January 2024.\",\r\n role: \"I was the lead engineer on this project and worked with another UX Engineer and two designers. This was a short-term contract role.\",\r\n technologies:\r\n \"Figma Plugin API, TypeScript, React, Material UI, GitHub Actions, Jest\",\r\n dates: \"October - December 2023\",\r\n },\r\n content: (\r\n <>\r\n\r\n NBC Universal uses more than 100 internal enterprise tools. Their design\r\n team has fewer than 10 designers to support these tools, leaving a\r\n design gap. Product managers try to fill this gap but find Figma hard to\r\n use for design work. Additionally, they are often limited to using only\r\n FigJam due to licensing costs. My team developed a Figma plugin to allow\r\n non-designers to self-serve simple layouts.\r\n
\r\n\r\n\r\n We focused on generating a commonly used page template with a data table\r\n as the MVP for this tool. Users can fill out a form to generate a table\r\n page and specify the components they want to use in the layout. They can\r\n customize how many columns the table has and what the data type of each\r\n column should be. They can also add components such as tabs, a search\r\n bar, breadcrumb navigation, and more.\r\n
\r\n\r\n
\r\n Creating a table
\r\n\r\n\r\n When a template is created, the plugin adds documentation next to it. It\r\n provides a short explanation of how to use the plugin and where to get\r\n help. The documentation itself is a published Figma component the plugin\r\n imports. This way, designers can update the documentation without\r\n developer support.\r\n
\r\n\r\n
\r\n\r\n \r\n Users can update template layouts as needed. The update process uses the\r\n current selection to populate the form data in the UI.\r\n
\r\n\r\n
\r\n Updating a table
\r\n\r\n\r\n I created a short demo video of the plugin to share our MVP with new\r\n users.\r\n
\r\n\r\n \r\n\r\n\r\n As the plugin gains more users, it's helpful to have analytics to tell\r\n us how they use the tool. We want to know who the users are, if they're\r\n using Figma or FigJam, what they are creating and how often. It's also\r\n important to know if they run into errors. I chose{\" \"}\r\n Mixpanel to handle our analytics\r\n because it's easy to use and integrates well with Figma plugins.\r\n
\r\n\r\n\r\n \r\n Mixpanel Analytics dashboard\r\n {\" \"}\r\n with preliminary data.\r\n
\r\n\r\n\r\n This plugin was built with React, TypeScript, and Material UI\r\n components. I wanted to make the code as easy as possible for any future\r\n developers. Due to my short-term contract, I wouldn't be there to\r\n onboard them in the future. I focused on creating great documentation,\r\n commenting code, and writing unit tests. I chose{\" \"}\r\n Notion to host documentation on the\r\n code base and our publication process. I wrote thorough{\" \"}\r\n JSDoc comments for all the functions in\r\n our codebase. I used Jest to write 45\r\n unit tests that automatically ran on pull requests.\r\n
\r\n\r\n\r\n A pain point of creating Figma plugins is that the publishing process is\r\n manual and you have to upload code in the Figma editor. To work around\r\n this I used figcd,\r\n a command-line Figma plugin publishing tool. I combined it with GitHub\r\n Actions to deploy releases, which took a multi-step process to one click\r\n of a button.\r\n
\r\n\r\n\r\n The NBCUX Self-Service Figma plugin launched in January 2024.\r\n Development work is now paused while more support and funding is\r\n gathered for the plugin. In the future, the plugin will include more\r\n libraries (Angular, React, and Salesforce), templates, and components.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default NBCUX;\r\n","import IEPShell from \"./IEPShell\";\r\nimport Pyro from \"./Pyro\";\r\nimport Toolkit from \"./Toolkit\";\r\nimport Flow from \"./Flow\";\r\nimport Puffin from \"./Puffin\";\r\nimport Oso from \"./Oso\";\r\nimport UXE from \"./UXE\";\r\nimport BrandRefresh from \"./BrandRefresh\";\r\nimport NBCUX from \"./NBCUX\";\r\n\r\nconst ProjectsList = [\r\n NBCUX,\r\n Flow,\r\n Puffin,\r\n BrandRefresh,\r\n Oso,\r\n UXE,\r\n Toolkit,\r\n Pyro,\r\n IEPShell,\r\n];\r\n\r\nexport default ProjectsList;\r\n","import React, { useState } from \"react\";\r\nimport { FaLock, FaExclamationCircle } from \"react-icons/fa\";\r\nimport \"./PasswordProtector.scss\";\r\n\r\nconst PasswordProtector = ({ authenticate = () => {} }) => {\r\n const [userInput, setUserInput] = useState(\"\");\r\n const [showError, setShowError] = useState(false);\r\n\r\n return (\r\n\r\n Sorry, the information in this project is confidential and requires a\r\n password. Please email{\" \"}\r\n amtruttmann@gmail.com for access.\r\n
\r\n\r\nWhoops, looks like this password is invalid
\r\n{project.title}
\r\n{project.subTitle}
\r\nOverview
\r\n {Object.keys(project.overview).map((infoItem) => (\r\n\r\n {`${infoItem}: `}\r\n {project.overview[infoItem]}\r\n
\r\n ))}\r\n {project.links && project.links.length >= 1 && (\r\n\r\n Links: \r\n {project.links.map((link, index) => (\r\n \r\n \r\n {link.title}\r\n \r\n {index < project.links.length - 1 && \" | \"}\r\n \r\n ))}\r\n
\r\n )}\r\n\r\n\r\n {project.content}\r\n \r\n )}\r\n
\r\n I designed and built this website from scratch! Check out the code\r\n on{\" \"}\r\n \r\n GitHub\r\n \r\n .\r\n
\r\nHi, I'm Alayna
\r\n\r\n I'm a Senior UX Engineer with more than five years of experience in\r\n web-based prototyping and creating internal design tools at NBC\r\n Universal, Roku, and Intuit. I'm currently looking for a new role -\r\n reach out to amtruttmann@gmail.com if there's a fit!\r\n
\r\n{project.title}
\r\n{project.subTitle}
\r\n\r\n For this project, I worked with the Intuit Export Portal design team.\r\n This portal is used by Intuit customer service agents (a.k.a. Intuit\r\n Experts) to assist customers. In this portal Experts can see customer\r\n data while on a call and also manage personal work information such as\r\n their schedule and notes.\r\n
\r\n\r\n The focus for this prototype was updating the \"shell\" of the product -\r\n the left, top, and right navigation elements. The design team wanted to\r\n refresh the components and visual design to align with Intuit Design\r\n Systems. They also rearranged some of the navigation content based on\r\n feedback from their users. The inner content was not finalized for this\r\n phase of prototyping so a responsive column layout was used as a\r\n placeholder.\r\n
\r\n\r\n\r\n \r\n The functionality required for this prototype was to be able to click\r\n through the left navigation items and open and close the right drawer.\r\n The \"Engagements\" screen needed to show a header and tabs with client\r\n information. Navigation elements also had to behave responsively on\r\n smaller screens.\r\n
\r\n \r\n\r\n This video shows the entire flow of the prototype.\r\n
\r\n\r\n\r\n The most challenging development aspect of this project was the\r\n responsive design of the top navigation. This header included dropdowns,\r\n links, and other information that needed to be accessible on smaller\r\n screens. These navigation items needed to collapse into an overflow\r\n menu.\r\n
\r\n\r\n Opening the milestone dropdown when the header is not in an overflow\r\n state.\r\n
\r\n\r\n\r\n Accessing the milestone dropdown in an overflow state.\r\n
\r\n\r\n\r\n Another responsive aspect of this screen was the overflow behavior for\r\n tabs. Tabs needed an arrow to show that there were more tabs hidden.\r\n When clicked, this arrow needed to scroll the tabs by a set pixel value.\r\n
\r\n\r\n\r\n \r\n After this prototype had been finalized with the design team, I handed\r\n off the prototype and the code to the development team. They were able\r\n to reuse my work in their production code, which sped up the process to\r\n implement these changes.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default IEPShell;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Pyro\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Pyro = {\r\n title: \"Pyro\",\r\n subTitle: \"Prototyping tool for Intuit designers\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"Intuit designers need a way to quickly create high-fidelity prototypes with interactive components and real user data.\",\r\n goal: \"Develop an intuitive drag-and-drop interface that leverages Intuit Design System components and supports custom data and logic.\",\r\n outcome:\r\n \"Pyro 1.0 was released in November 2020. I continued to maintain the tool and release feature updates.\",\r\n role: \"I worked on a team of five Design Technologists. I wore many hats including developing the product, designing new features, leading user testing sessions, and prioritizing our Jira board.\",\r\n technologies: \"React, Firebase\",\r\n dates: \"February 2020 - April 2022\",\r\n },\r\n links: [],\r\n content: (\r\n <>\r\n\r\n Pyro is a custom prototyping tool built by Intuit Design Technologists\r\n for Intuit designers. It allows anyone to create prototypes using Intuit\r\n Design System components, user data, and logic without writing any code.\r\n I have been working on this project since February 2020 improving the\r\n editor and creating features that cater to QuickBooks design needs.\r\n
\r\n\r\n \r\n\r\n This is the demo video for the initial release of Pyro. Video editing\r\n credits go to my awesome colleagues Heather & Lynda.\r\n
\r\n\r\n\r\n Pyro leverages Craft.js with React\r\n to create drag and drop functionality in the editor. The prototype data\r\n syncs to a Firebase backend.\r\n Users can grab components from the left-side panel and drag them into\r\n the editor. When a component is selected, you can edit its properties in\r\n the right-side panel. These components are either custom components\r\n built for Pyro or they are imported from Intuit's design system.\r\n
\r\n\r\n \r\n In addition to changing the style of components, you can also set an \"on\r\n click\" action for the component or conditionally show or hide it. This\r\n allows users to build complex prototypes with many pages and branching\r\n flows. This feature is particularly important for TurboTax designers who\r\n often need to create flows with a series of questions.\r\n
\r\n\r\n \r\n Many QuickBooks designers need to incorporate real user data into\r\n customer testing sessions to help the customer feel like the prototype\r\n is real. Customer data often comes in the form of a list of\r\n transactions, and typically a Design Technologist would build a custom\r\n React prototype to display this data. We added an editable table\r\n component to Pyro that allows designers to upload user data as a CSV,\r\n saving us all time!\r\n
\r\n\r\n \r\n Once Pyro was close to being ready for release, a teammate and I\r\n conducted ten user testing sessions with Intuit designers. We wanted to\r\n learn if there were any major usability issues blocking the release and\r\n get feedback on what features should be added to Pyro. The reaction from\r\n our participants was very positive and they were excited to use Pyro\r\n
\r\n\r\n The main issues that came out of testing were:\r\n
\r\n 1. The onboarding flow was too long and there was more information than\r\n users could process.\r\n
\r\n 2. Users expected to be able to undo and redo changes. (At the time of\r\n testing, this feature was still in development)\r\n
\r\n 3. Adding a new page to the prototype was not intuitive.\r\n
\r\n\r\n \r\n The majority of the issues from user testing were addressed and Pyro\r\n released to Intuit designers in November 2020.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Pyro;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Toolkit\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Toolkit = {\r\n title: \"QB Designer Toolkit\",\r\n subTitle: \"Figma plugin for Intuit designers\",\r\n coverImageSrc: `${imgPrefix}/Cover.png`,\r\n coverPosition: \"center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"How can we leverage Figma plugins to improve Intuit designers' workflows?\",\r\n goal: \"Create a Figma plugin that empowers designers to easily add motion, content, and theming to their work.\",\r\n outcome:\r\n \"The first version of the plugin was released in April 2021, and over time gained more than 238 users. I continued to maintain the plugin and release feature updates.\",\r\n role: \"I was the lead for this tool. I maintained the design and code of this plugin and promoted it to our users.\",\r\n technologies: \"Figma Plugin API, TypeScript, React\",\r\n dates: \"February 2021 - April 2022\",\r\n },\r\n content: (\r\n <>\r\nVersion 1
\r\n\r\n During the fall of 2020, Intuit designers made the switch to using{\" \"}\r\n Figma as their primary design tool.\r\n Figma supports adding{\" \"}\r\n \r\n plugins\r\n \r\n , which are apps you can install to add functionality and improve your\r\n workflow. After experimenting with Figma plugins in a hackathon, I was\r\n eager to develop the first Figma plugin for Intuit designers.\r\n
\r\n\r\n A design hurdle I wanted to tackle was supporting theming, particularly\r\n dark mode. Dark mode has been a work in progress for Intuit design for\r\n some time and is currently an experimental beta setting for QuickBooks.\r\n Dark mode is a priority because it is a feature our users expect, and\r\n also has accessibility benefits such as better contrast and reduced eye\r\n strain. As this feature becomes more used, we need to make sure that\r\n designs will work for both light and dark modes.\r\n
\r\n\r\n \r\n I created a simple UI that would allow users to toggle both layers and\r\n pages between light and dark mode. I also included a color inspector\r\n that would display the fill and border colors for a selected layer and\r\n show their light and dark mode pairings.\r\n
\r\n\r\n \r\n Inspecting a dark mode design to see the color pairings.\r\n
\r\n\r\n Once I had a solid design, I moved on to developing the functionality\r\n using TypeScript and{\" \"}\r\n Sass. The plugin analyzes a layer's\r\n fill and border colors, finding the appropriate contextual color\r\n pairing, and then changing the layer's colors to the new theme.This\r\n automatic process is completed in a matter of seconds, which saves\r\n designers hours of work in manually changing colors.\r\n
\r\n \r\n\r\n This quick demo of Dark Mode that appeared within a QB Designer Toolkit\r\n instructional video I created.\r\n
\r\n\r\n Design Technologists on my team also created two other plugins that\r\n focus on motion and content. We combined all three plugins to make it\r\n easy for designers to access all of our tools at once. I led the merge\r\n effort and refactored our code to use the same visual style and coding\r\n standards.\r\n
\r\n\r\n Version 1 of this plugin was released to the QuickBooks design community\r\n in April 2021. The plugin now has now been installed by 238 users,\r\n roughly 2/3 of our total designers.\r\n
\r\n\r\n\r\n
Version 2
\r\n\r\n After the successful launch of the plugin, I paused development for\r\n several months to collect analytics and user feedback. In December 2021,\r\n I created a plan to add more functionality to the plugin. I wanted to\r\n target three key areas:\r\n
\r\nOpportunity #1: Refresh the plugin design
\r\n\r\n The first version of this plugin had features that were designed by\r\n separate teams and lacked a common visual language. The design of the\r\n plugin did not support multiple modes of navigation. It was likely that\r\n we would need the flexibility to develop more complex UIs in the future.\r\n
\r\nOpportunity #2: Contextualize analytics data
\r\n\r\n Adding analytics to a Figma plugin can be a bit of a challenge. Since it\r\n is contained within an iFrame, there is no access to certain information\r\n most analytics tools need. For the first launch, I developed a simple\r\n click counting system for the buttons in the plugin. While this did help\r\n me understand which buttons were being used the most, it lacked the\r\n contextual data. Which user clicked, and in what file, and at what time?\r\n I needed this information to make data-driven decisions about the future\r\n of the plugin.\r\n
\r\nOpportunity #3: Add a requested feature
\r\n\r\n Currently, the most used feature within the plugin is the content\r\n generator. My team did user research to get feedback on this feature and\r\n found that a common ask from designers was a way to generate numbers.\r\n
\r\nTackling opportunities
\r\n\r\n I started by redesigning the plugin to create a common visual language.\r\n I chose to use{\" \"}\r\n \r\n UI2, Figma's Design System\r\n {\" \"}\r\n as the basis for my design. Using Figma's components and styles helps\r\n the plugin blend into Figma's UI and seem like a more natural extension\r\n of its capabilities. I also changed the plugin navigation system to\r\n include a flyout menu. Moving page navigation into the flyout menu gave\r\n each feature room for its own navigational elements.\r\n
\r\n\r\n \r\n Selection of redesigned screens before (left) and after (right)\r\n
\r\n\r\n Redesigned cover art for installation page
\r\n\r\n My next step was to add analytics. I chose to use{\" \"}\r\n Mixpanel because of its powerful\r\n capabilities and compatibility with Figma plugins. Now, when a user\r\n clicks a button I know their name, the file they are using, and their\r\n overall activity. I can track monthly active users, view a list of Figma\r\n files the plugin is being used in, and see which buttons are clicked the\r\n most. This will help me know which features of the plugin are most\r\n valuable and should be invested in. I now know who the top users of the\r\n plugin are and can ask them for feedback.\r\n
\r\n\r\n \r\n Mixpanel Analytics dashboard\r\n {\" \"}\r\n with three weeks of data\r\n
\r\n\r\n Next, I worked on the random number generation feature. QuickBooks\r\n designers often create data tables with transactional information such\r\n as dates, percentages, and currency values so I wanted to include all of\r\n these options in this feature. This feature has the flexibility to add\r\n one number or a range of numbers, with options to sort the range. This\r\n will reduce the work a designer has to do filling out a table from\r\n minutes to seconds.\r\n
\r\n\r\n \r\n The UI allows users to customize the format of numbers, currencies, and\r\n dates\r\n
\r\n\r\n Version 2 was released in January 2022, and the plugin continues to be\r\n widely used amongst Intuit designers.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Toolkit;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Flow\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Flow = {\r\n title: \"Flow\",\r\n subTitle: \"Prototyping tool for web & TV\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"Roku designers need a way to easily view their prototypes on TVs for user testing.\",\r\n goal: \"Create an easy to use web platform that exports prototypes to a Roku TV channel.\",\r\n outcome:\r\n \"The fist version of Flow was released in August 2022. I continued to maintain the tool and release feature updates.\",\r\n role: \"I was the sole designer and full stack engineer on this project.\",\r\n technologies: \"React, Node.js, Express, AWS Dynamo DB, AWS S3\",\r\n dates: \"April 2022 - September 2023\",\r\n },\r\n content: (\r\n <>\r\n\r\n Prototyping is at the heart of the Roku UX Engineering team's focus, but\r\n we don't always have time to make every prototype designers request.\r\n Creating an internal prototyping tool allows designers to self-serve\r\n simple prototypes, freeing up UX Engineers to code complex experiences.\r\n Flow empowers designers to create and view their prototypes on a TV and\r\n share them with in-person or remote users for testing.\r\n
\r\n\r\n\r\n The first step I took to make Flow was to plan out the user experience.\r\n The experience is split between creating a prototype on the web and\r\n viewing a prototype on a Roku channel.\r\n
\r\n\r\n\r\n\r\n \r\n I started designing the experience using Roku's web design system\r\n components. I iterated on the design using feedback gathered from my\r\n team. The primary web views are:\r\n
- \r\n
- Login \r\n
- View all prototypes \r\n
- Edit prototype \r\n
- Preview prototype \r\n
\r\n \r\n View all of your prototypes on the Flow home page\r\n
\r\n\r\n\r\n I started developing the website first. I used React to build the UI and\r\n a Node.js to send data to Dynamo DB and store images in a S3 bucket. I\r\n leveraged the open source{\" \"}\r\n React Flow library as the editor\r\n for my interactive diagrams.\r\n
\r\n\r\n Editing a prototype
\r\n\r\n\r\n I built a web preview so users can try out the prototype on the web and\r\n fix issues before viewing on the TV.\r\n
\r\n\r\n Previewing a prototype
\r\n\r\n\r\n The next phase of my development work was creating the Roku channel. I\r\n used an internal technology that functions like to React but works on TV\r\n channels. It is similar to the externally available{\" \"}\r\n Roku SDK.\r\n
\r\n\r\n \r\n Entering a prototype code on the installed channel\r\n
\r\n\r\n\r\n Flow 1.0 was released in August 2022. I created a demo video to\r\n introduce users to Flow.\r\n
\r\n\r\n \r\n\r\n\r\n As more designers have used the tool I added new features based on their\r\n use cases. These features include fade transitions, long-pressing remote\r\n buttons, allowing videos, screen reader support, and more. Eventually, I\r\n wanted to make a Figma plugin that can export images into Flow to\r\n accelerate the design process.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Flow;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Puffin\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Puffin = {\r\n title: \"Puffin Bulk Generator\",\r\n subTitle: \"Figma plugin for Roku designers\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"Bulk generating assets is an arduous task for designers, and handoff to engineering is a manual, non-standardized process.\",\r\n goal: \"Take the tedious work out of bulk generating assets. Automate work that is currently done with copy/paste, while letting designers have control over tweaking the details. Make it easy to hand off assets to engineers.\",\r\n outcome: \"I released the first version of the plugin in August 2023.\",\r\n role: \"I was the sole designer and developer on this project.\",\r\n technologies: \"Figma Plugin API, TypeScript, React\",\r\n dates: \"April - August 2023\",\r\n },\r\n content: (\r\n <>\r\n\r\n A common problem in the Roku design community is that generating tile\r\n images is a long process involving a lot of copying and pasting. Tile\r\n assets can be a list of TV or movie categories, sports games, local\r\n news, and more. Designers need to verify text translations for each\r\n tile, which can involve generating 100+ tiles at a time. Tile images\r\n must be compressed and follow a naming convention before handing off to\r\n engineers.\r\n
\r\n\r\n\r\n Example of tiles Roku designers generate
\r\n\r\n\r\n My first thought when hearing about these issues was that a Figma plugin\r\n could be a perfect fit to automate many of these tasks. The advantage to\r\n using Figma is that designers can keep their work in one tool, and have\r\n the functionality they need to customize assets.\r\n
\r\n\r\n\r\n When starting my design process I chose to use{\" \"}\r\n \r\n UI2, Figma's Design System\r\n \r\n . I learned from previous experience building plugins that they felt\r\n more integrated with Figma when they used the same design system. I\r\n chose to swap Figma's traditional blue accent with an electric purple to\r\n give it a Roku-themed flair.\r\n
\r\n\r\n\r\n The first challenge was understanding the process designers go through\r\n to customize each tile. I wanted to make bulk generation a \"one-click\"\r\n experience but found it didn't work with the designer's workflows. Each\r\n tile has to be customized - the color changed or an icon repositioned.\r\n It didn't make sense to generate 100 tiles all at once if the designer\r\n would have to go back and tweak each tile. I shifted my mindset to\r\n thinking of it as \"applying a transformation\" to tiles in a multi-step\r\n process.\r\n
\r\n\r\n\r\n Planning the tile generation flow
\r\n\r\n\r\n The next step was to design the export experience. My design\r\n stakeholders requested that I limit the export customizations to\r\n simplify the process. With that direction, I added settings for image\r\n resolutions, formats, and folder naming. Puffin takes care of\r\n standardizing the naming of each layer behind the scenes.\r\n
\r\n\r\n\r\n Another request from the stakeholders was to add a shortcut for creating\r\n Figma components. This feature makes it easy to generate a blank\r\n component with aspect ratio variants since Roku tiles all use the same\r\n set of aspect ratios.\r\n
\r\n\r\n\r\n Finalized designs
\r\n\r\n\r\n My previous experience building Figma plugins accelerated the\r\n development process. I used a handy{\" \"}\r\n \r\n React Figma plugin template\r\n {\" \"}\r\n to start the project. I leveraged{\" \"}\r\n \r\n react-figma-plugin-ds\r\n {\" \"}\r\n for design system components.{\" \"}\r\n \r\n browser-image-compression\r\n {\" \"}\r\n and jszip helped me export\r\n assets.\r\n
\r\n\r\n\r\n Finally, I was ready to share the plugin with the Roku design community.\r\n I created a quick overview video to show what the plugin could do.\r\n
\r\n\r\n \r\n\r\n\r\n Puffin 1.0 launched in August 2023. The next step is to gather user\r\n feedback to determine changes to make in the next version. I would like\r\n to explore stronger image compression techniques such as{\" \"}\r\n \r\n image quantization\r\n \r\n .\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Puffin;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"Oso\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst Oso = {\r\n title: \"Remote backlight interface\",\r\n subTitle: \"Controlling TV remote hardware\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center top\",\r\n passwordRequired: true,\r\n overview: {\r\n problem:\r\n \"Roku designers needed to control the LED backlight color and behaviors of an experimental TV remote for user testing.\",\r\n goal: \"Develop a web interface that allows designers to control TV remote settings during experimentation and user testing.\",\r\n outcome:\r\n \"Moderators used my interface during user testing sessions to control the remote and gathered useful feedback about the design.\",\r\n role: \"I was the sole designer and software developer on this project. I partnered with a hardware engineer to send signals between the web interface and the remote.\",\r\n technologies: \"React, Web Serial API, Arduino\",\r\n dates: \"September - October 2022\",\r\n },\r\n content: (\r\n <>\r\n\r\n Backlit remote prototypes
\r\n\r\n\r\n The next generation of Roku remotes will be backlit, meaning that when a\r\n user interacts with the remote it will light up. This will make the\r\n buttons easier to see, especially in dark conditions. Roku designers\r\n needed to determine the best LED color for the remote. They also needed\r\n to find the best activation method for the light. The options were touch\r\n (holding remote), proximity (hand is near the remote), or accelerometer\r\n (moving remote). Designers also needed to be able to configure how long\r\n the light would stay on, and how long the light should fade out.\r\n
\r\n\r\n The best way to make decisions about remote backlighting was through\r\n user testing. The designers requested to customize remote\r\n configurations, and have shortcuts to show different configurations\r\n during testing. This is where I came in to design and develop an\r\n interface the designers could use.\r\n
\r\n\r\n\r\n A hardware engineer on my team had built several remotes with an{\" \"}\r\n Arduino that could change the\r\n remote's settings. It was possible to have a website communicate with\r\n the remote's Arduino using the{\" \"}\r\n \r\n Web Serial API\r\n \r\n . The challenge was that I had never used the Web Serial API and I had\r\n only a few weeks to design and build this project.\r\n
\r\n\r\n\r\n I got to work right away. I leveraged several of Roku's web design\r\n system components to build the interface faster. There were several\r\n custom components I needed to build. I created a color picker that could\r\n handle both regular RGB colors as well as{\" \"}\r\n \r\n color temperatures\r\n \r\n . Most of the remote button lights would be a shade of warm white.\r\n Certain buttons that launched channels would use a brand color, such as\r\n red for Netflix..\r\n
\r\n\r\n\r\n Settings used to control the remote
\r\n\r\n\r\n In addition to the main control dashboard I gave designers the ability\r\n to create preset configurations. Presets were important because the user\r\n testing moderator needed to be able to show users different variations\r\n during the session. I set it up so they could apply many settings at\r\n once with the click of a button.\r\n
\r\n\r\n\r\n Creating a preset configuration
\r\n\r\n\r\n User testing sessions showed that the reaction to backlit remotes was\r\n positive. Preference for the light activation method (touch, proximity,\r\n accelerometer) was mixed.\r\n
\r\n\r\n\r\n I learned a lot about communicating with Arduinos in this project. If I\r\n had more time to work on it, I would have iterated on the design and\r\n asked for more feedback. The interface was quite complicated to use due\r\n to the number of settings and customization needed, but could have room\r\n for improvement on simplicity. However, I would call delivering a\r\n complicated prototype on a tight timeline a win.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default Oso;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"UXE\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst UXE = {\r\n title: \"Roku UXE Team Site\",\r\n subTitle: \"Showcasing tools & prototypes\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center top\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"The Roku UX Engineering team needed a place to share their tools, prototypes, and roadmap.\",\r\n goal: \"Create a beautiful website that informs other designers about UX Engineering.\",\r\n outcome:\r\n \"The Roku design community was able to learn more about our team's work and how to connect with us.\",\r\n role: \"I was the sole designer and full stack engineer on this project.\",\r\n technologies: \"React, Node.js, AWS Dynamo DB, AWS S3, Jira API\",\r\n dates: \"September 2022 - August 2023\",\r\n },\r\n content: (\r\n <>\r\n\r\n The Roku UX Engineering team needed a way to increase our visibility to\r\n the rest of the design organization. A basic Confluence page would not\r\n do! This website needed to include our internal tools, prototypes, team\r\n roadmap, and FAQs about working with our team.\r\n
\r\n\r\n\r\n When I started designing this project, I knew I wanted to use striking\r\n colors and lots of Roku purple. I was particularly inspired by an ad\r\n campaign Roku had done recently. I loved the rounded shapes and\r\n gradients and wanted to incorporate them in my designs. My goal was for\r\n the website to be attractive to designers and show off our UX\r\n Engineering front-end skills.\r\n
\r\n\r\n\r\n \r\n The first section of the site shows a list of our internal tools. Each\r\n tool has an accompanying video or image with links to its site. The tab\r\n arrangement on the left allows you to browse the details for each tool.\r\n
\r\n\r\n\r\n \r\n The next section shows the prototypes the team has worked on. The list\r\n style mimics the experience of browsing content on a Roku device. You\r\n can search for prototypes, which is helpful because there are more than\r\n 60 prototypes to view.\r\n
\r\n\r\n\r\n \r\n Each prototype can open in a modal. There you can see more project\r\n details and interact with prototype in an iframe.\r\n
\r\n\r\n\r\n \r\n I also added a hidden form where UX Engineers could add more prototypes\r\n to the list. The data is saved to AWS Dynamo DB and images are uploaded\r\n to AWS S3.\r\n
\r\n\r\n\r\n \r\n The roadmap section displayed a calendar view of the projects the team\r\n is working on. This view syncs with Jira using the{\" \"}\r\n \r\n Jira API\r\n \r\n , so roadmap updates are automatic.\r\n
\r\n\r\n\r\n \r\n The FAQ section lets other designers know how best to work with our\r\n team. It includes two quizzes to assess whether a coded prototype is\r\n necessary and approximately how long a prototype will take to develop.\r\n
\r\n\r\n \r\n \r\n ),\r\n};\r\n\r\nexport default UXE;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"BrandRefresh\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst BrandRefresh = {\r\n title: \"Roku OS Brand Refresh\",\r\n subTitle: \"Prototype of design updates\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"center top\",\r\n passwordRequired: true,\r\n overview: {\r\n problem:\r\n \"The Roku Visual Design team needed to showcase their vision of a brand refresh initiative to executives.\",\r\n goal: \"Prototype design updates across the entire Roku OS.\",\r\n outcome: \"I presented the prototype to Roku's VP of Design.\",\r\n role: \"I was the lead engineer on this project and worked with another UX Engineer.\",\r\n technologies: \"Vue.js\",\r\n dates: \"July - August 2023\",\r\n },\r\n content: (\r\n <>\r\n \r\n In fall 2023, Roku plans to release a brand refresh for the Roku\r\n platform. The goals of this refresh are to have better visual appeal and\r\n help users understand the Roku brand. A teammate and I worked with\r\n visual designers to create a prototype that showcases design changes on\r\n every screen of the platform.\r\n
\r\n\r\n\r\n Roku home screen with brand refresh updates
\r\n\r\n\r\n This was a complicated undertaking given the breadth of changes and a\r\n quick timeline. We ran two-week sprints for this project and prioritized\r\n the features that needed to be fully functional. I took charge of\r\n creating, prioritizing, and assigning Jira tickets for each feature.\r\n
\r\n\r\n\r\n Theming was an important aspect of the brand refresh and included black,\r\n purple, and red variations. We used CSS variables to dynamically change\r\n color styles. The prototype included a configuration page that allowed\r\n designers to change the theme.\r\n
\r\n\r\n\r\n Prototype configuration screen
\r\n\r\n\r\n Many screens within the prototype needed to be fully functional. Some of\r\n the screens I created included \"What to Watch\" (content suggestions), a\r\n sports page, and The Roku Channel (Roku's streaming service).\r\n
\r\n\r\n\r\n \"What to Watch\" content suggestions
\r\n\r\n\r\n NFL Sports page
\r\n\r\n\r\n The Roku Channel (Roku's streaming service)
\r\n\r\n\r\n This project concluded with a presentation to Roku's VP of Design. I\r\n demoed the prototype so the executives could get a realistic experience\r\n of what the changes would be like in product.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default BrandRefresh;\r\n","import getImgPrefix from \"../util/getImgPrefix\";\r\n\r\nconst imgFolder = \"NBCUX\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst NBCUX = {\r\n title: \"NBCUX Self-Service\",\r\n subTitle: \"Figma plugin for NBC Universal\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"top\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"NBC Universal has many internal enterprise tools and not enough designers to support them. Product managers need to create their own layouts in Figma with minimal support from the design team.\",\r\n goal: \"Make Figma easy to use for non-designers by creating a plugin that generates layouts using design system components.\",\r\n outcome:\r\n \"The first version of the plugin was released to users in January 2024.\",\r\n role: \"I was the lead engineer on this project and worked with another UX Engineer and two designers. This was a short-term contract role.\",\r\n technologies:\r\n \"Figma Plugin API, TypeScript, React, Material UI, GitHub Actions, Jest\",\r\n dates: \"October - December 2023\",\r\n },\r\n content: (\r\n <>\r\n\r\n NBC Universal uses more than 100 internal enterprise tools. Their design\r\n team has fewer than 10 designers to support these tools, leaving a\r\n design gap. Product managers try to fill this gap but find Figma hard to\r\n use for design work. Additionally, they are often limited to using only\r\n FigJam due to licensing costs. My team developed a Figma plugin to allow\r\n non-designers to self-serve simple layouts.\r\n
\r\n\r\n\r\n We focused on generating a commonly used page template with a data table\r\n as the MVP for this tool. Users can fill out a form to generate a table\r\n page and specify the components they want to use in the layout. They can\r\n customize how many columns the table has and what the data type of each\r\n column should be. They can also add components such as tabs, a search\r\n bar, breadcrumb navigation, and more.\r\n
\r\n\r\n\r\n Creating a table
\r\n\r\n\r\n When a template is created, the plugin adds documentation next to it. It\r\n provides a short explanation of how to use the plugin and where to get\r\n help. The documentation itself is a published Figma component the plugin\r\n imports. This way, designers can update the documentation without\r\n developer support.\r\n
\r\n\r\n\r\n\r\n \r\n Users can update template layouts as needed. The update process uses the\r\n current selection to populate the form data in the UI.\r\n
\r\n\r\n\r\n Updating a table
\r\n\r\n\r\n I created a short demo video of the plugin to share our MVP with new\r\n users.\r\n
\r\n\r\n \r\n\r\n\r\n As the plugin gains more users, it's helpful to have analytics to tell\r\n us how they use the tool. We want to know who the users are, if they're\r\n using Figma or FigJam, what they are creating and how often. It's also\r\n important to know if they run into errors. I chose{\" \"}\r\n Mixpanel to handle our analytics\r\n because it's easy to use and integrates well with Figma plugins.\r\n
\r\n\r\n\r\n \r\n Mixpanel Analytics dashboard\r\n {\" \"}\r\n with preliminary data.\r\n
\r\n\r\n\r\n This plugin was built with React, TypeScript, and Material UI\r\n components. I wanted to make the code as easy as possible for any future\r\n developers. Due to my short-term contract, I wouldn't be there to\r\n onboard them in the future. I focused on creating great documentation,\r\n commenting code, and writing unit tests. I chose{\" \"}\r\n Notion to host documentation on the\r\n code base and our publication process. I wrote thorough{\" \"}\r\n JSDoc comments for all the functions in\r\n our codebase. I used Jest to write 45\r\n unit tests that automatically ran on pull requests.\r\n
\r\n\r\n\r\n A pain point of creating Figma plugins is that the publishing process is\r\n manual and you have to upload code in the Figma editor. To work around\r\n this I used figcd,\r\n a command-line Figma plugin publishing tool. I combined it with GitHub\r\n Actions to deploy releases, which took a multi-step process to one click\r\n of a button.\r\n
\r\n\r\n\r\n The NBCUX Self-Service Figma plugin launched in January 2024.\r\n Development work is now paused while more support and funding is\r\n gathered for the plugin. In the future, the plugin will include more\r\n libraries (Angular, React, and Salesforce), templates, and components.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default NBCUX;\r\n","import IEPShell from \"./IEPShell\";\r\nimport Pyro from \"./Pyro\";\r\nimport Toolkit from \"./Toolkit\";\r\nimport Flow from \"./Flow\";\r\nimport Puffin from \"./Puffin\";\r\nimport Oso from \"./Oso\";\r\nimport UXE from \"./UXE\";\r\nimport BrandRefresh from \"./BrandRefresh\";\r\nimport NBCUX from \"./NBCUX\";\r\n\r\nconst ProjectsList = [\r\n NBCUX,\r\n Flow,\r\n Puffin,\r\n BrandRefresh,\r\n Oso,\r\n UXE,\r\n Toolkit,\r\n Pyro,\r\n IEPShell,\r\n];\r\n\r\nexport default ProjectsList;\r\n","import React, { useState } from \"react\";\r\nimport { FaLock, FaExclamationCircle } from \"react-icons/fa\";\r\nimport \"./PasswordProtector.scss\";\r\n\r\nconst PasswordProtector = ({ authenticate = () => {} }) => {\r\n const [userInput, setUserInput] = useState(\"\");\r\n const [showError, setShowError] = useState(false);\r\n\r\n return (\r\n\r\n Sorry, the information in this project is confidential and requires a\r\n password. Please email{\" \"}\r\n amtruttmann@gmail.com for access.\r\n
\r\n\r\nWhoops, looks like this password is invalid
\r\n{project.title}
\r\n{project.subTitle}
\r\nOverview
\r\n {Object.keys(project.overview).map((infoItem) => (\r\n\r\n {`${infoItem}: `}\r\n {project.overview[infoItem]}\r\n
\r\n ))}\r\n {project.links && project.links.length >= 1 && (\r\n\r\n Links: \r\n {project.links.map((link, index) => (\r\n \r\n \r\n {link.title}\r\n \r\n {index < project.links.length - 1 && \" | \"}\r\n \r\n ))}\r\n
\r\n )}\r\n\r\n\r\n {project.content}\r\n \r\n )}\r\n
\r\n I designed and built this website from scratch! Check out the code\r\n on{\" \"}\r\n \r\n GitHub\r\n \r\n .\r\n
\r\n