Hi, I'm Alayna.
\r\n\r\n I'm a Senior UX Engineer at Roku creating internal design tools and\r\n prototyping TV experiences. I'm passionate about using my engineering\r\n skills and eye for design to create great user experiences.\r\n
\r\n \r\n \r\n );\r\n}\r\n\r\nexport default Header;\r\n","import \"./ProjectTile.scss\";\r\n\r\nconst ProjectTile = ({\r\n project,\r\n setSelectedProject = () => {},\r\n setModalOpen = () => {},\r\n}) => {\r\n return (\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: true,\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 role: \"I worked on a small 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 dates: \"February 2020 - April 2022\",\r\n technologies: \"React, Firebase\",\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: true,\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 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 dates: \"February 2021 - April 2022\",\r\n technologies: \"Figma Plugin API, Typescript, React\",\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 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 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\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 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 = \"VideoGameOlympics\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst VideoGameOlympics = {\r\n title: \"Video Game Olympics\",\r\n subTitle: \"Personal project using Google Sheets API\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"top center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"How can we display data from a video game tournament in real time?\",\r\n goal: \"Create a website that pulls live data from a Google spreadsheet to display a leaderboard and challenges list.\",\r\n role: \"I designed and developed this website as a personal project.\",\r\n dates: \"September - October 2021\",\r\n technologies: \"React, Google Spreadsheet API\",\r\n },\r\n links: [\r\n {\r\n title: \"Video Game Olympics website\",\r\n url: \"https://alaynatruttmann.com/video-game-olympics/\",\r\n },\r\n {\r\n title: \"GitHub repository\",\r\n url: \"https://github.com/atruttmann/video-game-olympics\",\r\n },\r\n ],\r\n content: (\r\n <>\r\n\r\n I was inspired to work on this project by my partner, who hosted a video\r\n game tournament where his friends would complete challenges for points.\r\n While the event was happening, he wanted to show players a countdown\r\n timer, a leaderboard, and a list of challenges. In the background, my\r\n partner would review challenge submissions and enter player scores in a\r\n spreadsheet. I used his ideas to build a website where all this\r\n information could be displayed.\r\n
\r\n\r\n I started by making a list of the requirements for the product and doing\r\n a simple sketch to plan the layout. I chose two monospaced fonts to\r\n evoke a retro video game feel. I added emojis to the leaderboard to\r\n denote the top players.\r\n
\r\n\r\n \r\n I built this project using React and SCSS. I used{\" \"}\r\n \r\n google-spreadsheet\r\n \r\n , a Google Sheets API wrapper for JavaScript, to pull the data from the\r\n spreadsheet of scores. Since this data needed to update as the\r\n spreadsheet was edited, I refreshed the data every five seconds.\r\n
\r\n\r\n Players earned points by doing challenges. The relevant data they needed\r\n to know was the challenge description and how many points were up for\r\n grabs. A maximum of three players could score for each challenge, so\r\n challenges that were no longer available were grayed out.\r\n
\r\n\r\n \r\n This website was built with a responsive design. I expected most players\r\n to view the site on their laptops, but they had the option of viewing it\r\n on their phone (or any device) if they preferred. Any overflowing\r\n content in the tables can be accessed by scrolling horizontally.\r\n
\r\n\r\n \r\n \r\n At the end of the tournament, the countdown was replaced with a message\r\n declaring the winner. The event went well and the players enjoyed using\r\n the website.\r\n
\r\n\r\n \r\n This was a fun project, and a great way to learn to use Google Sheets as\r\n a backend. If I were to continue working on this, I would get more user\r\n feedback to understand if the challenges table was meeting the needs of\r\n the players. It could be sorted differently, or maxed out challenges\r\n could be hidden. It would also be cool to explore a player submission\r\n functionality so some of the behind the scenes work could be automated.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default VideoGameOlympics;\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: true,\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 role: \"I am the sole designer and full stack engineer on this project.\",\r\n dates: \"April 2022 - present\",\r\n technologies: \"React, Node.js, AWS Dynamo DB, AWS S3\",\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 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\nEditing 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\nPreviewing 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 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 As more designers have used the tool I have added new features based on\r\n their use cases. These features include fade transitions, long-pressing\r\n remote buttons, allowing videos, screen reader support, and more.\r\n Eventually, I want to make a Figma plugin that can export images into\r\n Flow to 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: true,\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 role: \"I am the sole designer and developer on this project.\",\r\n dates: \"April 2023 - present\",\r\n technologies: \"Figma Plugin API, Typescript, React\",\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\nExample 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\nFinalized 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. Now, I am gathering user feedback to\r\n determine changes to make in the next version. I would like to explore\r\n 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 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 dates: \"September - October 2022\",\r\n technologies: \"React, Web Serial API, Arduino\",\r\n },\r\n content: (\r\n <>\r\nBacklit 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\nSettings 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\nCreating 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 role: \"I am the sole designer and full stack engineer on this project.\",\r\n dates: \"September 2022 - present\",\r\n technologies: \"React, Node.js, AWS Dynamo DB, AWS S3, Jira API\",\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.me.\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 This was a fun design exercise for me! I plan to continue iterating on\r\n the content of the website as more functionality is needed.\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: false, //TODO\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 role: \"I ran the sprints for this project and presented the prototype to Roku's Design VP. I developed the prototype with another UX Engineer.\",\r\n dates: \"July - August 2023\",\r\n technologies: \"Vue\",\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\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\nPrototype 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\"What to Watch\" content suggestions
\r\n\r\nNFL Sports page
\r\n\r\n\r\n The Roku Channel (Roku's streaming service)\r\n
\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 IEPShell from \"./IEPShell\";\r\nimport Pyro from \"./Pyro\";\r\nimport Toolkit from \"./Toolkit\";\r\nimport VideoGameOlympics from \"./VideoGameOlympics\";\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\n\r\nconst ProjectsList = [\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 VideoGameOlympics,\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 Roku and\r\n Intuit. I'm currently looking for a new role - reach out to\r\n amtruttmann@gmail.com if there's a fit!\r\n
\r\n \r\n \r\n );\r\n}\r\n\r\nexport default Header;\r\n","import \"./ProjectTile.scss\";\r\n\r\nconst ProjectTile = ({\r\n project,\r\n setSelectedProject = () => {},\r\n setModalOpen = () => {},\r\n}) => {\r\n return (\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 role: \"I worked on a small 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 dates: \"February 2020 - April 2022\",\r\n technologies: \"React, Firebase\",\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 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 dates: \"February 2021 - April 2022\",\r\n technologies: \"Figma Plugin API, Typescript, React\",\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 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 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\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 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 = \"VideoGameOlympics\";\r\nconst imgPrefix = getImgPrefix(imgFolder);\r\n\r\nconst VideoGameOlympics = {\r\n title: \"Video Game Olympics\",\r\n subTitle: \"Personal project using Google Sheets API\",\r\n coverImageSrc: `${imgPrefix}/1.png`,\r\n coverPosition: \"top center\",\r\n passwordRequired: false,\r\n overview: {\r\n problem:\r\n \"How can we display data from a video game tournament in real time?\",\r\n goal: \"Create a website that pulls live data from a Google spreadsheet to display a leaderboard and challenges list.\",\r\n role: \"I designed and developed this website as a personal project.\",\r\n dates: \"September - October 2021\",\r\n technologies: \"React, Google Spreadsheet API\",\r\n },\r\n links: [\r\n {\r\n title: \"Video Game Olympics website\",\r\n url: \"https://alaynatruttmann.com/video-game-olympics/\",\r\n },\r\n {\r\n title: \"GitHub repository\",\r\n url: \"https://github.com/atruttmann/video-game-olympics\",\r\n },\r\n ],\r\n content: (\r\n <>\r\n\r\n I was inspired to work on this project by my partner, who hosted a video\r\n game tournament where his friends would complete challenges for points.\r\n While the event was happening, he wanted to show players a countdown\r\n timer, a leaderboard, and a list of challenges. In the background, my\r\n partner would review challenge submissions and enter player scores in a\r\n spreadsheet. I used his ideas to build a website where all this\r\n information could be displayed.\r\n
\r\n\r\n I started by making a list of the requirements for the product and doing\r\n a simple sketch to plan the layout. I chose two monospaced fonts to\r\n evoke a retro video game feel. I added emojis to the leaderboard to\r\n denote the top players.\r\n
\r\n\r\n \r\n I built this project using React and SCSS. I used{\" \"}\r\n \r\n google-spreadsheet\r\n \r\n , a Google Sheets API wrapper for JavaScript, to pull the data from the\r\n spreadsheet of scores. Since this data needed to update as the\r\n spreadsheet was edited, I refreshed the data every five seconds.\r\n
\r\n\r\n Players earned points by doing challenges. The relevant data they needed\r\n to know was the challenge description and how many points were up for\r\n grabs. A maximum of three players could score for each challenge, so\r\n challenges that were no longer available were grayed out.\r\n
\r\n\r\n \r\n This website was built with a responsive design. I expected most players\r\n to view the site on their laptops, but they had the option of viewing it\r\n on their phone (or any device) if they preferred. Any overflowing\r\n content in the tables can be accessed by scrolling horizontally.\r\n
\r\n\r\n \r\n \r\n At the end of the tournament, the countdown was replaced with a message\r\n declaring the winner. The event went well and the players enjoyed using\r\n the website.\r\n
\r\n\r\n \r\n This was a fun project, and a great way to learn to use Google Sheets as\r\n a backend. If I were to continue working on this, I would get more user\r\n feedback to understand if the challenges table was meeting the needs of\r\n the players. It could be sorted differently, or maxed out challenges\r\n could be hidden. It would also be cool to explore a player submission\r\n functionality so some of the behind the scenes work could be automated.\r\n
\r\n \r\n ),\r\n};\r\n\r\nexport default VideoGameOlympics;\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 role: \"I was the sole designer and full stack engineer on this project.\",\r\n dates: \"April 2022 - September 2023\",\r\n technologies: \"React, Node.js, AWS Dynamo DB, AWS S3\",\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 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\nEditing 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\nPreviewing 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 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 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 role: \"I was the sole designer and developer on this project.\",\r\n dates: \"April - August 2023\",\r\n technologies: \"Figma Plugin API, Typescript, React\",\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\nExample 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\nFinalized 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 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 dates: \"September - October 2022\",\r\n technologies: \"React, Web Serial API, Arduino\",\r\n },\r\n content: (\r\n <>\r\nBacklit 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\nSettings 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\nCreating 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 role: \"I was the sole designer and full stack engineer on this project.\",\r\n dates: \"September 2022 - August 2023\",\r\n technologies: \"React, Node.js, AWS Dynamo DB, AWS S3, Jira API\",\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.me.\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 role: \"I ran the sprints for this project and presented the prototype to Roku's Design VP. I developed the prototype with another UX Engineer.\",\r\n dates: \"July - August 2023\",\r\n technologies: \"Vue\",\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\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\nPrototype 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\"What to Watch\" content suggestions
\r\n\r\nNFL Sports page
\r\n\r\n\r\n The Roku Channel (Roku's streaming service)\r\n
\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 IEPShell from \"./IEPShell\";\r\nimport Pyro from \"./Pyro\";\r\nimport Toolkit from \"./Toolkit\";\r\nimport VideoGameOlympics from \"./VideoGameOlympics\";\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\n\r\nconst ProjectsList = [\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 VideoGameOlympics,\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