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 in Tableau until I was brought in to bring the platform to life.
My Role:
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.
Assumptions and Research
I defined, planned and carried out all user research on the project. Research activities included surveys, user testing, card sorting and affinity mapping. User testing was carried out on laptop devices and covered the entire platform, including sign in, data management, summary of team rosters, and team deep dive.
Persona Creation
I synthesized personas from observations, research and stakeholder interviews. I included and demographic characteristics, needs, tasks, concerns, personality, and platform expertise. I believe it is essential to embrace and maintain a user-centered design focus and methodology.
LEARNINGS
• Difficult to know what ROI in both online and offline investment
• Managers are just as likely to view on mobile as his desktop
• Analyst will work almost exclusively on desktop, and log in frequently
Design System
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.
Responsibilities
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.
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.
Iteration
Collaborated closely with data scientists and product managers in an iterative design process, frequently sharing my screen to walk through design ideas and gather feedback, regularly marking up designs for refinement.
Visual Design
Building upon the established brand values and drawing inspiration from the moodboards and other research, I worked toward a clean, modern ascetic where the data visualizations take center stage. Click to enlarge the images.
