Overview
My Role
About ESPN Fantasy
About Popeyes
01
Even though it wasn’t a real project, we needed to ensure solid UX principles guided every feature tweak.
02
We could only work on this during project downtime after completing our sprint tasks, using two sprints to balance speed with creativity.
03
Everyone shared insights with the team, leveling up our knowledge of Generative AI and design as we explored these tools together.
04
Remember to have fun!
This project is purely experimental and does not reflect any business development considerations from ESPN Fantasy as a brand or product. It showcases my ideas on making the product more engaging and fun, as well as my proactive involvement in a team design experiment.
The Process
I started by assessing the data hierarchy on our current League tab screen. The League Manager’s mission is clear: first, access key team data such as matchup scores, standings, projections, and other essential league management data sets; second, easily navigate to the League Manager Tool for managing team settings. This tool tab is crucial for fine-tuning league operations.
Well-Structured Data Tabs
The current tabs are organized by how often League Managers access each dataset. Prioritizing Standings directly under the league card creates a clear, logical hierarchy. This setup aligns well with how League Managers need to interact with data.
Enhancing Data Visualization
By grouping related datasets into visually distinct sections. This would allow League Managers to scan data more easily, enhancing clarity in the hierarchy. It simplifies navigation and makes the user experience more intuitive.
Improving Key Tab Accessibility
The League Manager Tool is currently hidden among tabs. Elevating it as a standalone button with visual prominence will make managing teams more efficient.
Ensuring Visual Consistency
Redesigning the League Manager Card requires maintaining consistency with the Standings card while ensuring they are visually distinct to highlight functionality differences.
Competitor Analysis
The League Screen functions much like account settings but at the league manager level. I focused my competitor analysis on account screens from top competitors, while also exploring modern UI designs I admire. A key insight was how many apps leverage avatars as visual storytelling tools, creating an emotional connection with users and amplifying their presence. This approach taps into the psychological impact of personalization, a well-established UX/UI practice in gaming products.
Conversion-Driven Design
My competitor analysis showed that top brands use avatar-based storytelling and personalization to drive engagement. Although this was an experimental project, I approached it with a conversion-focused mindset. This framework supports my design choices, aligning engaging experiences with potential business growth.
AI-Driven Iteration
I proposed using movie avatars for League Managers, building on ESPN Fantasy's character-based logos. I generated Darth Vader to connect sports and Star Wars fans, making avatars the central storytelling element.
I designed the new data tabs' UI around the Darth Vader visual theme for consistent visuals. To boost readability, I added data labels atop each group, enhancing the League Manager’s ability to access data efficiently.
I spent 40 minutes using reference images, aesthetic styles, and nearly 80 image generations to achieve the final result.
Instead of using ChatGPT for prompts, I wrote my own, knowing the visuals I wanted. The most useful part was learning "style words" from other creators on Discord, which helped me get the desired result.
Concept Presentation
I presented this interactive prototype at our team design crits, featuring glassmorphism, gradients, and a dark mode-first approach. Inspired by the Darth Vader avatar, the design incorporated Star Wars theme music and James Earl Jones' AI voiceover to enhance the multimedia gaming experience.
Based on team feedback, I refined the dark mode UI, reverting to a listed UI pattern for data tabs to ensure consistency with our existing interface. This adjustment eased the user experience by aligning the new design with the familiar UI, helping sports fans transition seamlessly.
Takeaways
Facing time constraints and MidJourney V5’s limitations, I creatively shifted Star Wars avatars to dog and cat-like characters, using ChatGPT to craft fun Star Wars team league names. This approach enhanced visuals and added a playful, unique touch. Balancing fun experimentation with problem-solving, I enjoyed every moment of this Gen AI journey!
In this GenAI project, I identified two AI-driven workflow enhancements: first, using LLMs as designer assistants to generate moodboards, analyses, and visuals from problem statements; second, creating production-ready, scalable components for easy editing. These tools reduce iteration time, allowing designers to focus on creative and strategic work, making the process more efficient and impactful.
A key goal in this project was balancing sprint tasks with downtime work, limiting my time to explore UXR data on sports fan behaviors. I envision an LLM use case where AI could guide designers on the most effective qualitative and quantitative UXR data to investigate, ultimately generating affinity maps and personas to enable more informed design decisions and tailored experiences.
Latest Gen AI Development
Source: Adobe Blog
Note: This case study is independently created, with no sponsorship from Adobe.
Certain design processes and data have been purposefully excluded in compliance with NDAs to safeguard the confidentiality of both the company and its clients.
© 2024 ROSIE WAY • ALL RIGHTS RESERVED
