STOCK UP - GROCER SIM

  • Role: UX Design

  • Genre: Vocational Simulation

  • Engine: Unity 3D

  • School: DigiPen Institute of Technology

  • Total Dev Time: 2020 - 2021; 5ish months

  • Platform: Windows

Stock Up! - Grocer Sim was a school project that had the goal of designing an engaging and authentic experience from a real vocation. I decided to draw from my time as a grocer and build something from what I appreciated about the experience. The initial challenge was coming up with a gameplay loop that many other people would enjoy and still felt authentic. I would later pick the project back up a year later to improve the UX features of the game. 

The goal of the game is to stock as many shelves as you can before your shift is over, using your eyes to match up product boxes and barcodes while cleaning up spills and helping customers all so that you can get enough money to go on a road trip to save your romantic relationship with a long distance partner. 

press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom

TASKS / RESPONSIBILITIES

  • Sketching and blocking out wireframes in Adobe XD

  • Transferring assets from Adobe XD to Photoshop to Unity 3D

  • Animation of UI assets

  • Authoring of all code in C#

  • Constructing the UI within Unity 3D

  • Editing and implementation of all audio assets

  • Perform and record announcer voice audio

CREATING AUTHENTICITY THROUGH DIEGETIC UX

The goal of the project was to create something that was engaging but authentic to the experience. First I broke down the experiences of the job itself into the various tasks and the kinds of challenges and engagements they innately provided. Since I already had a prototype, I did playtesting to figure out who the target audience should be. I ended up with a casual audience that would enjoy simple repetitive tasks that challenge their spatial awareness. In this game they can do these jobs and feel like they are doing them well and feel a sense of accomplishment from it, as apposed to the real world where they may feel as though they are stuck or cannot do anything. The important thing about this is that it wasn't children, but adults, that enjoyed the game. Given that the game is about being in a grocery store, it was important that the audience understand how to navigate a grocery store.

 

An important aspect about this project is that it started as a simple exercise in creating a vocational simulation, the focus was on the systems, not the UX. Nearly all aspects of the UX were abstract or painfully simple, the game technically worked as an experience but it was janky and didn't flow well. The biggest issue with the prototype is players had difficulty remembering where things were or parsing through the store shelves to find where a product should go. I deduced this was because I had abstracted the store elements too much and made the shelves too busy. 

To fix this problem I started out with considering how my audience interacts with grocery stores (which they all do frequently in their lives). A key aspect of making this feel authentic to the vocation as well is being somewhere familiar but with a different lens and purpose for being there, working the job changes how you view the space, so the store had to become less abstract to feel more like a grocery store. I then also shrunk the scope of the grocery store in size of both the floor plan and the number of shelves per aisle to help simplify the space so that it would work better for a smaller experience. 

 

 

It turns out going in this direction naturally lead to solutions that greatly improved the experience. In the prototype I used color as the base identifier for where a product should go. This was absolutely a big reason as to why parsing through products on a shelf became difficult to do as it was just a mess of patterns using the same color. This was such a problem because when people are looking for things on a shelf they look for 'landmark' products that are near what they are looking for and will navigate shelves using these landmarks. If the products are too abstract and similar it becomes difficult to find the individual landmarks and create a mental map of the space. 

Using icons representing what the product actually was and removing color exclusivity from the equation turned out to not only fix this exact issue, but also add variety to entire aisles while also making the store and it's products feel more authentic. Turns out when people can better relate to the things they are interacting with they can take the information in quicker. I used this new system to create really distinct products that stand out from each other and using similarity and complexity to create progressive difficulty.

press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom