Dorms are lifeless without themes. As one of the residential assistants of West Florence Moore at Stanford, I led the execution of visual elements for our dorm's astrology-based theme.

And, yes, it's a shameless rip of Co—Star.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2F2ZuqNnfvrf0qFcJuxFEx%2F0334bbe8-1849-4f68-8b35-de6b9c4a9810.gif?alt=media&token=f6ed4079-0429-4f69-8447-2d62b06ab286","id":"0334bbe8-1849-4f68-8b35-de6b9c4a9810","width":1599,"height":1236,"filename":"6ea380c6-6bee-4bfd-a607-b7bac333d4a4_rw_1920.gif","type":"image/gif","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2F2ZuqNnfvrf0qFcJuxFEx%2F35ee30ae-951a-42f7-95ce-61da8d01f865.png?alt=media&token=9aec75d7-33c4-4d41-9c39-14124ac51ae4","id":"35ee30ae-951a-42f7-95ce-61da8d01f865","width":3840,"height":2658,"filename":"761882ba-0e06-4ada-b4ca-1476bda19c57_rw_3840.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2F2ZuqNnfvrf0qFcJuxFEx%2F4f49559a-7ad5-4031-891c-9065fec63a1f.png?alt=media&token=f0e7a745-9f47-46b1-9b6d-29b69fcdddb1","id":"4f49559a-7ad5-4031-891c-9065fec63a1f","width":1920,"height":989,"filename":"34720bba-568e-46fa-9975-e335140635b2_rw_1920.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2F2ZuqNnfvrf0qFcJuxFEx%2F466da97b-4bec-4862-9688-6754eeeee92a.gif?alt=media&token=323df93c-3cbb-48a9-b97d-02a8b5650021","id":"466da97b-4bec-4862-9688-6754eeeee92a","width":1920,"height":1062,"filename":"06b60463-9d31-4754-88b5-2582fbff7225_rw_1920.gif","type":"image/gif","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2F2ZuqNnfvrf0qFcJuxFEx%2Fed5b01a3-28ef-4eb0-9b39-9ab376aa66e5.jpg?alt=media&token=e0d69e90-cd28-404f-af71-0de3a6a97e5d","id":"ed5b01a3-28ef-4eb0-9b39-9ab376aa66e5","width":3840,"height":2880,"filename":"3a263a85-aa9f-4f2d-b83c-4a03c8027d55_rw_3840.jpeg","type":"image/jpeg","caption":"","border":false}]}
```

More fun assets are [on my website](https://jerryhong1.myportfolio.com/west-flodiac). Special thanks to these beautiful people:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2F2ZuqNnfvrf0qFcJuxFEx%2F86f652ba-12bd-4d6f-a81a-857943175282.jpg?alt=media&token=bd2c5e2c-bff1-4564-be97-49373a3a0738","id":"86f652ba-12bd-4d6f-a81a-857943175282","width":1920,"height":2827,"filename":"3143b962-54e6-43fd-aa94-630683c4aa07_rw_1920.jpeg","type":"image/jpeg","caption":"","border":false}]}
```

West Flodiac

As we crafted Pallet's core features, I worked with the executive and engineering teams to begin elevating our design practices. Static, messy files became a set of organized specs centered around a new design system.

**Sole Designer, 10-person team** • **May → June 2021**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2F4kO22cFtDBPBpKYlSmhZ%2Ff1edcbf2-e167-4adb-bbd1-308a1d54a973.png?alt=media&token=161eae66-f47a-4cd5-b316-51e441034107","id":"f1edcbf2-e167-4adb-bbd1-308a1d54a973","width":3059,"height":1888,"filename":"Free Website Branding Laptop Mockup 1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2F4kO22cFtDBPBpKYlSmhZ%2F2070a3e0-df44-49d2-9604-b3791823226c.png?alt=media&token=de9fee38-4037-4aad-bd3f-23874557ea55","id":"2070a3e0-df44-49d2-9604-b3791823226c","width":2880,"height":1620,"filename":"01 (1).png","type":"image/png","caption":"","border":false}]}
```

### Context

**When I entered Pallet,** we had just worked with [Z1.digital](http://z1.digital/) to define Pallet's brand and lay out some initial UI. However, the provided specs were static with a scarce set of components underlying them. There was no proper scaffolding for engineers to build designs out — other than by eye.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2F93513cc5-ec6a-4907-a9a4-c404b7a0f4b3.mp4?alt=media&token=e9a4b884-2589-45e3-85fe-c1ddb7f564c2","id":"93513cc5-ec6a-4907-a9a4-c404b7a0f4b3","width":1052,"height":570,"filename":"Screen Recording 2021-08-27 at 12.14.54 AM.mp4","type":"video/mp4","caption":"A lack of specificity in designs led to unpleasant interactions in the product.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2F48c85468-4447-468b-b1cd-f839a6094269.png?alt=media&token=0a0dd7f3-fd5a-4532-ba04-109f72fd1434","id":"48c85468-4447-468b-b1cd-f839a6094269","width":790,"height":306,"filename":"Screen Shot 2021-08-25 at 10.05.30 PM.png","type":"image/png","caption":"New components like toasts didn't match our rebranded visual style.","border":false}]}
```

### A System for Designers and Engineers

Struggling with manual frontend tasks in my first weeks, I decided to build a design system and lead by example in my design work to make everyone's life easier — engineers and future designers alike.

Color, spacing, and layout had been defined by Z1, so I focused on building out reusable atoms and molecules that appeared throughout Pallet's interface.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2F26a20237-b647-45d4-befe-8ed2d377968b.png?alt=media&token=1f4e0114-fc6c-48cb-9737-578ef02c9012","id":"26a20237-b647-45d4-befe-8ed2d377968b","width":5744,"height":3966,"filename":"Slice 1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2Febdc7f43-7f72-4193-a520-277a14c1f3de.png?alt=media&token=235f05b2-4267-4108-91b4-bcfcc42e6acb","id":"ebdc7f43-7f72-4193-a520-277a14c1f3de","width":1750,"height":724,"filename":"Screen Shot 2021-08-30 at 12.07.04 AM.png","type":"image/png","caption":"Design for inline job post editing solely using design system components.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2F3c7045fc-c572-4fe0-919c-46ee4cd22874.png?alt=media&token=1e046d72-0f8d-4f8e-ba11-32355f5fda1e","id":"3c7045fc-c572-4fe0-919c-46ee4cd22874","width":1534,"height":1030,"filename":"Editing a post inline.png","type":"image/png","caption":"Modal template","border":false}]}
```

Atoms allowed us to explore microinteractions — hover, press, and select states for common components breathed life into an otherwise unresponsive interface.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2Fd17bf1aa-bd40-4224-8371-11eaf1d5321c.mp4?alt=media&token=4d51049e-8ec8-47d5-b08f-951fc334c04b","id":"d17bf1aa-bd40-4224-8371-11eaf1d5321c","width":756,"height":648,"filename":"Screen Recording 2021-08-26 at 11.39.32 PM.mp4","type":"video/mp4","caption":"Sorry this feels jank. I don't have an M1 🙄","border":false}]}
```

**For engineers**, atoms in the design system modeled how a Figma component could be broken down analogously to its implementation in React, portraying both its "base" component and the manifestation of different state-dependent styles.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2F64bde751-7480-4623-b9e6-03f61216b94f.png?alt=media&token=b1ee9cf0-be29-4dfa-80fe-f725f824e1c5","id":"64bde751-7480-4623-b9e6-03f61216b94f","width":1163,"height":1575,"filename":"Text Input (1).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2F19cd925d-2959-4a2b-bff4-324aecfecbb3.png?alt=media&token=ef210b4c-e343-4f73-978c-c676bc9d5a49","id":"19cd925d-2959-4a2b-bff4-324aecfecbb3","width":1096,"height":892,"filename":"Screen Shot 2021-08-26 at 11.51.26 PM.png","type":"image/png","caption":"Guidelines in the system helped explain edge cases to engineers that couldn't be expressed with variants and constraints.","border":false}]}
```

UI specs mirrored their implementation's counterpart in the layer breakdown, and appropriate layer names and constraints improved their clarity.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2F6c36ecb1-3af1-4943-9810-485a56901dbb.png?alt=media&token=b3a232eb-8bcd-49ba-84fb-b6aa5903cbdd","id":"6c36ecb1-3af1-4943-9810-485a56901dbb","width":1510,"height":940,"filename":"Breakdown (1).png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2Fcb1b0bd2-5b15-4570-a123-e163588cb7e1.mp4?alt=media&token=b4299fa1-c73b-4324-91f9-db144b83684e","id":"cb1b0bd2-5b15-4570-a123-e163588cb7e1","width":1710,"height":1152,"filename":"modal.mp4","type":"video/mp4","caption":"Engineers could test the responsiveness of components themselves.","border":false}]}
```

**This overhaul required the support of the engineering team** to have any effect. So I prepared a curriculum to demonstrate specific design-engineering handoff practices in Figma.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FHXsJH5jfqJnjFY83AkH5%2Faac80f63-2622-45ae-8825-76f042b1cc33.mp4?alt=media&token=38792ce1-aac9-4943-ab1a-44212c85805c","id":"aac80f63-2622-45ae-8825-76f042b1cc33","width":1140,"height":640,"filename":"figma-slides.mp4","type":"video/mp4","caption":"Sample of the curriculum. Engineers were elated to learn how much Figma could make their work easier to implement and more pleasing for the end user.","border":false}]}
```

### Outcome

As the visual style morphed in the last weeks of my internship, I halted work on a system that now needed a total refresh. However, Pallet's new design practices allowed the engineering team to evolve the product with increased productivity during a crucial period for the company. Ultimately, I took great joy in learning how to set the designers and engineers around me up for success.

### On a final note...

If your team is interested next year in a designer who thinks deeply about engineers and systems, I would be delighted to hear from you. Once my master's concludes around mid-2022, I'm seeking to work on complex problems with passionate folks that can nurture my early-career growth. jerryhong1@gmail.com!

edit: nevermind i got hired by airtable but always feel free to reach out :)

Systematizing Pallet Design

*[Reduct.Video](http://reduct.video/) leverages video transcripts to enable easy searching, highlighting, and synthesis of recordings into shareable and compelling summaries.*

Tagging transcripts in Reduct is an important but disorganized experienced for Reduct teams. To facilitate easier tag recollection and structured synthesis, I designed and implemented new tagging experiences centered around tag groups and descriptions.

**Role:** Lead designer, engineer on 5-person team of designers and engineers. **Disciplines:** Interaction Design, React.js. **Timeline:** June - Dec 2020

*This case study is a copy. Its original form can be found [here](https://jerryhong1.myportfolio.com/reduct-tags).*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2Ff91a9565-a36f-43e4-b6ef-2904706de100.png?alt=media&token=2e95f37a-41b4-4097-9663-6375947072fe","id":"f91a9565-a36f-43e4-b6ef-2904706de100","width":1920,"height":1224,"filename":"3c88e5ab-4fb5-4a03-9633-9fb906719f99_rw_1920.png","type":"image/png","caption":"","border":false}]}
```

### **Teams using Reduct were abandoning our tagging features entirely.**

Our tagging system had long been subject to complaints regarding its disorganization and inability to easily manage tags.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2F7fe4101f-5516-4f8d-9825-a77c109d5552.gif?alt=media&token=888f735a-2d4b-4930-ab09-30439e060a71","id":"7fe4101f-5516-4f8d-9825-a77c109d5552","width":960,"height":459,"filename":"ezgif.com-gif-maker.gif","type":"image/gif","caption":"","border":false}]}
```

When Reduct teams became unsatisfied with in-product tagging, they either decided against tagging entirely or stored their tags in shared docs and spreadsheets.

Addressing this burden became a high priority for us, given that **65% of Reduct projects** involve at least two collaborators.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2F25b79e92-b09a-4cef-a877-dbab2f9a53a7.png?alt=media&token=d2750225-3e14-43c8-8462-c599deff2cd2","id":"25b79e92-b09a-4cef-a877-dbab2f9a53a7","width":5760,"height":2748,"filename":"where they tag.png","type":"image/png","caption":"","border":false}]}
```

### **Observing these teams motivated us to introduce tag groups and descriptions in Reduct.**

Teams often needed to categorize and elaborate on their tags — why not include ways to make that happen in Reduct, so that they wouldn't need to do it elsewhere?

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2Ff300fbd8-b016-47bd-961e-57779fc1de39.png?alt=media&token=7023d63a-6bbb-45e3-b071-c289b881e96c","id":"f300fbd8-b016-47bd-961e-57779fc1de39","width":5760,"height":3408,"filename":"groups.png","type":"image/png","caption":"Collaborative Google doc with groups of tags.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2F17b5898e-35ec-4a6e-8282-322f268113eb.png?alt=media&token=4718eab6-519d-4141-8433-53325930fa15","id":"17b5898e-35ec-4a6e-8282-322f268113eb","width":5760,"height":3408,"filename":"descriptions.png","type":"image/png","caption":"Airtable table with descriptions, sorting, groups.","border":false}]}
```

### **A new interface gives users space to edit these tag groups and descriptions across projects.**

The tag manager displays groups and descriptions for each tag in a sortable, grouped table view. Tags are easily editable individually, and groups can also be edited in bulk to accommodate for changing high-level insights.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2Fb39d4dd4-c3bc-480f-9907-1a99130db323.png?alt=media&token=9bfe9f76-528f-42c9-bc3f-cce9a7020011","id":"b39d4dd4-c3bc-480f-9907-1a99130db323","width":3104,"height":1978,"filename":"rename 1.png","type":"image/png","caption":"","border":false}]}
```

Viewing tags across all projects allows for more high-level synthesis, while filtering tags allows users to quickly find the tag they need and its associated highlights.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2Ff5c68510-a20d-4c93-8cc2-32dab0fa55a3.gif?alt=media&token=7b88d49a-0f83-4a45-98ac-9345b7f05af0","id":"f5c68510-a20d-4c93-8cc2-32dab0fa55a3","width":1920,"height":1224,"filename":"8133b6b8-722a-4d8e-b33b-6f310f01cf01_rw_1920.gif","type":"image/gif","caption":"","border":false}]}
```

Inspired by the interactions in Airtable and Notion tables, the tag manager allows for easy keyboard and mouse navigation, as well as collapsible groups and draggable tags.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2Ff1d1b7d9-6359-4632-8f9c-3af175b39367.gif?alt=media&token=1dabe94e-c8f4-4999-a3a0-53ecbf4106ec","id":"f1d1b7d9-6359-4632-8f9c-3af175b39367","width":1600,"height":1020,"filename":"keyboard.gif","type":"image/gif","caption":"Editing descriptions using keyboard navigation.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2F69e8aee9-f474-4fc6-bccb-02ee37f39d60.gif?alt=media&token=a46a039d-c161-4f99-a054-f12387543d36","id":"69e8aee9-f474-4fc6-bccb-02ee37f39d60","width":1550,"height":990,"filename":"mouse.gif","type":"image/gif","caption":"Editing the same description using your mouse.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2F99434b05-7c82-46fe-91dc-ae7d104825f4.png?alt=media&token=feb981e1-7967-4939-bfad-b249736c5c6b","id":"99434b05-7c82-46fe-91dc-ae7d104825f4","width":3104,"height":1978,"filename":"drag.png","type":"image/png","caption":"Collapsing groups simplifies the process of regrouping tags via dragging from group to group.","border":false}]}
```

### **Redesigns to the transcript editor accommodate for the new organization tag groups and descriptions bring.**

The new tag picker organizes tags by groups and allows searching for descriptions and groups with the colon prefix (":"). Additionally, a new collapsible codebook allows users to view and search through their grouped tags.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2Ffd9528fe-626f-4dff-8609-7284c12d2e24.png?alt=media&token=8827d715-0835-4c1e-b7f1-953dace86f7d","id":"fd9528fe-626f-4dff-8609-7284c12d2e24","width":2880,"height":1547,"filename":"tag picker.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2Fe2830aff-6821-4e92-97d7-edf1433ee6ab.png?alt=media&token=52fd235d-c980-45df-8a48-2b94238f6473","id":"e2830aff-6821-4e92-97d7-edf1433ee6ab","width":3104,"height":1978,"filename":"codebook.png","type":"image/png","caption":"Clicking a tag copies the tag name to the keyboard — or directly adds it onto the selected highlight.","border":false}]}
```

### **Validation and iteration for these features came from multiple rounds of user feedback, including from prototypes I directly coded in the product.**

From our first interviews, we realized excitingly that adding tag groups and descriptions set a foundation for many other desired features down the line, such as auto-tagging, cross-project management, and permanent codebooks.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2F97e55efe-3c67-4cd1-8f3f-c9b5da5736c7.png?alt=media&token=22efbc37-9c54-49be-96d8-28f453e5ff68","id":"97e55efe-3c67-4cd1-8f3f-c9b5da5736c7","width":2880,"height":2615,"filename":"v1.png","type":"image/png","caption":"First round of exploratory mockups.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2F94b5bb9f-3755-4fea-8d1b-6fd06fe99e9c.png?alt=media&token=59ba57e9-160f-48ce-9acb-32c605016500","id":"94b5bb9f-3755-4fea-8d1b-6fd06fe99e9c","width":1920,"height":1080,"filename":"e02b1588-f5e6-4f76-8a6f-91997892df7e.png","type":"image/png","caption":"Screenshot from first round of user testing.","border":false}]}
```

After determining what features were most critical, I rapidly built a beta tag manager, codebook, and new tag picker into the product using **React and Material UI components**.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2F0deaefcb-e9e3-4003-90dc-5ef9f14a0b60.mp4?alt=media&token=e16acff6-740e-4ecc-9dd8-4a78bd8159db","id":"0deaefcb-e9e3-4003-90dc-5ef9f14a0b60","width":1920,"height":972,"filename":"tag-descriptions.mp4","type":"video/mp4","caption":"Current version of codebook and tag manager in product","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FVKoVjCn5SHO5LQEa2DK55iyK1gx2%2FtpkIrdOZBmotr4tnQfEo%2F692fbffe-0c68-415f-a872-82a5c9f6f80c.mp4?alt=media&token=ba3d2f47-f17a-4c8e-97bc-c8794290d6ff","id":"692fbffe-0c68-415f-a872-82a5c9f6f80c","width":1920,"height":1000,"filename":"tag-groups.mp4","type":"video/mp4","caption":"Current version of tag picker in product","border":false}]}
```

## **Takeaways**

### Don't jump to polished visuals.

Limited resources and a plethora of different priorities at Reduct meant introducing features in scrappier, user-testable iterations.

### Faithful implementation takes time.

Coding up my own designs was enriching, and knowing how much went into translating mockups made me gain an appreciation for design-engineer handoffs.

### Do more testing in-product.

In retrospect, I would have made a stronger case for resolving design questions (such as the tag manager's layout) by deploying multiple prototypical solutions in the app.