FanAI is a platform that allows brands to optimize and track their sponsorship portfolio investment using bottom-of-funnel sponsorship metrics. The platform delivers actionable audience insights and offline attribution to drive improved sponsorship outcomes. The product was originally created in Tableau until I was brought in to bring the platform to life.
UX Design Lead
Responsibilities include: Creation of design system, wireframes, prototypes, high fidelity mocks, testing, handoff. Worked closely with data scientists to create new features to include in the platform. Also worked with front end developers to create components in Storybook to give the platform a consistent look and feel, as well as cutting down on dev time.
I spent hours working through solutions on the whiteboards when we were in the office. I would work through components with front end developers, new features with product owners, and new visualizations with data scientists and analysts.
Striving for user-centered design, personas were created to represent the user type that might work with our brand, or product. While there were mostly assumption personas due to the fact we created them before we had any clients, it ended up that they were pretty accurate.
I began working on the design system very quickly at FanAI as a way to document our UX decisions, and give developers a north star, or guiding light to work with. I used Atomic Design principles to help make quicker decisions and to provide structure to our components. Color palette, Voice and tone, logo usage and design principles were all developed at this time.
Needing to test our navigation taxonomy, I took our proposed top level navigation and had people place our sub pages where they thought they belonged. The context given was very high level, so they would not be influenced in their decision making. Testing with coworkers helped us find that some of the navigation and terminology was confusing, and we were able to tweak it to be more user friendly.
Prototypes are the name of the game at FanAI. We started with Invision, using it to create a clickable prototypes, and as a place to leave early feedback from stakeholder reviews. We were also collecting feedback from developers on Zeplin, and we noticed that conversations would get lost. To solve this problem, we moved to Invision Studio. While it did fix the problem when it came to feedback, we had an issue creating large prototypes. Invision Studio was just not powerful enough to handle all the different screens and transitions, and it did not export SVGs for our icons. We decided to move to Sketch Cloud, and have Zeplin be our single source of truth for feedback.
High Fidelity Mockups
My main responsibility was not becoming a blocker for any of the developers by having them wait on designs. Seamless handoff of high fidelity mockups to developers was very important. Utilizing Sketch and Zeplin was how we handle this. These are high fidelity mockups and prototypes that landed pilot programs with some of the largest fast food chains, beverage companies and sports teams in the world.