UX Practices.

Bracketology

Bracketology is a platform that applies fantasy sports mechanics to reality TV shows and aims to expand into a content hub with additional revenue streams. Currently, their website lacks strong conversion to the app, so the team plans to adopt a content-first strategy to enhance user engagement, drive conversions, and build brand loyalty as they grow.

The team consisted of 9 UX Designers and Web Developers working closely together to deliver redesigned web pages that increased web traffic by 5%. My role in this project as the Web Development Lead introduced me to new facets of working with a team, such as the organization, communication, and guidance required of someone managing a small team.

According to Bracketology’s team, Bracketology’s website is solely a marketing tool right now. The only incentive to use the site is to learn more about the app and it does not provide conversion to the app from the website. As a team, we decided that we will transition Bracketology to a content-first marketing strategy by creating a supplemental experience (in addition to their app) and propose changes to the site’s layout to drive users to these new features and achieve our analytics goals.

Project Scope

Deliverables

Modify and add new features to Bracketology’s marketing website, specifically reworking existing components and pages and creating new pages for extra content
Create an editable WordPress template for information input and future expansion that our sponsors can use and expand their own content after our partnership ends.
Develop visuals and infographics to clearly communicate website traffic analytics and relevant information to our sponsors.
Conduct a heuristic evaluation on the current app, identifying pain points and improvements and providing design and market recommendations for our sponsors.

Primary Research + Ideation

Consistent with the project scope, the team began with familiarizing ourselves with the Bracketology framework and its primary goals of increasing conversion to the application and providing a more interactive experience. Through Google Analytics heatmaps, page views, and lead conversion rate, our team found most web users click on show pages and the “How it Works” page before exiting the site or transitioning to creating an account via the app store or browser (depending on the viewing device). Nearly 60% of users accessed the Bracketology website through a mobile device.

Original Home Page Game Shows Layout + Heuristic Evaluation Notes

Original Home Page and How to Play Pages - Mobile Version

Using this information, our team focused on the redesign of the “Home” page, “How it Works” page, and “How to Play” show pages, with a primary focus on making the mobile layout more user-friendly. The team performed a heuristic evaluation of these pages to determine pain points and areas of improvement on both PC and mobile devices.

First Round of Ideation for Home Page and How to Play/How it Works Pages (created using Figma)

The team utilized crazy-eight ideation to create designs for contestant alliance maps and contestant social cards for a more interactive web experience. After proposing sketches, the top ideas were converted into mid-fidelity models using Figma.

Mid-Fidelity Contestant Alliance Maps

Mid-Fidelity Contestant Cards

Secondary Research

After meeting with the Bracketology team, we encountered a few roadblocks which made us reconsider the direction of our project. The team is seeking deliverables which do not require upkeep or coding that must be modified once the duration of the project ends. We pivoted to focus on the web layout and provide templates for future implementation. In the secondary research phase, the team focused on cognitive load reduction and onboarding engagement, as well as creating immaculate grid templates - as per the request of the Bracketology Team.

Sample Interactive Immaculate Grid Templates

Home Page Carousel Template

My suggestion for utilizing carousel features with minimal code peaked the interest of our sponsors. The carousels added eye-catching animation on the home page to prompt users to further explore the site’s offerings and show listings without overloading the page with repetitive information.

Final Solutions

In the end, the Purdue team delivered two redesigned web pages, one page template, and interactive gameplay mockups. The Bracketology team was pleased with the results, and is working on implementation as their team expands. The web development team worked tirelessly to ensure all pages and templates could adapt to all media screen sizes, as displayed below.

Home Page - Laptop and Mobile Versions

How to Play Template - Survivor Edition

How It Works Page