KorroBox: Product Design + Illustration

« PORTFOLIO

KorroBox: Product DESIGN

 

 

KorroBox is a blockchain-based gaming platform that aims to put the power back into the hands of game developers and players.

banner.jpg

Because we were working with blockchain technology and utilizing cryptocurrency, the biggest challenges we faced were:

  • How do we make something as complicated as blockchain attainable for the average person?

  • How do we break down barriers for purchasing with cryptocurrency?

  • How can we communicate all the benefits that this tech can bring to the gaming industry?


toybox copy.png

My Role

  • Determined roadmap for product team

  • Managed workflow for engineers

  • Iterated on wireframes and UX flows rapidly for testing and feedback

  • Created detailed mockups and assets for frontend engineers to reference

  • Established web styling and created illustrations, iconography, and UI details


spec out planning

After we decided as a team what we wanted to create, what our priorities are, and which features to add, I created a doc that would map out all the details included on each page of the platform. With this as a jumping point, the team hopped in to give their thoughts, start discussions on the logistics of building different things, refine our priorities, and begin formulating a roadmap.


The beginnings of wireframes: white boarding (or yellow boarding!) user flows & brainstorming wireframe options.

The beginnings of wireframes: white boarding (or yellow boarding!) user flows & brainstorming wireframe options.


ux flow + simple wireframes

After a few whiteboarding sessions, I began creating UX flows with basic wireframes. Combining the flows and wireframes allowed engineers to start planning and building structures right away instead of waiting for perfect, meticulously detailed wireframes. Here are some examples of what these flows looked like for the first iteration of the KorroBox platform.


Proof of concept launch

Game Store

This game store was designed to have the games take up a lot of real estate to fill out the space for our proof of concept launch. We planned to make it more browsable as we add more games.

Game Page

The most important things about deciding to purchase a game are front and center: graphics, gameplay, narrative, and style. Our next step was to implement tags and reviews.

Game Store - Phase 2 Plan (WIP)

Once we have acquired more game partnerships, we planned to make the layout of the store more personalized, full of recommendations based on play behaviors, friends, and trending games.

 

Item Store

After we launched the proof of concept for the Game Store, we moved on to building out the Item Store, which would be full of non-fungible token items from various blockchain games. The long term vision for this would be to evolve into a peer-to-peer marketplace where these items can be tradable with both fiat and crypto currencies.

 

Checkout Modals

One of the most challenging parts of designing this platform was the purchasing process. Because we were also accepting Ethereum (and had plans to expand to other currencies), we needed a way to ease the tension between interacting with the blockchain and simply making a purchase.

Mockups of how having an ETH wallet and USD credit card linked to your account would look in the user settings:

Reference Sheet

Work in progress reference sheet for CSS attributes. This was created to keep all engineers working on the platform on the same page so that the CSS stylesheet doesn’t get too out of hand.


Illustrations & Iconography

Some examples of illustrations and iconography made for the platform.

art-inventory-games.jpg
intro-weaponimage.png
howitworks-step1.png
toybox.png
scarcity.png
community.png