Sports Illustrated App

In 2020, after Maven's (Arena Group's) acquisition of Sports Illustrated (SI), I embarked on this project. I guided the design process independently, moving from concept to final execution within a challenging 3-month timeline. The dual mission was to honor the spirit of Sports Illustrated while crafting an engaging mobile experience that resonates with both loyal followers and a new generation of sports enthusiasts.

While early styling direction came from the Art Director, I quickly assumed leadership, steering the project with a relentless focus on user needs, customization, simplicity, and excellence. The endeavor required meticulous attention to designing an intuitive user interface, optimizing user flows, and curating personalized content.

From aesthetics to user-friendliness, every decision was meticulously crafted to resonate with the target audience, aligning with the brand's values and the technological landscape. Drawing inspiration from iconic Sports Illustrated magazine covers, the challenge was not just about creating a visually appealing interface but about building an interactive platform that truly connects the world of sports with its audience.

It was not just about crafting a visually appealing interface but about building an interactive platform that brings the world of sports to the fingertips of the users.

The foremost challenge lay in translating the well-established Sports Illustrated brand into a mobile platform that would resonate with both faithful followers and new users. Striking a perfect balance between form and function, aesthetics and usability, was a significant design hurdle.

Amidst an unexpected global pandemic challenge, we replaced familiar face-to-face collaboration with remote work. The pressure of the looming deadline was intensified by a lack of previous user research.

**Tight Deadline:** Following the acquisition of Sports Illustrated by Arena Group in 2019, we were faced with the mammoth task of designing, implementing, and launching a completely new app within a short time frame in early 2020.

**Loss of User Research Data:** The transition led to the loss of all previous user research data. Starting from scratch, we had to re-understand our audience, their needs, behaviors, and expectations, which was a time-consuming and daunting task.

**COVID-19 Pandemic:** The unexpected onset of the pandemic forced an immediate transition to a remote working environment, adding another layer of complexity to an already challenging project.

In the fast-paced environment of digital transformation, collaboration with various stakeholders—from developers to content creators—added rich layers of complexity to the process. It was a delicate balance that required thoughtful alignment with executives, senior staff, and extensive brainstorming sessions. The COVID-19 pandemic made this even more challenging, as teams were forced to work remotely and new challenges to communication and coordination arose.

In the journey to redefine the Sports Illustrated app, understanding our users' needs, preferences, and behaviors was a critical starting point. Here's how we approached this vital aspect:

• **Leveraging Existing User Base:** Our team, consisting of dedicated Sports Illustrated readers, offered an initial understanding of what keeps users engaged with Sports Illustrated. We explored existing preferences and identified opportunities for enhancement.
• **In-App Survey:** To extend beyond our own experiences, we launched an in-app survey. The responses revealed that users sought a personalized space in the digital world—a hub that felt tailor-made for them. Knowing what sports and teams mattered most to them was a priority.

By employing a combination of self-reflection, surveys, we were able to delve into the complex landscape of our users' expectations and preferences. This foundational understanding enabled us to tailor the app's experience to the distinct needs of the Sports Illustrated audience.

Aligning the revamped Sports Illustrated app with the legacy and current identity of the brand was an indispensable component of the project. Here's how we approached this complex task:

• **Collaboration with Brand Managers:** We worked hand-in-hand with the brand managers to ensure that every design aspect, both visual and functional, was meticulously crafted to maintain coherence with Sports Illustrated's ethos. It was a process filled with constant dialogue and shared vision.
• **Infusion of Modern Design Elements:** While the brand's legacy was central to our design, we understood the importance of resonating with today's users. We blended contemporary design features without losing sight of what makes Sports Illustrated iconic, ensuring that we struck the right balance between tradition and modernity.
• **Seamless Alignment with Legacy:** The challenge lay in preserving the brand's time-honored legacy while still appealing to a new generation of users. By infusing modern elements, we created a seamless transition from traditional media to a mobile platform, encapsulating the essence of the brand in a fresh way.
• **Image Presentation:** The design process was marked by an intensive exploration of brand elements and mood boards, culminating in meetings where the alignment efforts were showcased. These collaborative efforts enabled us to create a design that is visually cohesive and true to the Sports Illustrated brand.

By weaving together the brand's rich history, our team's insights as dedicated readers, and a forward-looking design perspective, we successfully aligned the app with the iconic Sports Illustrated brand. This alignment was not just visual or functional; it extended to capturing the spirit, values, and trusted reputation that define Sports Illustrated.

In our pursuit of a successful redesign for the Sports Illustrated App, gaining a clear understanding of the existing app and the competitive landscape was crucial. This phase aimed to recognize the current state and position of the app within the market and served as a foundation for subsequent insights.

• **Exploring Trends and Best Practices:** An in-depth analysis of various sports apps, such as ESPN, Yahoo Sports, The Athletic, the Bleacher Report, and NBC Sports, allowed us to identify prevailing trends and best practices in the industry.
• **Understanding Challenges and Opportunities:** This examination led to the discovery of specific challenges faced by the Sports Illustrated App and the unearthing of opportunities for innovation and differentiation.
• **Internal Analysis of the Old SI App:** Delving into the existing SI app, we identified its limitations, such as development with react native, lack of login features, and an absence of magazine access. Equally, insights were gleaned from its unique positioning and value to readers.
• **Stakeholder Insights:** Meetings with key stakeholders and critiques of the old SI app helped us understand its context and relevance to users and the brand.
• **Broadening the View:** To obtain a comprehensive perspective, we conducted a competitive analysis that included popular sports apps, forming a well-rounded view of the space the Sports Illustrated App inhabits.

This phase provided a nuanced understanding of where the Sports Illustrated App stood, both internally and within the larger context. It laid the groundwork for further exploration into key findings and learnings, which would be instrumental in shaping our design goals and approach.

The research phase yielded critical insights that shaped the design and development of the Sports Illustrated App. Through user analysis, a deep understanding of user needs and preferences was obtained, guiding the creation of user-centric features. Brand alignment ensured that the app resonated with the iconic Sports Illustrated legacy, while competitor analysis provided valuable benchmarks and opportunities for differentiation.

These key findings created a robust foundation for an innovative, engaging, and user-friendly mobile experience:

• **Deep Understanding of User Needs:** Comprehensive analysis provided insights into what users really wanted from the Sports Illustrated App
• **Successful Alignment with the Sports Illustrated Brand's Legacy:** We ensured that the new design resonated with the values and history of the iconic brand.
• **Valuable Insights from Competitor Analysis:** By studying competitors, we identified areas where the Sports Illustrated App could truly stand out, guiding our innovation and differentiation.

The challenge was to blend user desires with the proud legacy of Sports Illustrated's comprehensive sports coverage. The voice of our users called for a personalized, engaging experience, while the brand's voice reminded us of its unique essence.

Standing at this crossroads, we asked ourselves, "How can we craft a Sports Illustrated app experience that's personalized, engaging, and serves up in-depth content about users' favorite teams?" Our resolve was set, our tools sharpened, and we were ready to embark on the challenging yet thrilling journey of transforming the Sports Illustrated app experience.

In the heart of a user-centric design lies a deep understanding of the very people for whom the product is created. The Sports Illustrated App aimed to serve a complex and diverse user base, and we recognized early on that we had to see through their eyes, feel their passion, and understand their needs.

Using the detailed findings from the research phase, we began to notice patterns, similarities, and unique characteristics within the audience. These insights became the foundation for our personas, allowing us to craft representations that truly resonated with the real users.

**Crafting the Personas:**

• **The Sports Enthusiast:** Young, male, avid followers craving insights and updates.
• **The Casual Fan:** Broad age range, balanced gender, seeks easy engagement.
• **The Legacy Admirer:** Mature, male, values history, and expert opinions.

Each persona guided the design, personalizing the app for depth, enjoyment, and connection to the sports legacy.

Upon analyzing the overlap between Legacy Admirers and Enthusiasts, we created two unified personas, **Lucy** and **Daniel**. Lucy reflects the passionate, traditional sports fan, while Daniel captures the tech-driven enthusiast. This fusion allowed us to create an experience that resonated with a broader audience, balancing nostalgia with modernity.

In the complex landscape of designing the Sports Illustrated App, we faced an intricate challenge: creating an app experience that would cater to diverse user needs without losing the essence of Sports Illustrated's celebrated legacy. The following outlines our strategic approach to defining the goals.

**Collaborative Definition**

Through intensive brainstorming sessions and rigorous thinking, we aligned with key stakeholders within Sports Illustrated to set several essential goals:

• Crafting a personalized user experience.
• Integrating the iconic Sports Illustrated brand with contemporary design.
• Developing an interactive hub for sports enthusiasts.
• Ensuring usability, accessibility, and adaptability across different platforms.
• Maintaining engaging and coherent design throughout the app.

These goals would serve as our North Star, channeling our energies toward crafting an app experience that would resonate with Sports Illustrated's core values and provide users with a seamless interaction.

**User-Centered Approach**

With two primary personas, Daniel and Lucy, representing different user types, we focused on three core principles:

• **Personalization:** Tailoring the app to individual preferences and interests.
• **Simplicity:** Creating an intuitive and easy-to-navigate app.
• **User-Centricity:** Keeping users at the core of all design decisions.

These principles acted as our guiding tools, sharpening our focus, and reinforcing our determination to elevate the Sports Illustrated app experience.

**Balancing Legacy and Innovation**

While embracing the user-centric approach, we also recognized the importance of preserving the proud legacy of Sports Illustrated's in-depth coverage. We aimed to create an app that would reflect users' unique tastes and interests while honoring the values that make Sports Illustrated a trusted name in sports coverage.

With our well-defined user needs, business objectives, and design principles, our team embarked on an exhilarating journey into ideation. We immersed ourselves in the vibrancy of our war room, a place buzzing with anticipation, creativity, and purpose.

Guided by the personas 'The Hardcore Fan Daniel' and 'The Casual Fan Lucy' that I crafted, we navigated through a sea of ideas. Their unique journeys, frustrations, and desires illuminated our path, serving as navigational stars in our creative voyage.

**With Lucy, the Casual Fan:** We connected with her longing for simplicity and recognized her struggle with information overload. Her desire for uncomplicated ways to engage with local sports resonated deeply within the team.

**With Daniel, the Hardcore Fan:** His craving for real-time, comprehensive information resonated with us. We acknowledged his frustration with delayed content and strived to design a platform that would satisfy his need for immediacy and depth.

Through this journey, we unearthed key insights:

• **Personalized Experience:** Both personas sought personalization but in contrasting ways. Lucy longed for a simplified experience with local updates, while Daniel desired thorough insights into his favorite teams.
• **Content Volume:** Lucy was overwhelmed by the sheer volume of content, while Daniel thirsted for it, provided it was timely and relevant.
• **User Engagement:** Lucy favored a relaxed interaction, while Daniel sought lively engagement with real-time updates and profound analysis.
• **User-Friendly Design:** Lucy's journey emphasized effortless updates, while Daniel's outlined an organized, efficient platform delivering abundant information.

These insights shaped our ideation, steering us towards solutions that catered to the diverse needs of both personas.

Our first brainstorm led to a unique idea: personalizing the app around user-selected teams. From this spark, we envisioned an entire app experience revolving around those selections.

Inspired by the competitive landscape, we also realized the need for an effortless, personalized notification experience, tailoring notifications based on browsing behavior. This aligned with our goal of offering fresh, engaging content through daily updates and digital magazine access.

We adopted a minimalist approach to the Maven platform login flow, resulting in a streamlined and efficient experience for users. This was achieved by carefully removing unnecessary steps and optimizing the remaining steps to be as concise and straightforward as possible.

We also contemplated social engagement features, such as reactions and comments. However, recognizing constraints like the transient nature of sports news, project scope, timeline, and potential bugs, we prioritized our efforts, ultimately postponing these ideas to maintain focus on overall user experience.

The ideation phase was an electrifying exercise in creative exploration while remaining grounded in user needs and feasibility. The process was a delicate balance between aspiration and pragmatism.

Upon completion, we immediately updated our user journeys, visualizing how Lucy and Daniel would interact with the newly conceived features. This allowed us to further refine our approach and ensure alignment with their needs.

Without hesitation, I translated our brainstorming sessions into low-fidelity wireframes and flows, bringing our vibrant ideas into tangible form. This early visualization facilitated immediate feedback and collaboration within the team.

Our approach was not merely about delivering a product; it was about crafting an experience that Lucy and Daniel would cherish. This rapid ideation and implementation process epitomized our team's agility, commitment, and unwavering dedication to creating a user-centered solution. What a thrilling journey!

Why high-fidelity? Our journey began with a choice to present users with a complete and authentic experience during the testing phase. Limited by the project's timeline, which did not allow for multiple rounds of testing and iteration, we crafted our prototype with utmost completeness right from the start.

**Building the First Touchpoints: Login and Landing Experiences**

Our foundation started with designing the login and landing experiences, including the feature we called the "daily cover." These initial touchpoints serve as the gateway for our users, and we knew they needed to be perfect. The goal was simple but vital: to set the right tone with an easy and inviting login process, coupled with a dynamic landing experience that draws the user in. This set the stage for the daily cover, creating a seamless transition into the application.

**A Collaborative Approach: Teamwork in Prototyping**

During this phase, close collaboration within our team was essential. Daily stand-ups and frequent meetings kept everyone aligned on design direction and technical feasibility. The synergy amongst us ensured that the prototypes were not just user-friendly but also aligned with technical possibilities.

We used Figma to create high-fidelity prototypes, ensuring a comprehensive user testing experience. This allowed us to evaluate our designs in a context that closely mimicked real-world usage

We adopted 'dogfooding' approach, where we utilized our prototypes in the way our users would. By stepping into our users' shoes, we identified usability issues early, allowing us to iterate the design with rapid precision. It was a true empathy exercise that paid dividends in enhancing usability.

**Reflection: Lessons Learned from Prototyping**

In hindsight, the prototyping phase was a treasure trove of learning experiences. It underlined the importance of crafting comprehensive prototypes to capture maximum user feedback, the significance of continuous team communication, and the effectiveness of 'dogfooding' to empathize and refine our designs.

Visual design was pivotal in transforming the iconic Sports Illustrated brand into an engaging and accessible mobile experience. Through my keen eye for aesthetics, I established a harmonious visual language that both aligned with the brand's heritage and embraced contemporary design trends.

**Colors, Typography, and Imagery**

I carefully crafted colors, typography, imagery, and UI elements to create an appealing and intuitive interface. This meticulous approach not only honored the brand's visual identity but also infused it with modern flair. Attention to detail, creativity, and strict adherence to brand guidelines were paramount, ensuring that the visual design resonated with users, enhancing both engagement and satisfaction.

**Typeface Selection**

Some may have noticed that, we departed from the 'Industry' typeface on SI's web and instead chose to employ Roboto for Android and SF for iOS. As the lead UX Designer responsible for this decision, I recognized the importance of a typeface that would best serve the daily needs of our users while maintaining alignment with Sports Illustrated's aesthetic values:

• **User-Centric Design:** Industry, the brand's traditional font, is strong in character, but can be challenging for continuous reading. I chose Roboto and SF to create a more friendly and accessible design, enriching the reading experience.
• **Alignment with SI’s Branding:** Although departing from the geometric nature of Industry, I aligned the aesthetic appearance of Roboto and SF with SI's brand legacy. This choice provided a softened, yet cohesive look.
• **Careful Tuning:** I meticulously fine-tuned the typography, aligning the style of elements such as headline text with the SI branding. By using Roboto and SF fonts, I infused the design with both the essence of Sports Illustrated and a touch of modern mobile era aesthetics.
• **Strategic Balance:** My decision encapsulated a thoughtful blend of SI's iconic aesthetic and an optimized user experience designed for mobile reading.

This choice in typeface was more than just a design preference; it was a calculated decision that encapsulated the essence of Sports Illustrated's rich legacy while acknowledging the contemporary needs of our users.

With the creation of our app, we embarked on shaping the initial interaction users would experience - the login/signup process. Reflecting on our previous work with maven.io and leveraging shared backend technologies, we initially adopted a similar flow to ensure efficiency.

However, an interesting observation by an executive led us to rethink our design. The original login screen featured Drew Brees, a legendary player whose looming retirement meant a potential misalignment with our brand's long-term vision. Heeding this insight, we opted for a dark, simple background that better underscored our brand without reliance on a particular individual.

The serendipitous timing of Drew Brees' retirement shortly after our redesign highlighted our adaptability and foresight, demonstrating the critical role of branding in crafting a consistent and enduring user experience.

Our initial login and onboarding flow required users to select at least three entities, whether leagues, teams, reporters, or topics, with the goal of offering a personalized experience. Utilizing a “sheet” UI, we hoped to alleviate any navigational anxiety.

**Problem Identification**

Despite our intentions, user testing revealed shortcomings in our design, including:

• The lack of resonance with the inclusion of reporters.
• Overwhelming notifications when following a league.
• Confusion around the “topics” option.
• Challenges with the extensive list in team selection.

**Discoveries and Iterations**

Our initial login and onboarding flow required users to select at least three entities, whether leagues, teams, reporters, or topics, with the goal of offering a personalized experience. Utilizing a “sheet” UI, we hoped to alleviate any navigational anxiety.

Our final design focused on guiding users through a tailored onboarding experience. Introducing a welcome screen, reducing the team following requirement, and redesigning the layout ensured a space-efficient and frictionless navigation. These refinements illustrated the paramount role of user-centered design in forging successful digital experiences.

Our original vision for the scoreboard aimed to simplify access to scores for the casual sports fan. Placed at the top of the content stream, we hoped for a streamlined experience.

However, as testing with hardcore sports fans progressed, we uncovered a deeper connection between the scoreboard and the content. Facing technical challenges in customization, we decided to centralize the scoreboard and render it a dedicated section.

The redesign journey included collaboration with in-house sports enthusiasts, leading to the adaptation of a universal football scoreboard for multiple sports. This final design, although unexpected, proved a product born out of user needs, technical feasibility, and innovative design considerations.

A central tool in our process was Figma, which streamlined the design-to-development handoff. However, its efficiency alone wasn't enough. I crafted detailed design systems and guidelines that offered clarity and consistency across the app, all the while regularly reviewing our progress to detect potential issues early.

A key part of our process was embracing "dogfooding" where we used the app ourselves to understand the user's perspective. This practice was instrumental in unearthing unexpected challenges, such as the placement of the Daily Cover.

The Daily Cover initially appeared constantly within our design, regardless of updates. While this was an intentional feature, real-world testing revealed that it caused inconvenience for our users.

We recognized the need to refine this aspect of our design. Instead of having the Daily Cover always present, we opted to display it only when updated. Additionally, we introduced features allowing users to revisit past covers, addressing the issue while enhancing the overall user experience.

Our approach to the Daily Cover exemplifies our iterative thinking, as we responded to user feedback and adapted our design to meet their needs.

The implementation phase underscored the importance of collaboration, iterative thinking, and user-centered focus. Our experience with the Daily Cover in particular highlights how real-world testing can reveal unforeseen challenges, requiring swift and thoughtful responses. By continuously adapting our design, we ensured alignment with our goals and delivered a more intuitive and satisfying experience for our users.

The Sports Illustrated App's journey was marked by success and valuable insights. From conception to launch, user satisfaction and engagement metrics reflected our dedication to quality design. We learned the importance of user-centricity, collaboration, and alignment with brand values, leading to a product that resonates with sports enthusiasts.

**Achievements:**

Our redesign have resulted in significant improvements in user engagement and retention across both iOS and Android platforms:

• **iOS Metrics**: 19% rise in session length, 12% growth in daily active users, and a notable 27% increase in user retention.
• **Android Metrics**: 14% surge in session length, 10% expansion in daily active users, and a 19% enhancement in user retention.

The elevated app store ratings post-redesign, advancing to 4.5 on iOS and 4.4 on Android, stood testament to our work. Users commended the intuitive design and personalized experience, though some suggested areas for refinement.

Throughout the project, our team experienced profound growth, both professionally and personally. Navigating the challenges, particularly those posed by the COVID-19 pandemic, we fostered resilience, unity, and adaptability. The feedback-driven improvements and our ability to remain agile underscored our commitment to delivering a product that resonated deeply with users.

Reflecting on the journey, we recognize the importance of continuous improvement and evolution. While celebrating our achievements, we're also mindful of the lessons learned, which will guide our future endeavors.

The measurement and learning phase that underlines our achievements and limitations, driving us to keep evolving based on valuable user insights is a continuous process of acknowledgment, refinement, and growth. It is not just about metrics and feedback, but a testament to our team's evolution, dedication, and the relentless pursuit of excellence.