Mechanized Mayhem
PROJECT OVERVIEW
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 second quarter of 2021 to acquire funding for the game’s completion.
Objectives:
Design a responsive website for MM that is can collect emails and funding
Create a brand for Mechanized Mayhem
Role:
UX researcher, UX Designer, Interaction Designer, UI Designer
Tools:
Adobe Illustrator, Adobe XD, Adobe Photoshop
Team:
Self-Directed, In collaboration with Sadbot’s team of artists
PROCESS
EMPATHIZE
Process: Secondary Research, Primary Research, and Synthesis.
Online research began with a deep dive into the demographics of PC Gamers, popular genres, trends in Blockchain Gaming, and a variety of motivators regarding gaming, crowdfunding, and registering for developing PC games. Of note, I found that users are more inclined to invest time and money into developing games if there are strong indicators of the project’s high quality. These indicators include: Videos, Lack of Spelling Mistakes, and qualities that suggest that the game is near completion.
I found five direct competitors in this subspace — Splinterlands, MyCryptoHeroes, Brave Frontier Heroes, Gods Unchained, and CryptoSword&Magic, along with two indirect competitors that have significant influence in related genres. I analyzed each game’s web design, and identified their respective strengths and weaknesses according to current design principles and material design guidelines.
Secondary Research
Assets: Research Plan, Market Research, Competitive Analysis, Provisional Personas
Primary Research
Assets: Interview Guide, Research Findings (Observations), Empathy Map, User Persona
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.
After the initial mapping of the transcripts, I began to organize the data based on patterns and trends that I saw in the mass of information.
Empathy Map
Assets: Empathy Map
I identified half a dozen patterns, and picked out 5 categories that had particularly robust support, in terms of statements, to analyze in further detail.
And using the common points that I found in all 4 categories, I compiled a set of key insights that rang true with multiple transcripts across the board.
Meet Justin. The representation of Mechanized Mayhem’s target demographic. His profile will serve to constantly remind me of the user that I design for, and how I can reach him through his frustrations, needs, motivations, and goals
User Persona
Assets: User Persona
DEFINE & IDEATE
Process: POV Statements & HMW Questions • Brainstorming
POV Statements &
HMW Questions
Assets: POV Statements & HMW Questions
Individual Brainstorming
Assets: Brainstorming
To better understand the problem at hand and convert users into registering and crowdfunding the game, I used the insights gleaned from my empathy map and reframed several core issues into POV Statements and HMW Questions. By repositioning the problem in the context of User, User Need, and Insight, and then questioning how I might be able provide users with said insight, I was able to better perceive the issue.
While I was initially asking how I help users in their investigation process of a game’s reviews, the HMW questions reframed the issue as a matter of connecting Justin with positive reviews about Mechanized Mayhem. Although it’s a subtle difference, this helped me disassociate myself from the general problem, and focus on the issue specific to Justin and the web design’s objective. These reframed problems kickstarted me into my subsequent brainstorming sessions.
Brainstorming features began with 3 minute mind maps on each HMW questions. The goal was to come up with as many feature solutions as I could to tackle each HMW. I performed a total of 6 mind maps (2 per HMW question) over the course of 2 rounds; the initial mind maps were fairly difficult because of the limitations of the game. Since it wasn’t yet developed, I couldn’t approach it with traditional features that work for other existing games.
Nonetheless, the session helped me generate a core group of features that I later fleshed out, and contributed greatly to my feature roadmap.
STRATEGY & INFORMATION ARCHITECTURE
Process: Business & User Goals • Product Feature Roadmap • Sitemap
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.
Business and User Goals
Assets: Business & User Goals
Having defined the various user and business goals, I further filtered my list of features with these goals as the criterion.
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 solve the problem and conform to the criteria, along with the middling and low priority features that can be incorporated given enough time and budget.
Product Feature Roadmap & Sitemap
Assets: Product Feature Roadmap, Sitemap
INTERACTION DESIGN
Process: UI Requirements • Task Flows • User Flows • Low-Fidelity Sketches • Mid-Fidelity Wireframes
I created 3 basic task flows that outlined the most important elements of the new features and the problems they were trying to solve.
For each of these tasks, I outlined the high level requirement of each screen that needed to be created, and a detailed requirement of how each feature would operate. This became the foundation for the design of my new features.
UI Requirements
Assets: UI Requirement Document
With the 3 critical user stories established in my UI requirements document, I mapped out different routes that could lead the user to perform a task from start to finish.
Task & User Flows
Assets: Task Flow Diagrams, User Stories
The task flow outlines how the user would approach the tasks outlined in the UI Requirements Document.
In the User Flow, I took a look at the different decisions that users will face during the course of their task flow. The diamonds represent key choices that Users will face, and ultimately lead to different sets of actions.
Guided by the Business & User Goals, Product Features Roadmap, the Task Flow, and the User Flow, I began sketching out possible homepages for Mechanized Mayhem’s web design. Each sketch focuses on a different approach to providing quality indicators to the user.
Low Fidelity Sketches
Assets: Low-fi Sketches
I re-evaluated my sketches, chose the one that best fit my defined criteria, and went onward to create mid-fidelity wireframes using design principles and Material Design Guidelines as the basis.
Mid-Fidelity Wireframes
Assets: Mid-Fi Wireframes (Desktop), Mid-Fi Wireframes (Tablet)
PROTOTYPING & USABILITY TESTING
Process: Mid Fidelity Prototype • Usability Testing Plan • Usability Test Notes • Affinity Map
The mid-fidelity wireframes were refined further, and used to create a prototype that outlined my three user stories, allowing me to test the effectiveness and efficacy of the designs.
In preparation for usability testing, I created a usability testing plan that outlined 3 scenarios and various tasks that would allow me to test the effectiveness and efficiency of the designs.
Usability testing happened over the course of 3 days, and I once again found users from Discord and Slack channels. As with the Empathy Map, I took the transcribed notes, and synthesized the feedback, along with reactions (video and audio recorded through screenshare with the participants’ permission) onto an affinity map that laid out the actions, statements, and prominent reactions that my users underwent during testing.
Prototype & Usability Testing
The affinity map gave me insight into common frustrations and pain points that the users experienced, and better informed my revisions as I began revising my design to alleviate these issues.
Affinity Map & Recommendations
Assets: Affinity Map
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, and 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.
USER INTERFACE DESIGN
Process: Brand Logo & Style Tile • UI Kit • High Fidelity Wireframes & Prototype
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.
Style Tile
Assets: Logo & Style Tile
After the Style Tile was compiled, I applied the style throughout the prototype to create the high fidelity version of Mechanized Mayhem’s website.
High Fidelity Wireframes
Assets: High Fidelity Wireframes
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.
UI Kit
Assets: UI Kit
The next step would be to formally hand off the assets to the client or developer. This would be followed by continued testing 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.
Iteration
Reflection
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.