Peanuts & Crackerjacks

Responsible for...
UX | UI | Information Architecture | Wireframes | Flash | Animation | Logo Design | Usability Testing | Project Management



Peanuts and Crackerjacks was the most visited feature on Bostonfed.org from its release in May 2013 until they removed it as part of a site redesign in July 2016. I would never recommend removing the most popular feature on your website but when the project began in early 2007, iPhones weren't a design consideration yet and since the game was designed, animated and built in Flash there were some concerns about its incompatibility with the iPhone. Unfortunately, they lost sight of the fact that Peanuts & Crackerjacks' target users were students and teachers in a classroom environment and almost all of the people playing the game were doing it from a desktop. I think the Boston Fed is missing a great opportunity to educate people.

The game was organized into nine innings with nine questions each, like a baseball game. That was a lot of questions to expect a middle school student to sit through but removing questions was not an option. To solve this problem, I created a scored version in which a user could play from inning one through inning nine and an unscored version in which the user could try the game and answer questions from any inning without the time commitment. Take a look below at some animation from the game.


Keep scrolling for a description of the UX Design process as well as a site map and some user flows.

I was asked to redesign and build Peanuts and Crackerjacks in 2007. Someone built a javascript version a few years earlier and it was fairly successful. I met with the customers who wanted to make Peanuts and Crackerjacks more "modern" and on par with other games that one might find at nickjr.com, playhousedisney.com and other popular Flash gaming sites of the time. The iPhone (and Apple's campaign against Flash) was not a consideration in mid 2007 and I loved the degree of artistry that Flash afforded. It was decided that I would rebuild it from the ground up.

Requirements

  • Build it in Flash.
  • Keep the original eighty-one questions (but they were open to modifying the length of the questions).
  • Redesign the companion website and incorporate it into the game.
  • Target users were students (grades 5-8) and their teachers.

The customer gave us a soft deadline and we made the game a high priority. I was the only Flash Designer at the company so I took the project with me when I transferred to a different department in 2008. It wasn't a high priority for the new department so it took longer to release than we had originally planned. However, working on other projects and attending UX, UI and IA courses during this time helped refine my User Experience and Usability Testing skills. Peanuts and Crackerjacks definitely benefited from that.

Competitive Analysis and Heuristic Reviews

There were many educational Flash games and sites out there. My own research as well as having two children who played a lot of these online games helped inform some of my design decisions.

Personas and scenarios

Our target audience members were students (grades 5-8) and their teachers. I was fortunate to get participation from these groups through our Economic Education Department who did a lot of work with local students and teachers. This was a tremendous help when developing personas, user scenarios and stories, getting valuable feedback on the product and getting users for testing.

Content Audit and Information Architecture

Information, pages and content in the companion "answer" website needed to be organized and categorized.
Card sorting is often employed for this sort of thing but, in this case, there weren't very many pages or categories to consider so the solutions were all pretty obvious. My number one goal is always to make the navigation as efficient and intuitive as possible.

Next, the content needed to be linked to the appropriate answer screens in the game. In some cases, information in one answer also applied to others, so the content author and I were able to mix similar information and theories into multiple answers without seeming redundant and without the need for multiple links on each answer screen.

Site Map for the Sports Page answer site


Boston Fed Economic Adventure - David DeSouza UX

User Flows

Mouse over to enlarge




Wireframes, Prototypes and Mockups

Wireframes for the Sports Page answer website were created in Photoshop and prototypes were created in HTML.
Prototypes for the Flash game were created in Flash. I used Photoshop for mockups.

I worked on both the game and Sports Page answer website. I tested them on students and interns and refined them based on the results. The end product was very successful.