- UI Design
- UX Design
Wharton School of the University of Pennsylvania Marketing professor Barbara Kahn wrote The Shopping Revolution, about the rise of Amazon, and how its business model has forced a seismic shift in how the industry approaches marketing solutions. Pivot or Perish is a cutting-edge business simulation that puts the fate of a legacy department store in students’ hands as they strive to modernize its traditional customer strategy and thrive in today’s ongoing retail revolution.
Working with the stakeholders at Wharton’s Innovations Lab, I researched and designed a marketing simulation for Professor Kahn’s Marketing course, to model and illustrate the principles of her book. This data-rich simulation builds in complexity over time, and is a powerful, easy to use teaching tool.
I immersed myself in Professor Kahn’s approach to competition in the age of Amazon, and the need for brick and mortar businesses to understand and react appropriately to the market’s redefined expectations. I researched other simulations used at Wharton and other business programs, and found them cluttered with data, confusing in their hierarchy of information, and often clunky in their execution.
My goal was to make a very different kind of simulation for the students; one that brought the Professor’s Retailing Success Matrix to life and gave an order and access to the rich data. I wanted to make an engaging, immersive solution, to make competitive comparison and data history fun to play, easily visible, understandable, and interactive.
Students are expected to go through eight rounds of the simulation in an hour or two, using knowledge from the course, and data introduced to them when they first arrive at the site. As they play through the rounds, their marketing budget decisions move along four data sections along four key connected axes, representing Brand, Experience, Low Price and Frictionless. Users play in context of the Fair Value, of what the market expects, as well as six other fictional company decisions.
I decided to use a spider graph with resulting shapes to connect and visually represent changing data over time. The transparent overlays of the shapes make for a quick visual read of progress and comparison. I iterated on the shapes after meeting with the stakeholders and developers; we decided that straight edges, rather than my original circles, would be easier to visually read for individual data points, as well as simpler to implement in React.
Over the course of the simulation, the data changes the shape on the matrix to illustrate the principles of the Professor’s theories over time, and the students have a visual understanding of their actions.
As the game and the data grows in complexity over time, users can parse the rich information in a number of ways. They can highlight one company at a time to see its data shape highlighted in context of another company data shape, or hover on an individual point to see specific information. They can zoom into a particular quadrant and see progress over time, highlighting company ranking in comparison round by round, or by individual company decisions over time.
Iteration and Conclusion
I wireframed the simulation centered around the matrix interactions, and tested the solution with the Innovation Lab. They felt the game was very successful in illustrating the principles of the course, but needed additional information to be integrated in the game throughout the rounds. I added a round by round market update after each round, with additional data to move forward in the game, as well as a data drawer to the menu where the information can be referenced later, and additional budget information below the matrix structure.
I created high fidelity mockups for the developers with a sophisticated high contrast color palette with detailed visual specifications for the data representation and layering of the graphs. Unfortunately, timing and budget were too limited to test the product with students before launching the product, but it is currently being used in classes, and will be iterated on for the following semester.