Guillotine Leagues App
Project Overview
Guillotine Leagues is a twist on the fantasy football experience, presented in a website and mobile app. Though the game is clearly a hit within the community, the app experience often detracted from the joy, suspense, and friendly competition the game has to offer. Our team embarked on redesigning the mobile app, focusing on increasing user confidence through the complex bidding system and by introducing delighter elements by including branding assets found on the website.
My Role
I conducted research as part of a team that uncovered key areas of success and pain points for the primary users of this platform. From these findings, I created an interactive prototype of the waiver bid system to model areas of recommended improvement with annotations for stakeholders.
In This Case Study
OPPORTUNITY SPACE To what degree does the current app meet user expectations and how can we recommend incremental improvements?
METHODOLOGY Iterative process of research (including directed storytelling, contextual inquiry, and comparative analysis, and usability testing) and prototyping
FEATURES & RESEARCHER’S INSIGHTS 2 key improvements to improve usability and desirability:
1 — Improve user confidence by increasing learnability throughout the user experience
2 — Infuse delighting features throughout the user experience
SUMMARY
APPENDIX
For this project, the goal was to enhance the usability and desirability of the current app in a meaningful way for fantasy football players.
Guillotine Leagues is a twist on the fantasy football experience, presented in a website and mobile app. This last-man-standing style game has been serving its user base for about 3 years since its inception when a local caller chatted with radio personality, Paul Charchian, about this new twist on the game: a last man standing competition where every week one team is eliminated from the league, casting their entire roster into a free agent pool that is now up for grabs for the surviving teams to bid on.
____________________________________________________________________________
Our opportunity space was exciting: as a team of 4, we were asked to provide incremental improvements to the existing app that improved and streamlined the user experience. Not one person in our group had experience with fantasy football prior to this project, so it was a blast learning how much strategy goes into the game and how high stakes the bidding can be. The overarching theme we heard again and again by our testing participants was that the game of Guillotine League style fantasy football is so fun but the mobile app experience hindered the game. There are complex functionalities that were not clearly explained within the app, causing users to avoid these in-app features and opting instead to supplement their app use with various websites.
OPPORTUNITY SPACE
To what degree does the current app meet user expectations and how can we recommend incremental improvements?
The testing we chose to conduct included directed storytelling, contextual inquiry, and comparative analysis. We learned a lot from these methods, and those learnings drove our design. For example, in our first round of directed storytelling, participants explained that the app in the current state generally “got the job done”, but it was not a fun experience. We learned that users valued the fun branding the Guillotine Leagues website offered, and missed it on the mobile experience. Additionally, we learned that the organization of the app was confusing, with users often tapping through multiple screens searching for a feature or tapping buttons expecting a different outcome. We documented the Current State Information Architecture and located areas where we could streamline the user experience by bringing like items together, moving very important functionality to the main navigation, and documented these changes in the Future State Information Architecture diagram.
Current and Future State Information Architecture Diagrams:
UX Researchers Ashley Madich and Bao Xiong documented the current and future states of the information architecture for the Guillotine Leagues app in order to better understand where the app might benefit from streamlining.
METHODOLOGY
The first functionality I incorporated that stemmed from my research was the education portion. This area of the app includes several components, but importantly it offers a Lessons tab with 11 short instructional modules that allow the user to self-study or reference back to. They were designed to sum up these key components of herbalism into bite sized pieces that allow users to develop confidence in selecting an herb and using it effectively.
KEY FEATURES & INSIGHTS
Because of these findings, we approached our redesign with a two pronged approach: first, a complete redesign of several key elements of the app to make them more clear and predictable; second, the development of delighter elements that would engage and inspire users and enhance the feelings of joy, suspense, and competition users loved about the game already.
I supported this mission by redesigning a key element—the waiver bidding system—working towards making it more clear and predictable for users for the upcoming football season.
1 — Improve user confidence by increasing learnability
2 — Infuse delighting features throughout the user experience
The second functionality within this section consists of remedies that are directly correlated to symptoms a user has logged in a given day. This expands on “Today’s Insights”, a scrollable feature on the home page that offers one herbal recommendation per symptom logged, by listing all relevant herbal protocols that might support a physical body symptom. Uniquely, Scripture recommendations based off of logged mood symptoms are also offered here. This feature that pulls in Scripture to support mood symptoms was a direct result of my research, as I heard from my users that their emotional and spiritual health are equally top of mind as their physical health.
Zoom Usability Testing: UX Researchers Andy Engelsmith, Bao Xiong, and Ashley Madich interview long-time Guillotine Leagues app user to better understand to what degree the app meets user expectations in its current state.
Current State
The redesign went through a series of iterative designs and testing, each time incrementally improving the user experience. I focused on improving the waiver bidding system, a critical part of the mobile app, and one that was often avoided because of the complexity and confusing interface.
I approached this redesign by first considering what users needed from the app and learned that users needed clarity more than anything. The app has existing functionality, but this was unclear to users. The app in the current state even offered an educational video hyperlinked on the waiver bidding screen, but testing showed that users who admitted to being confused with the waiver bids were also likely to avoid following an external link to learn more. Users unanimously agreed that once they are in the app, they did not want to be taken out of the app to learn how to use the features.
Drop Players From You Roster
There is no confirmation or review screen, though users can toggle “Back”.
The text near the top of the screen was often overlooked by users.
Roster Screen
The only way to access waiver bids or to create a new waiver bid is through the “button” towards the top of the screen. This was often missed by users, forcing users to supplement their app use with the website.
Create Waiver
Users had to scroll to the bottom of the waiver bid screen in order to create a new waiver bid.
3 out of 3 users we interviewed was either unable to describe what “contingency” meant or was able to describe the definition but wasn’t able to describe how it was used within the app.
Pick Up From Free Agent Pool
Users struggled to locate the “Next” button.
The default state of the current app is contingency bidding, causing confusion and fear of making a catastrophic mistake in users. This function was often avoided for these reasons.
The external video that educates users how to properly build a contingency bid near the top of the screen.
Concept Wireframe V1.1
Based on research, we considered a side-by-side tabbed waiver bid screen. This might allow users to easily tap back and forth between their pick ups and drops, a missing feature in the current state.
Prototype Version 1
I decided to approach the waiver bid by considering how I might include more relevant information on one screen, as opposed to the current format with multiple screens. This offered users a more streamlined experience, and allowed them to view their bids as a whole while creating the bid. After testing, we found this format was still confusing, with multiple testing participants nearly unable to move forward creating their bids.
Concept Wireframe V1.2
Similar to the V1.1 wireframes, this option offers tabs that allow users to easily tap back and forth between their pick ups and drops. This version allows users to slide the tabs up to reveal more information about their bid.
Mid fidelity V1
Pick up free agent
Mid fidelity V1
Pick up with contingency
Mid fidelity V1
Drop player from your roster
Mid fidelity V1
Review waiver bid and sumbit
Create Waiver: Pick Up and Drop:
The pop green signifies to users where to go next in order to successfully complete the waiver bid.
Prototype Version 2
In order to resolve some of the confusion that was still present with the V1 prototype, I opted for a darker theme overall, with a pop of green contrast for areas that signified where to go next, attempting to hold the user’s hand a little bit more through this complicated system. Overall, this design was not successful in increasing user confidence, but it inspired another redesign.
Waiver Tab
An iteration of what the Waiver Tab could look like, including a collapsed version and an expanded version.
(I do not take credit for the prototype shown above. A member of my group designed these, but they are shown here for reference to compare to the V3 prototype that I designed.)
Prototype Version 3
Still searching for a design that evoked user confidence without requiring out-of-app education videos, I considered bringing in a component used elsewhere in our redesign: the secondary navigation bar at the bottom of the screen. This acts as a control center for the screen a user is interacting with, offering relevant functions. Using this system, I considered how a user might more intuitively navigate from picking up a player, to dropping a player, to submitting their bid by adding Pick Up, Drop, and Review tabs. Within this secondary navigation bar, selected players would auto-populate in the order selected. After testing with users, we found this approach to be more effective and no testing participants were unable to complete creating a waiver bid. However, we learned that the contingency bidding portion of this function was still vague and caused users concern: with real money on the line, users can’t risk making a mistake in the bidding process.
Create Waiver: Pick Up Player
Featuring the tabbed secondary navigation bar to navigate between phases of creating a waiver bid.
Create Waiver: Drop Player
Showing how players auto-populate in the secondary navigation.
Review Waiver
Showing two differently colored areas that differentiate the players being picked up or dropped, with text that describes how the bid will be placed in plain language.
Waiver Tab
Saved waiver bids that will be placed once the deadline passes that mimic the review screen, making it very simple for users to understand how their bid will be processed at a glance.
Prototype Version 4
Taking these findings to heart, the fourth round of design demanded even more clarity within the copy and visual heirarchy. As a team, we knew we needed to come up with a way that instilled user confidence in an intuitive way. We included a new feature—tool tips—while also bringing in more clear copy, utilizing copy color and weight to emphasize important information, and providing guiding steps for users. Our final round of testing confirmed that these incremental improvements continued to push this project in the right direction, with participants now using phrases like “This looks nothing like the current app…and that’s a good thing”, “This is such a fun app now. I can’t wait for football season now”, and “The animations, app tutorials, and confirmation screens give me so much confidence. I’d give this a 5 out of 5 (5 being very easy to use)”.
Tool Tip: Pick Up Player
Tool tips are displayed throughout the user experience, guiding new or nervous users through the complicated waiver bid screen before they place a bid with their real FAAB. This provides a safe space for users to become familiar with the functionality, and then opt out once they are confident.
Create Waiver: Drop Player
Added a tally next to the review tab to indicate to users how many items were ready to be reviewed. This indicator also signifies to users that this area requires users’ attention.
Review Waiver
Added color and weight to the descriptive text below the waiver bid ready for submission.
Fans of the fantasy football have found a renewed passion for the game with Guillotine Leagues, but the app hasn’t always enhanced the joy, suspense, and friendly competition of the game. My team of 4 prototyped a design solution that increases user confidence within complex bidding systems while infusing delight features throughout the user experience.
What’s Next:
If we had more time to continue working on this project, I’d be interested in exploring how other elements of the app could be woven in more seamlessly as well. For example, the app currently has a message board, which is buried a few screens deep. We moved this feature to the main navigation bar at the bottom of each screen for easy access, but we’d like to build out its functionality and test that with participants.
SUMMARY
Style Guide:
As part of our deliverables, my team and I developed a style guide for our clients at Guillotine Leagues. This consisted of a component library, new colors, and custom animations.
