Background

I worked with a backend developer to create a website that enables users to play a fantasy sports type of game with the TV shows, "The Bachelor" and "The Bachelorette". After participating on a different website and finding it confusing to use, we decided to redesign it. I focused on the front end web development and visual design of the site. The beta version is currently released and the full-featured version is in the works at thebachleague.com!

Research

Since there are already websites and apps available for such a concept, we wanted to differentiate ourselves with improved user experience and branding. So we looked at existing sites and apps and also surveyed users of the website we had used previously.

The survey asked users how they used the previous site and what features worked and didn't work for them. We found that the most important features to league commissioners (administrative users) was a way to email users from the site so they didn't have to compile email addresses on their own from a different application. Regular users most wanted a way to be able to fill in future weeks' brackets ahead of time. They also found the site difficult to use on phones since the site was not optimized for smaller screens.

We also performed competitive analysis on other Bachelor/Bachelorette game sites/apps and fantasy football sites/apps to see what worked well and what didn't and to evaluate their visual design and information architecture. To separate ourselves from other sites, we decided to draw inspiration from our experience with fantasy football.

PRODUCT ROADMAP

With the new season of "The Bachelorette" premiering May 23rd (which at the time was about 2 weeks away), we wanted to release a beta version to a select few and just get in the bare minimum amount of features, a beta MVP so-to-speak. We divided the features into three different versions based on need for game play and difficulty to implement. For the beta version, we focused on the minimum amount of features needed to play the game for one week: a group home page, a way to set the lineup or fill in the bracket, and login/signup.

product-roadmap

Interaction Design

I created some basic user flows to get an idea of what pages we would need to design.

user-flows-signup user-flows

SITE MAP

Based on the features we wanted to include, I created the following site map. The goal was to make all the features easily accessible from a single navbar. Even if the user is not signed in, they would still see the full navbar. If they view a page like "League" that would show content specific to their login information, they would see a preview of the page and a call-to-action to sign up or login.

Click to open in a new tab sitemap

WIREFRAMES

I created low-fidelity wireframes in Sketch for the key screens. These are the updated versions after the beta version was released.

Click to open in a new tab wireframes

Visual Design

STYLE TILE

I created several logos and style tiles, and we settled on the final style tile below. We chose fun, bold colors and a ring-shaped rose for the logo design because of the prominence of a ring and roses throughout the show.

styletile

Conclusion

On May 23rd, we launched a beta version to a few testers. From the beta version, we learned that picking contestants was not intuitive. Users had to drag and drop pictures from one side of the screen to the other, and users were confused about what to do at first. So both of us being avid fantasy sports fans, we decided to implement something more similar to fantasy football where you have a lineup and a bench. Sites like Yahoo, ESPN, and NFL are tried and true. Even better, we knew what people liked and didn't like about them. So we were able to take that information and turn it into a more intuitive picking feature for The Bach League. Below are the final designs that we're working off of for the full-featured 1.0 version set to launch for next season's The Bachelor.

Click to open in a new tab final-desktop