BACKGROUND

Fanatics Live, a burgeoning player in the sports memorabilia industry, sought to create a digital presence in the iOS market. The objective was to develop an app that would resonate with the unique needs of card collectors and breakers. As a new addition to the team, with just a week's exposure to the company and its market, I faced the formidable task of designing these features under an incredibly tight deadline.

CHALLENGES

Rapid Assimilation: Understanding the intricate market of card collecting and sports card breaking within a limited timeframe.

1. Speedy Execution: Designing and delivering five critical features in five weeks.

2. Cross-Team Collaboration: Working with engineering teams across different time zones, mainly Amsterdam and China.

3. User Testing: No tools to validate our design ideas before development.

4. Process: No design process, product vision or true plan of attack.

5. New Team: Brand new design, product and engineering teams.

CREATING A VISION TO WORK FROM

Since we lacked a clear vision for the product and its potential, I decided to explore how we could shape the app and think through the necessary steps for its development. This was a way for me to wrap my head around the possibilities and potential needs. I wanted a starting point to work from.

first touchpoint for buyers

One of the most important views in the app was the show feed, serving as the central hub for buyers to discover and engage with shows and leagues of interest, and to initiate participation in breaks. Initially, the requirement was to present a list of upcoming shows and live shows using a 2x2 card layout. The directive was to emulate the functionality of the WhatNot app, the prominent player within our industry.

Initial Requirement:

• Design a view where users can easily discover and access a catalog of current and upcoming shows, using a 2x2 card grid similar to Whatnot's interface.

reframing requirements

How can I design an intuitive and visually engaging interface that allows users to effortlessly browse and find current and upcoming shows? This interface should feature a 2x2 card grid layout, inspired by the Whatnot platform. Each card in the grid will represent a different show, with key information displayed in an easy-to-read format.

Key considerations for the design include:

1. Visual Appeal: Use high-quality images and a color scheme that is both attractive and consistent with the brand's identity. Ensure that the grid layout is not cluttered, allowing each show's card to stand out.

2. Ease of Navigation: The view should be straightforward, allowing users to seamlessly scroll through the show options. The grid should be familiar, adapting gracefully to different screen sizes and devices.

3. Informative Cards: Each card should provide essential information about the show at a glance, such as the title, a brief description, and the airing date. The design should balance the amount of text and imagery, avoiding information overload.

4. Accessibility: Ensure the design is accessible, with clear text, alt text for images, and keyboard navigability. The layout should accommodate users with different abilities and preferences.

Design Output

• 2x2 Cards with Rail

• Hero Carousel

• League Filter

• For You: During the onboarding process, buyers are prompted to indicate the teams they are interested in. Based on their selection, all relevant shows would be displayed to provide immediate satisfaction and strive to meet their expectations.

Bonus Idea

• Live Topics: One idea that I found intriguing is the possibility of introducing a topics feature that enables buyers to engage in discussions about leagues, players, and other subjects of interest to them. The concept wasn't initially planned, but since our auction feature already included a live chat experience, I thought we could make use of that and develop a topics forum using the same functionality. We just needed to design the front end user experience.

DISAGREE & COMMIT

Although the Topics concept was originally beyond the initial scope I had a strong belief that we needed something to keep buyers in our app before and after a purchase. There was significant interest in the idea from both the development and product teams. In response, I put on my PM hat and created a PRFAQ to explore how we could viably implement it with minimal effort.

After reviewing the PRFAQ with our engineering group we decided to keep it in our back pocket and focus on the initial features necessary for launch. Which was the right move.

ITERATIVE EXPLORATION

After exploring various options and iterating through different design concepts, I narrowed it down to a few hybrid versions that incorporate elements and ideas from my previous iterations.

USER FEEDBACK

User testing plays a vital role in my design process. It gives me valuable feedback from real people outside our immediate circles. Even without dedicated testing tools, I was determined to gather this data to keep our design free from group bias and personal opinions. By making user testing a regular part of my design process, I always gain real insights that help make better design decisions and create experiences that truly meet users' needs.

After collecting feedback from several preliminary wireframes, I developed three versions that prioritized the most intuitive elements, which testers grasped immediately.

LAUNCH & LEARN

Given the constraints of my timeline and the need to design the experience of Profiles, Search, Activity Center, and Direct Messaging, we decided to conduct A/B testing on Mock 2 and 3. These mockups were chosen because they aligned closely with the original requirements and were the most feasible to develop alongside the other features.

Measuring Performance in Mixpanel

After conducting A/B testing on the Show Feed, we discovered that Mock 3 showed significantly better performance, with a 10% increase in transitioning from feed view to show view compared to Mock 2. It effectively drove more users to engage with shows.

Improvements

• Tapped through rates on the “View All” button on the rail were quite dismal at 0.6%.

• Hero cards had higher tap through rates than the 2x2 cards which meant fans missed additional content and upcoming shows below the fold.

• Our original assumption was that users would scroll to find content but this was not the case instead they focused on whatever they saw first.

Wins

• Conversion rates from the show feed to Live shows was 86.4%. (The caveat in this statistic was that fans had a high intent when they found shows and cards they were interested in.)

• 5 Star app rating

• User growth was consistent week over week.

OUTCOME

The show feed has been instrumental in helping our users discover live shows that align with their interests, leading to increased purchases for our sellers. We now have a solid foundation to build additional content trays and features on top of.

The problem

Homeowners previously lacked a digital platform to share and receive real-time safety information, and had no connection with nearby neighbors. Additionally, they missed a deeper community link with law enforcement and other public service agencies.

Our primary focus was to design an engaging user experience that made it easy for users to receive real-time safety related information and eventually connect with local public safety agencies and law enforcement.

I aimed to also integrate Ring device video footage and account management features into a new app, while creating a cohesive look and feel that kept the Ring brand at the forefront of the design yet had its own unique voice, navigation, and branding. I also had to deliver the full end-to-end user experience in a limited timeframe.

Understanding our Users

After identifying the problem and general vision, I started to deep dive into our existing Ring user base and discovered that the majority of users were primarily older homeowners who were focused on securing their property.

They often relied on local news for updates on their neighborhood but had limited experience with social media apps. They were familiar with Facebook but had minimal exposure to Nextdoor, and the barrier to entry deterred them from joining.

Value Proposition & Aligning with Stakeholders

To kick things off we utilized some existing illustrations and created a benefits-focused onboarding design to secure alignment with our stakeholders on the vision before anything else. Priority was placed on delivering quickly, while ensuring everyone was in agreement on the concept and value proposition.

“Our Neighbors app connects homeowners with their neighbors and local public service agencies to provide real-time safety information and foster a stronger sense of community. With Neighbors, homeowners can stay informed about potential hazards in their area, communicate with their neighbors, and have direct access to local law enforcement. Say goodbye to feeling isolated and uninformed about safety in your neighborhood.”

Rough Feature Map

After getting doing some a bit of research on some of our Ring users I developed a rudimentary feature map to assist with understanding what made sense from a navigation and functionality standpoint.

The Navigation Dilemma

The main feature and primary view of the app was the newsfeed, but we also needed to provide easy access to other sections of the app for users to view more detailed safety information. There was an unwillingness by dev to implement a bottom navigation bar, which was my initial proposal, so I had to adapt and come up with an alternative that was easier to develop yet straightforward for users to navigate.

Incident Cards | Commenting | Map View

When designing the content cards, We considered user's behavior when consuming news and how that could be applied to the neighbor's feed. One of our designers proposed a highly innovative approach to social feeds. However, due to time constraints and the need to deliver the project quickly, we opted for a familiar pattern that is widely used in most social media apps with feeds. We adopted a similar approach or commenting to accommodate the needs of all users, regardless of technical proficiency.

Posting Guidelines

Having determined the content card layout, we collaborated with our Trust & Safety team to create posting guidelines. To ensure compliance with the unique guidelines for each category, we presented our designs to our legal team before conducting user testing.

User Testing & Design Delivery

After testing early low-fidelity designs with Ring users and incorporating their feedback, we made adjustments to the newsfeed cards, map view and category language. These changes led to improved identification of incident categories and their location, enabling Ring users to more easily determine the proximity of incidents to their home or current location. Consultation with legal was necessary to guarantee compliance with our standards.

Summary

Situation: Homeowners lacked a digital platform to share and receive real-time safety information and connect with neighbors, law enforcement, and public service agencies.

Task: Create a user-friendly app for neighborhood safety that can incorporate Ring device video clips and account management. The app should have a distinctive yet unified design and provide a seamless user experience within a short timeframe.

Actions:

1. Identified the target user base as older homeowners focused on property security.

2. Developed a value proposition and secured alignment with stakeholders on the project's vision.

3. Created a rudimentary feature map for navigation and functionality.

4. Designed content cards based on users' behavior when consuming news, while accommodating different technical proficiencies.

5. Collaborated with the Trust & Safety team and consulted with legal to ensure compliance with posting guidelines.

6. Conducted user testing, incorporating feedback to improve the design.

7. Addressed scope creep by proposing and implementing a "scope creep token" system to better manage PM requests.

Result: The Neighbors app gained popularity with over 20 million monthly active users, established partnerships with public safety agencies, and received a 5-star rating with over 262,000 reviews since its launch.

The Problem

Geeks & Gamers, also known as "Looters," were passionate about expressing their fandom but lacked a platform to connect with other like-minded individuals. The only mainstream option available to them was Facebook groups. By creating an experience within our own ecosystem, we aimed to empower them to fully express and share their fandom with a community of people who share similar interests while simultaneously providing a unique mobile experience that would drive more sales at a higher conversion rate.

Challenges

• Organizing our product offering during a rebranding process

• Clearly defining the value proposition for each type of crate in our product catalog

• Structuring our content to avoid confusion and information overload

• Integrating key web features

Value Prop & Product Discovery

One of the initial challenges was to properly classify our product offerings and identify our target audience. This process helped me devise a strategy for creating a digital catalog of our crate offerings, organized by type of fandom.

Initial implementation was one Loot Crate box with multiple products and collectibles from different brands.

The Journey

By engaging with customers about our current website, I gained insight into the typical journey of our "Looters" and identified pain points and key aspects of their experience. This was crucial in understanding how they navigate the app experience and determining what elements could be transferred from the web to mobile and what needed to be removed to streamline the purchasing process.

I broke down their journey by:

• Flow of information

• User Goals

• Pain Points

• Opportunities

Storytelling and Hooks

To understand how users would perceive our product offerings, I evaluated key moments in their journey such as:

• Triggers - What made them come to our app?

• Actions - What’s the next action we want them to take?

• Reward - What is their reward for taking this action?

• Investment - How deep is their investment in this journey?

Structure

After conducting a thorough analysis of our user journey, navigation, product offerings, and user personas, I began to develop ideas for structuring the content. I utilized Lo-Fi designs to explore these ideas, allowing me to focus on information hierarchy and content consumption without getting too caught up in the design details. My initial priority was to prioritize and implement our core MVP features.

• Buying Experience

• Topics / Content Feed

• Commenting

• Selecting Topics

Design Deliverable

After testing low fidelity designs with our "Looters" and incorporating their feedback, as well as simplifying the feature set due to development constraints, we arrived at a streamlined design layout with minimal text, which performed exceptionally well in testing. Despite the positive results of the lo-fi testing, I wanted to conduct further testing with a high fidelity version, incorporating our brand colors to provide a complete experience for our testers.

PROJECT RESULT

During the first month of launch, the Loot Crate mobile app quickly became the preferred platform for our iOS users. We saw a significant decline in daily active web users as they migrated to the app, resulting in a 12.3% conversion rate from storefront to checkout and 500,000 monthly active users within the first 27 days. Due to its success, we began development of an Android version.

Summary

Situation: Geeks & Gamers, or "Looters," lacked a platform to connect with like-minded individuals and express their fandom, with Facebook groups being their only mainstream option.

Task: Create an experience within our ecosystem to empower users to share their interests and fully express their fandom, while addressing challenges like rebranding, defining value propositions, structuring content, and integrating web features.

Actions:

1. Classified product offerings and identified the target audience to create a digital catalog of crate offerings.

2. Engaged with customers to understand their journey, pain points, and app navigation, and determined which elements to transfer from web to mobile.

3. Evaluated key moments in users' journey (triggers, actions, rewards, and investment) to understand their perception of product offerings.

4. Conducted a thorough analysis of user journey, navigation, product offerings, and user personas, and developed ideas for content structure using Lo-Fi designs.

5. Prioritized and implemented core MVP features, including buying experience, content feed, commenting, and selecting topics.

6. Tested low fidelity designs with users, incorporated feedback, and simplified the feature set due to development constraints.

Result: The Loot Crate mobile app became the preferred platform for iOS users, with a 12.3% conversion rate from storefront to checkout and 500,000 monthly active users within the first 27 days. The success led to the development of an Android version.

Content Management system

During the development phase, I worked closely with our Scrum Master, Harold, to find a dependable CMS to integrate into the app. After conducting thorough research, we identified Contentful as a promising option and presented it to the Head of Product, Moonie. Subsequently, we collaborated with the Contentful team to incorporate the required APIs for retrieving essential content.

SOCIAL MODERATION

SPORTS CRATE

Information architecture and v1 wireframes