Challenge: Mechanized Mayhem is a Blockchain Game that is currently in development. Sadbots - the start-up behind the game - plans to launch a crowdfunding campaign in the third quarter of 2020 to acquire funding for the game’s completion. The company seeks a responsive website that can collect emails, crowdfunding, and create branding for the game.

Diving deeper into finding the needs of potential users, I went onto Discord and Slack channels, and found 8 individuals that fit the targeted demographic in my research plan to verify the authenticity of research assumptions and provisional personas.

During the interviews, I asked open ended questions to gain more knowledge about how my participants went about finding, selecting, and playing PC games. I questioned their criteria in choosing games, their preregistration motivators, and honed in on their crowdfunding experiences.

Once I began seeing significant trends and patterns (over the course of eight user interviews), I began to map out interview transcripts with the audio and video recordings I took. These led to the creation of an empathy map that I used to dissect the information from the User interviews, and view them at an atomic level.

Before I began the Interaction Design portion of my process, I first needed clear and concise definitions of the Business and User goals, along with prominent technical considerations that may come into play. These goals will establish a criteria of what my design will accomplish, what features I must incorporate into the design, and a priority list of which features are the most important, and those that are not necessarily needed.

Having defined the various user and business goals, I went on to cement a list of product features from my brainstorming mind maps, aimed at addressing these goals.

The features were then reorganized into a priority-based list in accordance with the following metrics: user goals, business goals, effort level (needed to create the feature), and confidence level (how much assurance I had in creating the feature).

In the final iteration of the feature list, it showcases a list of high-priority features necessary to create a minimal viable product (MVP), along with the middling and low priority features that it would take to create a fully fleshed out product. Aside from the “must-haves,” I took the time to evaluate how much time it would take to create features from the other tiers, and took on a variety of features that adhered to my timeline.

From here on, I began crafting an overview of the site’s web design in a sitemap. The pages featured on this map were made up of the results from my research phase, the Business and User Goals list, and the Product Feature Roadmap that I had just completed.

Affinity mapping allowed me to pinpoint several areas of concern: 1) Confusion with the labelling, 2) An overwhelming dependence on the “Gameplay” page, 3) Confusion with the Registration pages, 4) Confusion with the Rewards system.

To solve these issues, I updated the labelling to be more representative of its respective content, adjusted my “Gameplay” page to include more information, created a registration guide in place of the hero image in the Registration pages, and added a more detailed explanation to the rewards system.

A second round of revisions adjusted the padding, gridding, and hero images to be much more balanced, engaging, and aesthetically pleasing.

With the layout of the website revised and finalized, I began work on Mechanized Mayhem’s branding and UI. First I created a mind map of Mechanized Mayhem’s brand, to come up with a set of adjectives that could help guide the branding process.

After I came up with the adjectives, I began to build an inspirational mood board for the brand’s Colour, Typography, Posters, Logos, and Imagery. These gave me the ideas I needed to start sketching my logo, and picking the colours and fonts. Eventually compiling into the Style Tile below.

After the Style Tile was compiled, I applied the style throughout the site along with the artwork that I worked with the game’s artists to create. This created the high fidelity version of the website.

Refinements into the UI of the design finally brought my UI Kit, which was a living document that constantly changed with every iteration of the site, closure. The finalized colours, typography, and style were rearranged into their atomic and molecular forms, and put together in a cohesive document.

The next step would be to formally hand off the assets to the client or developer. This would be followed by continued testings of the design updates since the last usability testing, update the UI Kit, and continuously cycle through iterations and testing for as long as resources allow.

Working on this real-life project has been an incredibly fruitful experience. I firsthand experienced the needs of other stakeholders during the design process, managing the time needed for the artists to make content, and the technical limitations of a developing product alongside its effects on creating a web design suited for it.