FANschool is a Fantasy Football-style platform that helps students get involved in current events. For this project I worked as the sole designer on a full rebrand, redesign of the product, additional product design for two new games, and t-shirt designs for the FanSchool shop.
overview
FANschool started out with one product, Fantasy Geopolitics that allowed to students to draft countries and earn points based on how often those countries were mentioned in the news over the span of several weeks or months. With the success of this product, the company decided to expand its product offering with two new games. The first was based on the same concept, but was for US states. The second was a new concept that was a game based on the 2016 election that was short-term and would allow students to choose states to be either red or blue in a March Madness-style bracket.
Problem: Because of these new product offerings, the company brand structure no longer suited the breadth of products, and the design system was not scalable for multiple product offerings. Furthermore, the design did not speak to the target audience, mostly comprised of middle school students age 10 - 13.
Brand Structure
In order to create a design system that was scalable with multiple products, I decided to take the "branded house" approach. This means I combined multiple products under one brand.
The mission of the company was to make students fans of learning, therefor it was only fitting to change the company name to "FANSchool" and brand each long-term game with the same "FAN" nomenclature and use the "challenge" naming convention for games that were short-term in nature. This branding structure allows for the addition of new products and product lines in the future.
Rebrand
After the brand structure made sense for the new product additions, I was able to focus on the rebranding of the new FANschool.
The original Fantasy Geopolitics logo was geared more towards the teacher demographic rather than the students who would be the ultimate users of the games. Because the overall goal was to make students fans of learning, the goal was to please the student users in order to increase teacher retention.
For this reason, I decided the FANschool logo should incorporate a badge format. This is a pattern used in gamification and I felt it played well with the goals of the company and the further gamification of the platform.
I maintained the color palette, but added additional colors that could be incorporated in future games and badges.
Old Logo
New Logo
Color Palette
Along with the main logo, I also added badges for each of the products to differentiate between them and help to add structure to the eventual UI.
FANgeopolitics
FANpolitics
Election Challenge
USER JOURNEY
In preparing to redesign the FAN games, I first started with two distinct user journeys, the student and the teacher.
I started by mapping out the user journey for both the teachers and students as the teachers would setup the games and the students would play them.
The teacher flow in particular had to take into account whether they were paid customers or not and had to decrease the friction in signing up as a freemium user.
FAN Game Design
I then moved onto the task of redesigning the UI for the FAN games. Because the games were both structure similarly, I wanted to create a UI that could be used across all FAN games so the user wouldn't have to relearn how to use the game each time a new one was added.
The existing UI was very table-heavy. It felt more like a content management tool than a game. For this reason, I decided to make the maps used for the drafts and the leaderboards in a dashboard format the centerpiece for the UI. This ultimately made the information presented easier to parse for students and teachers.
FANschool App Wireframes
I began with a set of wireframes that I was able to test on teachers and students in order to make sure the UI was improving the fun factor and helping users understand the game more efficiently.
With the new brand structure, the navigation on the left side allows users to easily access all of the different games they are playing. Furthermore, the addition of greater hierarchy in the dashboard information makes scanning and parsing games easier for students and teachers.
FANschool App Design
Election Challenge Design
Because the Election Challenge was a different type of game, I wanted to make sure that it was easy to fill out an election bracket and learn about the election during the process. By using the US map as the main means for selecting countries, it helped familiarize students with the location of different states.
Each round of the game covered different types of states: solid states, leaning states, and battleground states. With a brief description and an easy point-and-click, UI students could quickly selects whether states would go red or blue in the election. With a brief description of each type of states and the ability to guess the popular vote, students had fun predicting the election outcome, the overall winner, and learning about the electoral college process.
Election Challenge Wireframes
Completed Election Challenge Map
Election Challenge T-Shirt
If all of that wasn't enough, I designed a fun t-shirt for the winners of the Election Challenge!
