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 Vertical Video Feed MVPDriving mobile DAUs through a short-form video feed designed for dedicated fandoms Coming Soon 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/Unlisted-Team-Channels-1 Tue, 24 Oct 2023 13:39:31 +0000 Jen Sclafani https://jensclafani.cargo.site/Unlisted-Team-Channels-1 Unlisted Team Channels Driving bottom-up growth through a freemium user experience 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="800" height="800" width_o="800" height_o="800" data-src="https://freight.cargo.site/t/original/i/813a4e61fb01156479e0a521979203ded696fb163c501b690b19b5a48bc15f75/JS.png" data-mid="244171173" border="0" data-scale="48" src="https://freight.cargo.site/w/800/i/813a4e61fb01156479e0a521979203ded696fb163c501b690b19b5a48bc15f75/JS.png" /> 👋🏼 Hi! I’m Jen, a Senior Product Designer at Peacock, helping to shape the viewing product experience. ︎ 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 Business Problem SportsEngine has access to hundreds of thousands of potential DTC customers through Sportsengine HQ and the SE mobile app. Initially, SportsEngine Play Creator (an application used to capture live streams and upload game film) was only available to use by organization admins that worked with our sales team to set up an official channel. That meant that we were not tapping into a large potential customer base of parents who might want to give live streaming a try. Challenge How might we create an opportunity to get existing SportsEngine parents onto SE Play Creator, give them a chance to bypass sales, create their own team channel and test out our live streaming product? Hypothesis&nbsp; By creating a freemium experience, we would give users the ability to start live streaming right away without an official connection to a team or organization. We hypothesized that this would convert more D2C customers because… When a free user live streams a game, she can share the link with friends and family, exposing more people to the SportsEngine Play viewing product If a free user creates a channel for her child’s team, she has the ability to add an unlimited amount of streamers to that channel, thus getting more free users into the product Friends and family can watch the livestreams on SportsEngine Play for free, but will have to upgrade to watch a game replay or access other premium game tools <img width="11722" height="6512" width_o="11722" height_o="6512" data-src="https://freight.cargo.site/t/original/i/bd83bf0432edaa9036cbfac765d2509310b13f4a51af448a730afd3c65de83d7/Unlisted-Teams-Flow.png" data-mid="194625772" border="0" src="https://freight.cargo.site/w/1000/i/bd83bf0432edaa9036cbfac765d2509310b13f4a51af448a730afd3c65de83d7/Unlisted-Teams-Flow.png" /> Roadblocks &amp; QuestionsAs my team and I were ideating on the flow for the freemium experience, we kept circling back to a few unanswered questions. I collaborated with business stakeholders, my product team, and other UXers to try to solve for some of these questions.&nbsp; How might we encourage the creation of free, user-generated content without diminishing the quality of content on SportsEngine Play?&nbsp;By creating a new channel type that is “unlisted”, meaning that the channel is not searchable on SportsEngine Play, and only people with the direct link to the channel can view it. Should we let free customers search for and claim a team that they are already rostered to on SportsEngine HQ? What might that look like? And what if someone else has already claimed the team but abandoned streaming?&nbsp;Past research has shown that our users get cold feet when they sign up for one of our products and are immediately asked to “claim” a team or organization. Many users just want to test out our products, or feel that they don’t have the authority to “claim” anything. We want to take that pressure off.How might we solve for a scenario where multiple parents on the same team decide to create a free account and start live streaming?&nbsp;If that team is rostered to SportsEngine, we will be able to connect the accounts to rostered teams, and sales can directly reach out to the organization admin to upsell him on merging the disparate teams into an enterprise account. How it works CTAs to Download the AppWe placed CTAs within the SE mobile app and various places around SportsEngine Play to encourage users to download the app to try live streaming for free. Sign Up / Create Account (with SportsEngine SSO)] A user can download the app and create an account (or sign in) through 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" /> Create Team Channel and Start Streaming The first step in the onboarding flow is to create a new team channel. We took some steps to try 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 created an info message saying that by default, this channel is unlisted (meaning it can only be seen by people with a direct link to the channel). In order to get the user through the flow and streaming as fast as possible, we only require a team channel name. Other data (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" /> Invite others to your channelThe next step in onboarding encourages parents to invite others to follow the team channel. But they can skip that if they want to.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" /> &nbsp;Words of encouragement After a parent is finished live streaming, we want him to feel confident enough to share his stream with others. The hope 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. &nbsp;Invite More Streamers&nbsp; 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" /> &nbsp;Opportunity to List Channel&nbsp; With this brand new “unlisted” channel status, we wanted to be as clear as possible as to what unlisted means, and give users the opportunity to talk to sales and officially list their channel as much as possible. <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 FollowsWith only one month to launch, we released unlisted teams, gathered customer feedback, and shipped some fast follows. After getting some customer feedback, we realized that at the time of the release, we were only thinking about two personas: Persona 1: The official team admin / 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 we forgot about a persona who falls in the middle of the first two. This person is rostered to an official team, but does not have an official role yet. 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 a streamer role 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 is notified and 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 has become a really effective way for sales to encourage customers who are apprehensive about getting an org-level account to get into the product and try things out for free. Contributing to KPIs With our new business goal of 300 livestreams per day, the success of users bypassing sales, quickly creating unlisted team channels, filming live streams and sharing with others has become even more critical. For that reason, we are adding more promotion of unlisted teams around SportsEngine products, and continue to iterate and improve the current experience. 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!