The company used an agency to create an initial version of the product for raising capital that I quickly decided needed to be scrapped and redone. Although it was effective getting visuals across for the company to successfully raise, it needed proper design organization and a new, more intentional creative direction. I felt design was going to be a selling and retention point for users, and good user experience within the game would make it more sustsainable.

I quickly learned that just one designer wasn't going to be able the breadth of our design needs within the timelines we wanted, so I hired a product designer onto the team to contribute and began collaboration efforts with the art team to build assets we could use to enhance our designs.

We defined and implemented a new design system (more on that later) and below are some comparison screens of the old vs new designs.

With startups, all processes have to be a bit loose in order to maintain momentum, but defining a framework regardless of timelines helps area owners know where they're needed in a phase of a project. I worked with product and dev to create guidelines for building a feature.

Depending on the size and scope of the feature, these phases could be anywhere from a couple days to a week long. As with any fast moving project, flexibility is key. This process with crossover phases between groups allowed us to maintain a structure for our work but didn't hinder the speed in which we wanted to get work done.

• Defining as much as possible to maintain visual consistency through the product was key
• Cover cards with status attached which allowed someone at the company to quickly see what stage a particular feature was at
• Generic naming conventions for scalability - for example if we enter a new season and want to change the color scheme we can just redefine the primary and secondary color palettes with new values and it will propogate out to the rest of the site
• Limited icon resource library in groupings - we didn't want a massive library with a bunch of icons we didn't use, so we only added icons into the DS that were actively being used and grouped them according to their use so any designer coming in could have context on where to use or not use that icon
• Variety of defined buttons - whether it be standard, our emphasis buttons for style, just text etc - there would be no questions on how any button should look

Below you can view a snippet of the design system created for the VBA. Use command + scroll to zoom in and out.

We also created a component library to define and create as many assets that repeated themselves as possible. This allowed us to work more efficiently when creating different features. Here's a snippet of this libray as well.