https://jensclafani.cargo.site Jen Sclafani Thu, 29 Jan 2026 23:17:22 +0000 https://jensclafani.cargo.site en https://jensclafani.cargo.site/Untitled-Page Wed, 29 May 2024 10:50:16 +0000 Jen Sclafani https://jensclafani.cargo.site/Untitled-Page https://jensclafani.cargo.site/Home-2 Sat, 21 Oct 2023 13:32:22 +0000 Jen Sclafani https://jensclafani.cargo.site/Home-2 Senior Product Designer @Peacock ︎︎︎ Projects ︎︎︎ Info https://jensclafani.cargo.site/AI-Powered-Feed Thu, 29 Jan 2026 23:17:22 +0000 Jen Sclafani https://jensclafani.cargo.site/AI-Powered-Feed Peacock Vertical Video FeedDriving mobile DAUs through a short-form video feed designed for dedicated fandoms Coming Soon https://jensclafani.cargo.site/Unlisted-Team-Channels-1 Tue, 24 Oct 2023 13:39:31 +0000 Jen Sclafani https://jensclafani.cargo.site/Unlisted-Team-Channels-1 SportsEngine Play Creator Driving bottom-up growth through a freemium user experience View ➝ https://jensclafani.cargo.site/SportsEngine-Play-2 Mon, 23 Oct 2023 19:41:24 +0000 Jen Sclafani https://jensclafani.cargo.site/SportsEngine-Play-2 SportsEngine Play Using object-oriented design to architect the SportsEngine Play web app View ➝ https://jensclafani.cargo.site/Food-on-Film-1 Tue, 10 May 2022 16:36:22 +0000 Jen Sclafani https://jensclafani.cargo.site/Food-on-Film-1 Food on Film Designing the touchpoints for a festival celebrating iconic food moments in cinema View ➝ https://jensclafani.cargo.site/Info-1 Tue, 10 May 2022 12:20:48 +0000 Jen Sclafani https://jensclafani.cargo.site/Info-1 <img width="3916" height="3888" width_o="3916" height_o="3888" data-src="https://freight.cargo.site/t/original/i/d8c54dbd6e7e38686d000acd124845242c55ffd597b7450bfa3d2c112a18fa84/Headshot_Circle.png" data-mid="248408622" border="0" data-scale="47" src="https://freight.cargo.site/w/1000/i/d8c54dbd6e7e38686d000acd124845242c55ffd597b7450bfa3d2c112a18fa84/Headshot_Circle.png" /> 👋🏼 Hi! I’m Jen, a Senior Product Designer at Peacock, helping to shape content discovery. ︎ Jsclaf1@gmail.com · ︎ &nbsp;LinkedIn https://jensclafani.cargo.site/Sportsengine-Play-1 Mon, 23 Oct 2023 15:03:00 +0000 Jen Sclafani https://jensclafani.cargo.site/Sportsengine-Play-1 SportsEngine Play Designing &amp; shipping a minimum viable product in 6 months In late 2022, NBC Sports Next acquired Rapid Replay, an application that enables users to capture livestreams of youth &amp; recreational sporting events, as part of a larger strategy for the company to create an over-the-top viewing product and unlock a brand new direct-to-consumer customer base. In December 2022, I joined the newly-formed video division as the sole UX designer, charged with the task of designing and building this new viewing product, SportsEngine Play, set to release alpha in June 2023 and officially launch in September 2023. We had six months to design and deliver alpha. SportsEngine Play Vision For parents and fans of youth athletes who want to be able to participate in sporting events even when they can’t be at the game, SportsEngine Play is a centralized hub to watch, preserve, share, and celebrate all sport life moments in an athlete’s career.Events can be streamed from any device, at any time, so no parent or fan should ever miss a moment of the game.SportsEngine Play integrates seamlessly with other SportsEngine products, such as the mobile chat and schedule, so parents will always stay in-the-know. <img width="4842" height="1062" width_o="4842" height_o="1062" data-src="https://freight.cargo.site/t/original/i/b375b54a735016dbf82aa84baf3b2b160cf50a167e1bad840819406e14c6f55a/ShapePlay.png" data-mid="194569269" border="0" src="https://freight.cargo.site/w/1000/i/b375b54a735016dbf82aa84baf3b2b160cf50a167e1bad840819406e14c6f55a/ShapePlay.png" /> &nbsp;Getting to Alpha&nbsp; MVP Scope &amp; Planning My product team embarked on SportsEngine Play knowing that the scope had to stay light for launch, so we worked together to agree on the features necessary for an MVP. Homepage AuthenticationVideo Pages &amp; PlayersChannel PagesNotificationsCheckout &amp; BillingProfile Management&nbsp;Livestream CaptureAbility to watch from web or mobile With the initial requirements in place, I worked with my team to build out the key experiences. And as this was SportsEngine’s first direct-to-consumer product, I created a DTC “theme” for our pre-existing design system, and designed brand new components where applicable.&nbsp; <img width="4842" height="5532" width_o="4842" height_o="5532" data-src="https://freight.cargo.site/t/original/i/9e30028b8128ee7c4ad1f532a683656af6ffaeca309c52f9c04280d68e9b1ef9/Design-System-Part-III.png" data-mid="194573451" border="0" src="https://freight.cargo.site/w/1000/i/9e30028b8128ee7c4ad1f532a683656af6ffaeca309c52f9c04280d68e9b1ef9/Design-System-Part-III.png" /> &nbsp;Early Insights&nbsp;Alpha Testing Our team built the alpha version of the viewing product by June 2023, at which time I conducted usability tests on some of the most important workflows. The tests were not only fun to run but also insightful. I was able to either validate or invalidate any design decisions I wasn’t 100% confident on, and discovered new usability issues along the way. Two issues I found particularly interesting were: Authentication Fears: Testers weren’t finding enough value in the pre-authenticated experience of SportsEngine Play to sign up with us Navigation Confusion: Testers kept expressing the desire for a back button &nbsp;Issue 1&nbsp;Authentication FearsWe built SportsEngine Play so that anyone can watch a video preview for 30 seconds before being required to sign up or log in. But we heard a lot of feedback during our usability tests that at the end of the preview, people didn’t want to create an account. They didn’t know anything about the product, so why should they trust it? There was a sense of fear in the unknown. I campaigned to make livestreams free to watch for unauthenticated users, but at the time, the business wanted to keep the forced authentication for email capture and marketing reasons. So, we had to put a pin in addressing the authentication issues at the time. Today, we are adding analytics to the authentication funnel to monitor drop-offs and setting up A/B tests for forced authentication vs. encouraged authentication. &nbsp;Issue 2&nbsp; Navigation Confusion The second issue (the desire for a back button) revealed to us that users were not confident in their exact place in the product at a given time, and that we needed to put more thought into the navigation experience and site architecture. Object-oriented UX Object-oriented UX: Design objects before actions Humans naturally think of the world in terms of objects. When playing a soccer game, you’re concerned with finding the ball and kicking it into a goal. The ball (object) is what you’re after. Finding and kicking are the secondary actions you take onto the ball. Similarly, object-oriented UX is the process of first planning a system of interacting objects and information before planning the actions a user takes on those objects. In order to improve site architecture and navigation, I ran a few OOUX workshops with my product team to: Define the main objects that each persona will be looking for when coming to SportsEngine Play. Define the core content and metadata for each object (the key characteristics that make the object unique) Define the actions/verbs that each persona will want to take on each object <img width="4924" height="6208" width_o="4924" height_o="6208" data-src="https://freight.cargo.site/t/original/i/a4f1cbba31efb1b74d1c331eaf1aedf9d006475fa3c488a944000b47a1d30539/OOUX_02.png" data-mid="194575308" border="0" src="https://freight.cargo.site/w/1000/i/a4f1cbba31efb1b74d1c331eaf1aedf9d006475fa3c488a944000b47a1d30539/OOUX_02.png" /> Using OOUX to create channel hierarchies Video Pages OOUX informed us about how we should structure video pages. Key core content (which also happen to be nested objects) includes the teams playing in the event and which tournament the event is part of (if applicable). We were able to build an experience that linked to all of these nested objects. We also used this nesting structure to create a wayfinding system of breadcrumbs (State / Organization or School Name / Team Name / Event Title). Team Channels If the main objects that users are searching for within SportsEngine Play are sporting events, then the nested objects associated with those sporting events might be: the teams playing in that event and the sport they are playing. The core content associated with those sporting events are date &amp; time (aka: is it live/upcoming or a replay). This is the data that informed the structure of our team channels. <img width="2100" height="3067" width_o="2100" height_o="3067" data-src="https://freight.cargo.site/t/original/i/a713d44a75c6f282333f14f486b7beb6422f66487215937337d5ce8801dd1109/Team-Channel.png" data-mid="197562858" border="0" src="https://freight.cargo.site/w/1000/i/a713d44a75c6f282333f14f486b7beb6422f66487215937337d5ce8801dd1109/Team-Channel.png" /> School &amp; Org Channels We realized that school &amp; organization channels were really just a means for navigation rather than the end goal for a user. A school channel should inherit all of the content from the teams under its umbrella and organize those teams and content by sport. The “All” section should house the most heavily-weighted (timely + popular) content across all teams in the school, while the tabs serve as filters.How that plays out: If I’m watching a livestream of a Wester Middle School girls volleyball game, I can now use breadcrumb navigation to check out the entire Wester Middle School channel, click on the “Cross Country” tab and then see it filter down to all Wester Middle School cross country teams and events, and navigate to one of those pages. Category Channels We created another way of browsing by building category channels. A user can explore a sport category to find all content related to that sport in one place. If I were to navigate to the volleyball category, I’ll find not only all of the volleyball teams and organizations on SportsEngine Play, but also volleyball-related shows such as training videos with Kerri Walsh Jennings. <img width="3900" height="4403" width_o="3900" height_o="4403" data-src="https://freight.cargo.site/t/original/i/de49198022828c2ce9a2d9d57ba31cd888de9bcc9e7b922b3676bf940f2c3388/Categories.png" data-mid="197563172" border="0" src="https://freight.cargo.site/w/1000/i/de49198022828c2ce9a2d9d57ba31cd888de9bcc9e7b922b3676bf940f2c3388/Categories.png" /> OOUX: Impact, Surprises &amp; Future Ultimately, OOUX helped us&nbsp;improve our channel structures and hierarchies (also improving SEO), add alternate forms of navigation throughout the product, and implement better wayfinding UI. Not only did OOUX reveal how we might organize the content on our site, it also revealed features that we might need to backlog, such as&nbsp; defining a “fan” as an object that an admin can take an action on (i.e. add or remove from their channel); or an “athlete” as an object that can be tagged to games and that a fan can follow. As we continue to iterate SportsEngine Play, we are referring back to OOUX to: Add filters&nbsp;Improve our search experienceImprove our weightint of contentImprove suggestion algorithmFurther identify and categorize content types https://jensclafani.cargo.site/Unlisted-Team-Channels Mon, 23 Oct 2023 23:31:49 +0000 Jen Sclafani https://jensclafani.cargo.site/Unlisted-Team-Channels <img width="2491" height="1424" width_o="2491" height_o="1424" data-src="https://freight.cargo.site/t/original/i/311715730af276ff94d96cdaf4debcb2e3037ed73fc7a6fa38f53e2765d2ad6b/Prototype-copy.png" data-mid="202146362" border="0" src="https://freight.cargo.site/w/1000/i/311715730af276ff94d96cdaf4debcb2e3037ed73fc7a6fa38f53e2765d2ad6b/Prototype-copy.png" /> Unlisted Team Channels Driving bottom-up growth through a freemium user experience Overview SportsEngine Play is a Youth &amp; Recreational sports streaming app. YRS teams on SportsEngine can live stream their games and tournaments to the platform without having to worry about trust or safety issues. Initially, SportsEngine Play Creator (the application used to capture livestreams and upload game film) was only available to use by organization admins that worked with our sales team to set up an official team channel.&nbsp; This meant that we were not tapping into a large potential customer base of parents, already using SportsEngine HQ and SE Mobile, who had heard about SportsEngine Play and wanted to try livestreaming their kids’ games. The OpportunityWe believed that by allowing parents to bypass sales and try livestreaming for free, we could foster discovery of the SportsEngine Play ecosystem. User InsightsAs my team and I ideated on the experience, we kept circling back to a few unanswered questions. I collaborated with business stakeholders, my product team, and UXR to gather key insights about parents and fans. 1. Parents want to test out live streaming, but are anxious about doing it wrong2. Parents want to stream a game, and want to be able to control who sees it3. Parents want to stream a game, but don’t feel that they have the authority to “claim” a team The SolutionUnlisted Team Channels: A freemium experience that allows anyone to create a channel and start streaming. The channel is not searchable on the SportsEngine Play viewing app, and is only available to view by people with a direct link. Goal #1Get free users filming their first live stream as quickly, and as confidently, as possible 1. CTAs to Download the AppWe met parents where they already were, by placing CTAs within the SE mobile app and around the SportsEngine Play viewing app to encourage users to download and try live streaming for free. 2. Sign Up / Create Account (with SportsEngine SSO)] A user can download the app and create an account (or sign in) through their SportsEngine SSO. If the user’s email is not recognized to have the role of an existing team channel admin or streamer in SportsEngine Play, we send the user through the unlisted channels onboarding flow. <img width="4668" height="3288" width_o="4668" height_o="3288" data-src="https://freight.cargo.site/t/original/i/1aa97384338135c6f7fcff3eb707739641707f8332d4584ca71f52beab6418e6/Mobile-App_02.png" data-mid="203108794" border="0" src="https://freight.cargo.site/w/1000/i/1aa97384338135c6f7fcff3eb707739641707f8332d4584ca71f52beab6418e6/Mobile-App_02.png" /> 3. Create a Team Channel and Start Streaming The first step in the onboarding flow is to create a new team channel. Our goal was to make the user feel comfortable with creating a team channel: the app autofills the text field to “[User Name]’s First Team” which the user can keep or edit. We also added a message to say that by default, this channel is unlisted. In order to get the user through the flow and streaming as fast as possible, we only require a team channel name. Other data that a listed team usually requires (Gender, level, sport, team logo) can be added later. <img width="4668" height="3288" width_o="4668" height_o="3288" data-src="https://freight.cargo.site/t/original/i/2f10e059f66850041ddb585d8c3bfb79e606d6faf33e3e0bd6828b2ee17300a0/Create-channel---stream.png" data-mid="203109191" border="0" src="https://freight.cargo.site/w/1000/i/2f10e059f66850041ddb585d8c3bfb79e606d6faf33e3e0bd6828b2ee17300a0/Create-channel---stream.png" /> 4. Invite others to your channelThe next step in onboarding encourages parents to invite others to follow the team channel, which they can skip if they want to.5. Try a test streamThe last step offers parents the opportunity to try out a test stream. We want the user to get as comfortable with using the product as possible, without the pressure of anyone seeing it. <img width="6144" height="3288" width_o="6144" height_o="3288" data-src="https://freight.cargo.site/t/original/i/f5e7dff0bba6a29a606333e3fa35ae0147307495598e866d3bdc75f73d785eac/Invite---Test.png" data-mid="203109697" border="0" src="https://freight.cargo.site/w/1000/i/f5e7dff0bba6a29a606333e3fa35ae0147307495598e866d3bdc75f73d785eac/Invite---Test.png" /> Goal #2Encourage live streamers to invite others to join the platform and follow their team 1. Words of encouragement After a parent is finished streaming, we want him to feel confident enough to share his stream with others. Our hypothesis is that the social reward of having people view his stream, as well as the ease of streaming, will encourage him to create more livestreams and invite more followers. 2. Invite More Streamers After the third successful livestream, we offer Tom the opportunity to add other streamers to his channel. We think that growing the network of contributors will only help grow the network of viewers. <img width="6144" height="3288" width_o="6144" height_o="3288" data-src="https://freight.cargo.site/t/original/i/d0ed2cd033a1f8692343271967fc360aa7115f6c32166d7c1d9bc7a238131adf/Encouragement.png" data-mid="203109806" border="0" src="https://freight.cargo.site/w/1000/i/d0ed2cd033a1f8692343271967fc360aa7115f6c32166d7c1d9bc7a238131adf/Encouragement.png" /> Goal #3Nudge users to upgrade to an enterprise account with thoughtful upsell moments Encourage users to list their channel&nbsp; With this brand new “unlisted” channel status, our goal was to be as clear as possible as to what unlisted means, and give free users the opportunity to talk to sales and officially list their channel through natural touchpoints. <img width="5448" height="7476" width_o="5448" height_o="7476" data-src="https://freight.cargo.site/t/original/i/01ee74ce6d326a1dacbe8c951d482eb2748ef36c72809d9b351f08a2cb3d6ebe/List-Channel.png" data-mid="203133481" border="0" src="https://freight.cargo.site/w/1000/i/01ee74ce6d326a1dacbe8c951d482eb2748ef36c72809d9b351f08a2cb3d6ebe/List-Channel.png" /> Customer Feedback &amp; Fast FollowsWithin two two-week sprints, we released unlisted teams, gathered customer feedback, and shipped some fast follows. Our customer feedback revealed one major gap– when we built the feature, we were only considering two personas. Persona 1: The official team streamer SSO recognizes that he already has been assigned his role on a team. He bypasses the entire freemium onboarding experience and can go straight to streaming without having to create a new channel. Persona 2: The brand new user This person is not on any team yet, and is simply testing out the app to see if he likes it. Nothing official, no commitment. We designed unlisted teams to make this person feel as comfortable as possible trying out the streaming app. Missing Persona: the “Middle” man Customer feedback revealed that there was a persona who falls in the middle of the first two. This person is rostered to an official team, but does not have the official role of “streamer.” Maybe he’s a parent sitting in the stands, and the team admin asks if he wants to live stream the game. This parent downloads the app while waiting for the team admin to invite him as a streamer. He doesn’t want to create a new team, and our system has not found him assigned to a streaming role on the team yet. Fast follow:&nbsp;The waiting room Allow users to skip the entire onboarding process Go straight to a “waiting room” until their team admin assigns them a streamer role Once new role is found, user has streaming access for his team <img width="6144" height="3288" width_o="6144" height_o="3288" data-src="https://freight.cargo.site/t/original/i/1b82045cfb3a1b76d61839d0ecc467fbe3127d04956f833124dcccc4084c2802/Fast-Follows.png" data-mid="203110172" border="0" src="https://freight.cargo.site/w/1000/i/1b82045cfb3a1b76d61839d0ecc467fbe3127d04956f833124dcccc4084c2802/Fast-Follows.png" /> Unlisted Teams Impact Easing the minds of apprehensive customers Unlisted Teams became an effective way for sales to encourage customers who are apprehensive about getting an org-level account, allowing potential customers to get into the product and try things out for free. We also helped solve a real pain point for parents of athletes who want to live stream a game for friends and loved ones who can’t be there, without having to claim an official role on the team. Contributing to KPIs The business had a goal of reaching 300 livestreams per day, and allowing users to bypass sales, create unlisted team channels, film live streams and share with others became critical to reaching it. https://jensclafani.cargo.site/Food-on-Film-Festival-Interaction-Design Wed, 24 Aug 2022 15:02:13 +0000 Jen Sclafani https://jensclafani.cargo.site/Food-on-Film-Festival-Interaction-Design Food on FilmThe Food on Film festival celebrates iconic food moments in cinema. It is a chance for festival-goers to indulge their senses by watching great movies from around the world while eating food from local vendors in the New York City area. The festival also features a website component that offers the viewers a chance to stream the films and cook the recipes from home.Along with the festival concept and visual brand development, I designed multiple points of interaction that would occur between a potential customer and the Food on Film Festival.This project was completed as part of the School of Visual Arts course “Experiencing Brands Through Interaction Design” with Anita Zeppetelli. <img width="2000" height="872" width_o="2000" height_o="872" data-src="https://freight.cargo.site/t/original/i/a8c24ea3d65c2476fd2a56cf90876e1bb3bca6e9333fb7e7eeff8e3af9057713/Visual-Development_R4.png" data-mid="151278381" border="0" src="https://freight.cargo.site/w/1000/i/a8c24ea3d65c2476fd2a56cf90876e1bb3bca6e9333fb7e7eeff8e3af9057713/Visual-Development_R4.png" /> Bold &amp; Indulgent Food represented in cinema typically signifies indulgence, pleasure, sensuality, joy, and family, so I knew that the branding should be bold and indulgent. The double O’s in the word “Food” allowed me to explore the contrast of wide and thin circular shapes, which influenced my decision to use one typeface for the branding, interspersing the extended font and the condensed font. The two contrasting O shapes then became a significant part of the visual system. <img width="2000" height="530" width_o="2000" height_o="530" data-src="https://freight.cargo.site/t/original/i/3748d23df16ddda36b251579b8af42b9ec8babbae120a2356ad51acfac36b0df/Visual-Development.png" data-mid="151281794" border="0" src="https://freight.cargo.site/w/1000/i/3748d23df16ddda36b251579b8af42b9ec8babbae120a2356ad51acfac36b0df/Visual-Development.png" /> <img width="8187" height="3691" width_o="8187" height_o="3691" data-src="https://freight.cargo.site/t/original/i/cb6ba827c0fb291f49e986c5810dc70d4c92fafb8c18081f1d81d77b7dd94d6e/Components.png" data-mid="151281811" border="0" src="https://freight.cargo.site/w/1000/i/cb6ba827c0fb291f49e986c5810dc70d4c92fafb8c18081f1d81d77b7dd94d6e/Components.png" /> Sensory &amp; Emotional The color palette was inspired by a few different concepts. The color red is an homage to Pedro Almodovar’s films. He tends to use red heavily in his cinematography, especially in his kitchen scenes, where drama, murder, sexual awakenings, and, of course, cooking, typically occur. I chose to pair the red with a warm yellow, which ended up reminding me of the McDonald’s color scheme: a happy accident. <img width="2000" height="732" width_o="2000" height_o="732" data-src="https://freight.cargo.site/t/original/i/0f7235a08670d8655abfa3828e6403d3a5877a6e4b8619401a781aa8bc94789f/Palette.png" data-mid="151282330" border="0" src="https://freight.cargo.site/w/1000/i/0f7235a08670d8655abfa3828e6403d3a5877a6e4b8619401a781aa8bc94789f/Palette.png" /> Points of Interaction I conducted a scenario writing exercise to determine possible points of interaction between my customers and the festival. These points of interaction include: An animated subway ad, a mobile app, mobile tickets and event reminders, festival badges, and a responsive website. Below are a few points of interaction I designed.&nbsp; <img width="3456" height="1636" width_o="3456" height_o="1636" data-src="https://freight.cargo.site/t/original/i/81436f11cb9e4d5a4f869c10f0483d3bd6f636c5663224d25cd7dd0ab859da59/PushNotificationScreens2.png" data-mid="153552998" border="0" src="https://freight.cargo.site/w/1000/i/81436f11cb9e4d5a4f869c10f0483d3bd6f636c5663224d25cd7dd0ab859da59/PushNotificationScreens2.png" /> <img width="5250" height="3500" width_o="5250" height_o="3500" data-src="https://freight.cargo.site/t/original/i/f97fc2629fbe46f1d7f874025bbac580daf583a9d33133b6023720701f4bd58d/Hanging-ID-Card-Mockup_03.png" data-mid="151247940" border="0" src="https://freight.cargo.site/w/1000/i/f97fc2629fbe46f1d7f874025bbac580daf583a9d33133b6023720701f4bd58d/Hanging-ID-Card-Mockup_03.png" /> Thanks for stopping by!