https://cmsquire.com Claire Squire's Portfolio Fri, 10 Jan 2025 18:56:04 +0000 https://cmsquire.com en https://cmsquire.com/Home Wed, 13 Sep 2023 19:06:36 +0000 Claire Squire's Portfolio https://cmsquire.com/Home I’m Claire Squire and I build media &amp; tech products to support millions of people. 2026 - Present Kellogg School of Management MBA + MS Design Innovation 2021 - 2026 Paramount Sr. Product Designer 2020 - 2021 Expert Institute Product Designer https://cmsquire.com/Distilling-competitive-analysis Wed, 13 Sep 2023 19:06:37 +0000 Claire Squire's Portfolio https://cmsquire.com/Distilling-competitive-analysis Distilling competitive analysisFor a data visualization class, I designed one slide based on the data from a 64-page slide deck of competitive analysis of 8 streaming services. The original deck was created by the Global Streaming Research and Insights Team at Paramount in 2025.︎&nbsp; MBA Student, Coursework︎&nbsp; Oct 2026 Before These two slides show a taste of the rest of the deckSlide are word-heavy and don’t clearly convey takeawaysI want to know what features differentiate the services and contribute to a high UI rating&nbsp;&nbsp; <img width="12800" height="7200" width_o="12800" height_o="7200" data-src="https://freight.cargo.site/t/original/i/3b22bd4a0c6fd8f75cc2a6a68d3a29a15ce8f78e15920ff746123703ccc5ac3a/In-Class-Slide-Redesign-1.jpg" data-mid="253071458" border="0" src="https://freight.cargo.site/w/1000/i/3b22bd4a0c6fd8f75cc2a6a68d3a29a15ce8f78e15920ff746123703ccc5ac3a/In-Class-Slide-Redesign-1.jpg" /> <img width="12800" height="7200" width_o="12800" height_o="7200" data-src="https://freight.cargo.site/t/original/i/b1be56a3337f231820ab008c77865443471571747dff8b07397f0cbd8691f212/In-Class-Slide-Redesign-2.jpg" data-mid="253071459" border="0" src="https://freight.cargo.site/w/1000/i/b1be56a3337f231820ab008c77865443471571747dff8b07397f0cbd8691f212/In-Class-Slide-Redesign-2.jpg" /> Redesign #1I recreated the survey data in Excel and added fields to compare the apps’ featuresI pulled the Excel file into Tableau and added the bar graph manually in PowerpointAfter a gallery walk in class, I realized I could improve the hierarchy, storytelling, and takeaways to make the information more digestible to a non-expert <img width="1616" height="754" width_o="1616" height_o="754" data-src="https://freight.cargo.site/t/original/i/0b078bf387f6bc90077f52f20a01032d16cc510cb6f95f31a2262259d313cb33/Screenshot-2026-10-08-at-11.05.33PM.png" data-mid="253071474" border="0" src="https://freight.cargo.site/w/1000/i/0b078bf387f6bc90077f52f20a01032d16cc510cb6f95f31a2262259d313cb33/Screenshot-2026-10-08-at-11.05.33PM.png" /> <img width="1432" height="640" width_o="1432" height_o="640" data-src="https://freight.cargo.site/t/original/i/08bfaa736b3db877a408f4e2cb0c765b5676df45bd8b4c0b67c9e970d0d0cd3a/Sheet-2-11.png" data-mid="253071472" border="0" src="https://freight.cargo.site/w/1000/i/08bfaa736b3db877a408f4e2cb0c765b5676df45bd8b4c0b67c9e970d0d0cd3a/Sheet-2-11.png" /> <img width="2400" height="1350" width_o="2400" height_o="1350" data-src="https://freight.cargo.site/t/original/i/9c56950ac46d8af74a060e7cbaaa3e6edd1ffa69895e6d580a2556fdaf5022b7/DSGN-426-Slide-Redesign.png" data-mid="253071464" border="0" src="https://freight.cargo.site/w/1000/i/9c56950ac46d8af74a060e7cbaaa3e6edd1ffa69895e6d580a2556fdaf5022b7/DSGN-426-Slide-Redesign.png" /> Redesign #2I moved into Figma for the final slide redesign and played with color and hierarchy to elevate the takeaway that what really contributes to a user’s perception of “Very Good UI” are the content-specific features on the homepage (like Brand Hubs or a personalized “For You” carousel).&nbsp; <img width="7680" height="4320" width_o="7680" height_o="4320" data-src="https://freight.cargo.site/t/original/i/8491db8b3d24e3f84597189f9083330497637f4dc31a72239183592890af51f3/slide3.png" data-mid="253071457" border="0" src="https://freight.cargo.site/w/1000/i/8491db8b3d24e3f84597189f9083330497637f4dc31a72239183592890af51f3/slide3.png" /> https://cmsquire.com/Developing-kid-friendly-UI Wed, 13 Sep 2023 19:06:38 +0000 Claire Squire's Portfolio https://cmsquire.com/Developing-kid-friendly-UI Developing kid-friendly UI RoleProduct Designer Company Paramount Duration 3 days (2024) Team 1 product manager 1 dev lead 5 developers The challenge During a three-day Hackathon, my team wanted to improve the navigation bar on the Nickelodeon website because the UI wasn’t designed with kids in mind. Rather, it was designed for scalability and our design system implemented the same navigation bar on all of Paramount’s brand websites. Our team wanted to explore ways to enhance the component without breaking the design system. <img width="4800" height="2700" width_o="4800" height_o="2700" data-src="https://freight.cargo.site/t/original/i/e76ce06c88167c84eac3ac341a80b309304b60cdd660c622187cd33f804aaab2/Nick-UI.png" data-mid="225957887" border="0" src="https://freight.cargo.site/w/1000/i/e76ce06c88167c84eac3ac341a80b309304b60cdd660c622187cd33f804aaab2/Nick-UI.png" /> How can we make the site easier and safer for kids to navigate? Two main groups of kids come to the Nickelodeon website: older kids and preschoolers. Older kids (around 6 and up) want to explore Nickelodeon content. They mostly know how to read, but there are so many videos and games they might not know where to go. Preschoolers can’t read the words in the navigation bar and might click on something they shouldn’t instead of their favorite Nick Jr. show, Paw Patrol. In enhancing the navigation UI, our team wanted to ensure kids of all ages can access age-appropriate content without frustration. Considering accessibility The navigation UI needs to meet a high standard for accessibility so kids of all ages can safely use the website. When building within the Paladin Design System, we consider many different aspects of accessibility: Sufficient color contrastKeyboard controlsScreen reader supportFocus statesLarge touch areas on mobileVisual cues for early readers Designing a kid-friendly navIn just three days, our team completed a kids variant of the default navigation bar in Figma and Storybook. The kids variant included six different improvement to accessibility and usability: 1. Icon-based navigation Added icons to the navigation items, making it easier for kids to find their favorite sections of the site. 2. Fan favorites Updated the text-heavy dropdown to instead include Character Cards so that early readers can easily recognize where to find content from their favorite characters.<img width="4976" height="1300" width_o="4976" height_o="1300" data-src="https://freight.cargo.site/t/original/i/a0b6f3a74c5cbbb1c16b339c665ad10c7cfad8459266dc1ce1e7e13aa150fa99/fan-favs-menu5.png" data-mid="225465519" border="0" src="https://freight.cargo.site/w/1000/i/a0b6f3a74c5cbbb1c16b339c665ad10c7cfad8459266dc1ce1e7e13aa150fa99/fan-favs-menu5.png" /> 3. Limited games Added a dropdown under “Games” with a small, random selection to engage young attention spans without overwhelming them.<img width="4976" height="1300" width_o="4976" height_o="1300" data-src="https://freight.cargo.site/t/original/i/a4f6666ac3be0bbff202842048ff784ce6f43778b391fe867d778e0253274951/games-menu.png" data-mid="225465522" border="0" src="https://freight.cargo.site/w/1000/i/a4f6666ac3be0bbff202842048ff784ce6f43778b391fe867d778e0253274951/games-menu.png" /> 4. Content filtering We introduced a button to switch to a “Nick Jr.” view that filters out unsuitable content for preschoolers.&nbsp; 5. Playful animations Designed a fun slime animation for users to discover when they hover over the website’s logo. <img width="1208" height="450" width_o="1208" height_o="450" data-src="https://freight.cargo.site/t/original/i/c456e246a0ae58c0175d6c5076b0448f3d2e8b7789dfbc8af8de742bf29d1364/slime3.gif" data-mid="225464383" border="0" src="https://freight.cargo.site/w/1000/i/c456e246a0ae58c0175d6c5076b0448f3d2e8b7789dfbc8af8de742bf29d1364/slime3.gif" /> 6. Better accessibility Improved WCAG accessibility with better color contrast, focus states, keyboard navigation, and alternative text for images. ResultsOur team competed against seven other teams from our organization. Everyone who participated in the Hackathon voted on how each team performed. My team won in two of the four categories for Usability and Execution:Usability: How easy and intuitive is the project for users to interact with?&nbsp;🏆🎉Execution: How well was the project implemented regarding quality, completeness, and overall polish?&nbsp;🏆🎉 Innovation: How unique and creative is the project in introducing new ideas or technologies?Brightest Future: Which project do we most want to implement? Impact We hope to push the feature updates in Q1 2025. So far, our way of working as a team spread across the globe was a huge success. We focused on getting things done quickly instead of making them perfect so we could incorporate feedback as we went. Sharing feedback promptly kept everyone on the team engaged and I plan to continue doing so in our normal sprints. https://cmsquire.com/Creating-a-style-guide-from-scratch Fri, 10 Jan 2025 18:56:04 +0000 Claire Squire's Portfolio https://cmsquire.com/Creating-a-style-guide-from-scratch Creating a style guide from scratch 👩🏻‍💻&nbsp; Product Designer @ Expert Institute🗓️&nbsp; 3 months (2021)🎨&nbsp; UI Audit, User Research I defined a scalable system of design libraries, layouts, and components to reduce design and technical debt for a lean startup team. <img width="3000" height="1875" width_o="3000" height_o="1875" data-src="https://freight.cargo.site/t/original/i/274756647b63a6f31f14c71c3515435aa9432614ce78be56f4b4a0cb41b40f26/Figma-case-study.png" data-mid="224682300" border="0" src="https://freight.cargo.site/w/1000/i/274756647b63a6f31f14c71c3515435aa9432614ce78be56f4b4a0cb41b40f26/Figma-case-study.png" /> How might we improve team efficiency and satisfaction through a shared design system?I was hired as the second designer on Expert Institute’s product team. Until I came on board, there was no need to share designs because the design team was literally one person. We needed a design system to unite our teams around a common visual language, enabling and facilitating collaboration and consensus. <img width="1200" height="675" width_o="1200" height_o="675" data-src="https://freight.cargo.site/t/original/i/0fd60bc9af8217416f10954a0a043757d008865b37c3d05542fc58d356428cd7/Expert-Institute-Persona.png" data-mid="224682146" border="0" src="https://freight.cargo.site/w/1000/i/0fd60bc9af8217416f10954a0a043757d008865b37c3d05542fc58d356428cd7/Expert-Institute-Persona.png" />Learning from the teamI began to take note of pain points that team members brought up in team meetings and one-on-one conversations. Before long, recurring themes began to surface from both the Engineering and Marketing teams: they wanted organization and direction. <img width="1200" height="1200" width_o="1200" height_o="1200" data-src="https://freight.cargo.site/t/original/i/6043052f7fb4572ec844018fc19c89fd05a58750d7e36ecc19c3a7e02c4e0ea3/Expert-Institute-Research-1.png" data-mid="224682148" border="0" src="https://freight.cargo.site/w/1000/i/6043052f7fb4572ec844018fc19c89fd05a58750d7e36ecc19c3a7e02c4e0ea3/Expert-Institute-Research-1.png" /> <img width="1200" height="1200" width_o="1200" height_o="1200" data-src="https://freight.cargo.site/t/original/i/d3a3f3043d0b6ba6625cb8c12d6a3b7ba6e00f28368d8db27714a4efa9d9bdc3/Expert-Institute-Research-2.png" data-mid="224682149" border="0" src="https://freight.cargo.site/w/1000/i/d3a3f3043d0b6ba6625cb8c12d6a3b7ba6e00f28368d8db27714a4efa9d9bdc3/Expert-Institute-Research-2.png" /> Prioritizing parts, product, and peopleTo make sure we drew boundaries of what the system would become, we tried Nathan Curtis' fun activity. We agreed our design system would offer visual style, accessible UI components, UX patterns, branding, and iconography released as Figma, Adobe Xd, and other PDF templates in order to serve ~10 web-based products and experiences. <img width="1200" height="769" width_o="1200" height_o="769" data-src="https://freight.cargo.site/t/original/i/4a7e3454565fba51bebda4281189f69a5abdca3702f171cb8306bb248a9de6d2/Expert-Institute-Audit.png" data-mid="224682151" border="0" src="https://freight.cargo.site/w/1000/i/4a7e3454565fba51bebda4281189f69a5abdca3702f171cb8306bb248a9de6d2/Expert-Institute-Audit.png" /> Auditing UI componentsAfter Kate and I divided up our tasks and logged them in Jira, I began taking inventory of our visual attributes and our UI elements. I took a lot of screenshots and wondered: do we really need this many types of buttons? Surfacing and categorizing components across the web app allowed us to see the inconsistencies between pages as well as what components they had in common. <img width="1200" height="242" width_o="1200" height_o="242" data-src="https://freight.cargo.site/t/original/i/73b444dfbc20da93bb6f17a265a6af8ea5b6915f8efc8fb489cbac245c54c42c/Expert-Institute-Button-Audit.png" data-mid="224682160" border="0" src="https://freight.cargo.site/w/1000/i/73b444dfbc20da93bb6f17a265a6af8ea5b6915f8efc8fb489cbac245c54c42c/Expert-Institute-Button-Audit.png" /> Iterating new stylesI started out by mocking up our UI elements in a medium-fidelity wireframe kit in Figma. Using multiple fidelities allowed us to work faster and stay focused on improving usability. We've used the kit on many projects since. <img width="1200" height="692" width_o="1200" height_o="692" data-src="https://freight.cargo.site/t/original/i/a0e7013dac2f6f0512ee0341e89eb9dd7e995d10c48f0ab785d091fbab1218e0/Expert-Institute-library.gif" data-mid="224682381" border="0" src="https://freight.cargo.site/w/1000/i/a0e7013dac2f6f0512ee0341e89eb9dd7e995d10c48f0ab785d091fbab1218e0/Expert-Institute-library.gif" /> Defining new stylesWe defined and shared UI specs to give our engineering team organization and direction when picking up new work. <img width="1200" height="477" width_o="1200" height_o="477" data-src="https://freight.cargo.site/t/original/i/f9f5f13c8a0ae0391a848b1da52a603e8d6b46fbf33dff778599da9ca846235f/Expert-Institute-final-buttons.png" data-mid="224682398" border="0" src="https://freight.cargo.site/w/1000/i/f9f5f13c8a0ae0391a848b1da52a603e8d6b46fbf33dff778599da9ca846235f/Expert-Institute-final-buttons.png" /> Results The system has reduced design and technical debt significantly, saving our team about 12+ hours per week. We waste less time trying to resolve redundancies and locate important assets. We have time for more valuable conversations around product strategy. LearningsA design system is living and this one has grown and changed over time. I set myself weekly reminders to review and update the style guide. Testimonial“This system has totally changed the way I work through my design process and collaborate with the rest of the team. I especially love the Figma wireframes because they help me focus on the user experience and make changes more efficiently." ✎ Kate Rice, Associate Director of Product Design https://cmsquire.com/Improving-retention-with-content-curation Wed, 13 Sep 2023 19:06:37 +0000 Claire Squire's Portfolio https://cmsquire.com/Improving-retention-with-content-curation Improving retention with content curationDesigning ways for BET+ users to save, curate, and share their favorite shows and movies with others. ︎&nbsp; Product Designer @ Paramount Hackathon︎&nbsp; Oct 2023, 2 days <img width="2400" height="1350" width_o="2400" height_o="1350" data-src="https://freight.cargo.site/t/original/i/d0b8a4d0ae98dbc5a94dc364cfc0ea85c3baed96ea0fa8263ee48184c90894f0/My-Lists-1.png" data-mid="193444930" border="0" src="https://freight.cargo.site/w/1000/i/d0b8a4d0ae98dbc5a94dc364cfc0ea85c3baed96ea0fa8263ee48184c90894f0/My-Lists-1.png" />