Peanuts & Crackerjacks

Responsible for...
UX | UI | Information Architecture | Sitemaps | Wireframes | User Flows | Flash | Animation | Logo Design | Usability Testing



Peanuts and Crackerjacks was the most visited feature on Bostonfed.org from May 2013 until July 2016 when it was removed as part of a site redesign. I wouldn't recommend removing the most popular feature on your website but, because it was built in Flash, there were some concerns about its compatibility with the iPhone. When the project began in early 2007, iPhones weren't a design consideration yet. Management did not consider the game to be a high priority so the project went very slowly for years. By the time it was finished, iPhones were everywhere. That, coupled with the elimination of the Economic Education Department, led to the eventual removal of the game.

The game was divided into 9 innings with 9 questions each. Expecting a middle school student to answer 81 questions in a row is crazy but removing questions was not an option. To solve this problem, I created a scored version in which a user could play from inning 1 through inning 9 and an unscored version in which a user could start at any inning. Take a look below at some animation and details of the UX process.


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

The process...

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.