Kevin He — Work

Level—Up





An interactive guide for parents to learn more about the potential positives of Minecraft. This site features the voices of authorities and children to convey both of their perspectives in a unified way.

This project is the culmination of a semester-long independent study with user mapping, ideation, multiple iterations, low-fidelity wireframes, prototypes, user-testing, content curation + writing, and finally hand-coding from scratch in HTML, CSS, and Javascript.

** Note: site is not mobile friendly due to the interaction being heavily based on JS


    


UI/UX
Product Design


Interactive desktop experience
Prototyped and Wireframes in Figma
Built using HTML/CSS/Javascript
Hosted on Github and Netlify

A link to a short blog of my initial research and wireframing process can be found here.



INTRO


Ever since I was young, I’ve always been captivated by video games and the immersive spaces they provided me. However, growing up, they’ve always been a point of contention for me and my parents.

The roots of this project stemmed from the question: “Why do you play video games?” This question is one that I’ve asked myself countless times. And for me and many others, the resounding answer has usually been: “Because they’re fun!”

But now, going into this, I wanted to dive deeper into the why. Why are they fun? What makes them fun? Video games have played an important part in my life, and I want to communicate that love and interest as best as possible to parents everywhere.

This project’s core goal has always been to show the why and have parents understand that reasoning through a digital, interactive, and engaging site.


GOALS


  • Showcase what makes video games so fun for kids and why they become so interested and invested in them

  • Destigmatize the culture around games by showing parents the potential positives that can emerge from Minecraft

  • Craft a easy-to-navigate site with simple interactions that eases the learning experience for busy parents

  • Help parents broaden their perspectives and understanding so they can better support their kids and their interest in games



SOLUTION STATEMENT


A parent’s guide to the positive possibilites of Minecraft through three simple levels.




FINAL BUILD


    

** Note: full site is not mobile friendly at the moment






INITIAL IDEATION


The initial ideas for this project were, obviously, too broad. As a designer, I can’t tackle every game out there or do a good enough or comprehensive enough of a job with that wide of a scope. I felt that exploring how to communicate games to parents would be an interesting angle to take due to their generally negative opinion of games.

Three iterations to best address their concerns.

  1. A parent’s guide to dangerous microtransactions in Fortnite
  2. Flow State: A parent’s guide to understanding immersion
  3. A parent’s guide to the positive possibilities of Minecraft




I focused on different conceptual angles in what parents would be interested in hearing as well as how games captivate kids in different ways. For each, I roughly mapped out the content levels to see what important information would be needed.





USER RESEARCH





An exercise I did early on in my process to explore different users. I ended up choosing to focus on parents due to their unique and biased perspective against video games.

Others felt either a bit too specific, not specific enough, too bland, or not concrete enough to balance my site upon. I felt parents would have the most concrete exposure to games as well as actionable takeaways from the site.

With parents as my primary audience, I wanted to learn more about their pain-points and struggles. I had my own personal experiences and opinions from my own parents, but I knew that I’d have to learn more about them. I needed to learn about their experiences, what concerns them in games, and what positives they could find (if any).

As a way to refine this process, I created some user maps to record and clarify the things I learned (and assumed/inferred). I made one each for parents, kids, and game designers to compare and contrast their experiences to guide the project and its design. This exercise helped me focus on specific instances and pain points that helped tell the story of why people play.




Specifically, I wanted to focus on the potential gains. Learning more about games — why they’re made the way they are, how they’ve evolved, how they bring people together, and what ways they challenge and excite us — can teach both parents and even kids how a well-designed game can be beneficial in moderation. 



Around this point, I took some time to interview a parent about their experience with video games. I wanted to hear their thoughts about their kid’s relationship with games, any specific pain points they had, and how the parents handled the issues. I took a more exploratory approach with this conversation to just hear the parent out and learn their feelings toward gaming.

The results I found were interesting. For this parent, his experiences with games were mostly negative. He struggled to understand his kid’s “gaming lifestyle” and didn’t know how to best connect with his kid as he grew older and more independent. The concept of hanging with friends online on the computer felt foreign to him, yet he still wanted to support his kid and his interests in moderation.




However, even with these negatives, he still found that Minecraft and games had at least some benefits to his kid. The friends he made online and played with became some of his closest friends, and Minecraft became a major driving point in him studying architecture. All he wanted was for his son to better understand where his parents were coming from and how to better manage and control his gaming. The parent just wanted to learn more about his interests in these games to just help him and care for him. 

This interview was crucial for me in identifying what parents’ core concerns were. For most parents, theirs concerns weren’t really around microtransactions at all, instead they were around how they could better connect with their kids. They just wanted to a find a silver lining that could help them better support their kid in their interests. Additionally, these parents are also incredibly busy with their schedules, work, and family. For them, having a simple, direct, and easy-to-understand message is of the utmost importance, and that realization helped guide a lot of design decisions and interactions down the line. 



TARGET USER


Busy parents who wish to understand why their kids are so captivated by Minecraft and whether or not that is “bad” for their kids. They want to find a way to better connect and support their kids while setting a balance with the game. Their hope is to find a silver lining in the game that broadens their perspectives on why it’s valuable and important to their kids.




WIREFRAMES & DESIGN





From here, I knew I wanted to explore Minecraft more. The game felt less controversial compared to Fortnite with less of a focus on microtransactions and more of a focus on creativity. Additionally, the overall game aesthetic with isometric cubes gave me more direction and room to explore for its design compared to Fortnite.




At first, I tried different concepts for how to process and read through the content. I mainly explored two different layout — a linear one and a segmented one. For both, I had a cornerstone piece that would server as the main, core actionable takeaways that the parent would receive from the site. 




Next, I delved through multiple ways of managing, structuring, and delivering the content. In some, I tried doing a comparison of positives and negatives in a visually narrative way, while in others I focused more on communication and prompting the parent with interactions that engage the parent to learn.





Finally, I explored different color palettes based off of the look of Minecraft while making it palatable to parents. I wanted to play into the aspects of games and Minecraft so that the aesthetics design the space in a provactive and compelling way.

I experimented primarily with 3 divergent directions with different goals and color schemes: a more refined and reserved aesthetic with limited Minecraft aesthetics, a louder more vibrant color scheme with gradient-mapped images of the game, as well as a more retro style design that speaks more to old-school arcade games with Minecraft visuals instead.









PROTOTYPES & USER TESTING


At this point, I actually ended up struggling a lot with the delivery and interactions. They either felt too forced, not forced enough, or just not there. The iteractions and designs needed to be fleshed through more and be more thought-out towards why and how this site could benefit parents who can barely afford the time to learn more about these things.

I wanted to drive these parents to learn and explore more, similarly to their kids in Minecraft. As shown in both my notes and in the wireframes, I tried hovering, scrolling, inputting, and dragging all as different methods to engage and provoke the user into a discussion with their prejudices towards games.


At this point, I began running some user tests. I wanted to know how useful this product was and whether or not the site acts upon the needs that I uncover. I focused on creating a survey to not only prob the solidity of my site but also to check on the assumptions I had made at the beginning. These assumptions formed the crux of my site, and while dangerous, were also exceptionally important to the design and backbone of the sight. 

The parents, not me, should be the ones verifying the decisions I’m making. The tests were designed to actualize these assumptions and showcase what was true and what was not, and how I can best structure my site to support these parents.



The user tests and corresponding survey proved to be incredibly useful. They exposed many faults in the my design and interaction structure that forced me to reconsider the making of the site itself. The concept of flow state felt too forced and distant from Minecraft and it had become too broad and vague — the focus became psychology and flow state rather than games, and that was something that did not go in line with what I wanted to pursue.

However, the survey showed that my assumptions definitely had validity and were in fact more of the focus. I needed to re-align my designs and interactions to best support them and their needs.


Sample Survey Questions

When do you see yourself using this website, if at all?

“I sometimes feel bad I never try to learn or play the video games my son plays, so if this [site] would [help] me to better understand his playing habits and behavior when playing I would be interested in trying this website.“



What would you like to know more about in regards to Minecraft?

“Why is it different or better for kids than other video games? What do they learn by playing [Minecraft] or what skills do they develop if any? Is it just for fun?”




CONSTRUCTION


From here, I ended up purely focusing on Iteration 3: A parent’s guide to the positive possibilities of Minecraft. This version allows me to really hone in on the needs and wants of these parents as well as better design the interactions and site to really lean into the look and feel of Minecraft.






Now, it was time for me to start building out the site from scratch. I wanted to focus on the “game” aspect of Minecraft, so I tried to play around with different ways to gameify the space. I experimented with different hierarchy of elements to really set the stage and scene for how it would look and feel.

I split the site into 3 major levels that you would drag-and-drop a playable character into. These levels would in turn allow you to gain experience that would hopefully cause to the user — the parents — to level themselves and their understanding of games up. Inside each level, there would be a main side-scrolling piece with a heavy Minecraft aesethetic that would just allow users to flow through the content in bite-sized chunks .





However, the more I built out and tested my site, the more I realized the interior side-scrolling space was more successful than the exterior drag-and-drop entrance. The way the pixel clouds and Minecraft floor worked with the smoothness of the side-scrolling really created a playful, fun, and engaging method of interaction that proved to be incredibly simple and successful. Additionally, this movement from a separated approach to a single continuous flow of levels removed a lot more of the complicated Javascript coding that I was struggling to overcome with the drag-and-drop states.

At this point, most of the work was now in the content refinement and honing the tone of the piece. The words I was writing and curating throughout the site needed to have some more clarity. Originally, I focused on making the site entirely in a kid’s voice, but I found out it needed a more authorative tone that grounded the piece and gave parents the comfort and willingness to listen to said voice. Thus, I chose to split the kid’s voice off into oversized pull-quotes that helped clarify and give context to each separate level.






CRITIQUE


Looking back, I feel like this project was a successful endeavor that I learned a ton from. I began planning this project in the winter of 2019 as just a simple idea to understand why people play games, and through the course of half a year, I probed the idea, iterated upon it many times, and fleshed it out through research, wireframes, prototypes, user tests, and finally coding it entirely by hand. This independent study really opened my ideas to the depth of work a UI/UX and Product Designer goes through, and my skills as a designer really blossomed through it.

However, no design is ever finished or truly “perfect,” and there’s a few things I want to work towards and refine with this site.


First off: content density. Even with all the refinements towards content and simplifying the design, the content was still too heavy. While the writing was successful, I needed to break it up more. Ideally, in a Version 2, I would definitely consider inject icons, useful editorial data points, and even videos to help space out the content types and levels, and to give parents more digestable ways to learn and level up.

Secondly: setting the stage of what Minecraft is and its scope. Something I noticed during critique and while passing around the final product was that there’s a bit of from the lander to the first level. While I assumed that most parents would know what Minecraft is at a general level, I failed to introduce Minecraft generally for parents who might not know or even understand what Minecraft is and its scope. I felt that this could be best solved with video, recordings, or even just data that shows the breadth of Minecraft players and how widespread they are (age and number).

Finally: visually tying the sections together better with a stronger visual flair. While I tried to tie elements in a certain level together using a specific spot color line, there’s more I can definitely do in terms of making each level feel more distinct. I want to make the hover states stay active when the user is in each specific section, as well as tie in the section’s color more prominently. In a future version, I definitely want to get more photos or videos of actual kids playing Minecraft to solidify the game’s presence in reality.
CURRENTLY: reading ︎ Ruined by Design, playing ︎ Among Us, listening to ︎ Honne