Case Study: Final Project-Early Game

Early Game represented the end of my bootcamp and required me to apply everything that I learnt in Ironhack.

Miguel Manzano Aguilar
7 min readMar 24, 2020

When it came to choosing the topic and it’s develompent criteria, I was presented with some difficulties. It seemed to me that we were presented with two options.

The first one was picking a simple theme, one that allowed us to focus on the skills we had learnt and getting every single detail right. A project that allowed us to do everything by the book, and show how well we could do so

The second option required exploring new fields, learning, and toying with themes or problems that we didn’t have to deal with before, despite the risk that this involved.

To me, my attraction for a particular topic made the choice for me. Online videogames where the chosen theme, and I knew that while UX would be challenging, UI was going to be even harder for me.

Making the choice took me two whole days, but I ended up going for it.

UX

To me, one of the main problems with online videogames had always been the barrier between players and the rest of the world. Whenever I tried to share my passion for them with other people, I was told that they required too much time or were too hard to learn.

When I started researching this doubt was confirmed. People manifested they often thought videogames required huge amounts of time, and most of them started playing exclusively because of their friends and relatives.

Many of them manifested that online videogames were often useless in teaching them how to play.

The hardest part was deciding wich of these themes we needed to work with and how to do so.
In the research I looked into the players themselves: When did they teach other players, how did they do it, wich concepts were the hardest to teach… I had a tough time deciding wich of these topics I had to focus on when I finally obtained their insights

I also found there was many pages already devoted to teaching new players: tutorials, coaching… The services were varied.

But what these pages called basic were often advanced concepts that new players didn’t even consider exploring, and 1 on 1 teaching was exclusively via coaching. The coaches were often too expensive and way too specialized for new players.

Análisis competitivo de otras páginas

The final conclusion was that there were too many basic concepts that players found boring to teach, but once a new player got past a certain barrier of knowledge, veterans loved to teach even if it meant going out of their way and leaving their own gaming experience aside.

Brainstorm y affinity map para el proyecto

Since I needed to aim for an MVP, I chose to cut down on possible functionalities through a MoSCoW. In the end, I managed to focus on two fundamental functionalities:

The first one was a tutorial system that covered the knowledge gap between basic tutorials and the intermediate player, and dealt with the concepts that players are less prone to teach.( Basic combos in fighting games, or roles and lanes in MOBA’s for example)

The second one was a mentoring system that connected veteran players with new players, and offered them an incentive system that rewarded teaching through a special currency.

This currency could be used to buy premium tutorials and coaches that would be offered by the platform itself.

With these functionalities in mind I moved on to my personal challenge: the UI.

UI

My teachers had warned me that this project’s real difficulty lied in the visual aspect of it. It wasn’t enough to create functional and clean UI: I needed to take a risk and step up to match the visual style of gaming products

I needed to do this while keeping in mind the concepts of community learning and the connection between players, so it needed to be warm and friendly as well.

Paradójicamente, esa idea me acabo llevando al entorno de juego offline, y más concretamente a las recreativas. Mi moodboard trataba de inspirar tecnología y modernidad, pero también el juego en compañía y el aprendizaje compartido que iba a aportar a sus usuarios.

For me, this idea was closer to an offline environment: Arcades, cybercafes, tournaments… The kind of places where gaming communities had a special meaning, and where this kind of community learning happened naturally.

These were the results:

Mi paleta de colores estaba clara, y no fue dificil extraer un color primario y secundario para mi aplicación. My color palette was clear and it wasn’t hard to pick primary and secondary colors for my project.

But I had to face a challenge that I knew I could avoid for much longer: The project called for an aesthetic that was best suited for dark mode, wich was a style that I hadn’t had the time to learn through the bootcamp.

Realicé la paleta en Light y Dark mode dado que aún no había decidido cual modo emplear en el momento de hacerla.

I decided to try and use this opportunity to learn dark mode design, and so I jumped into material and IOS guides, along with many other online resources.

The learning process was harder than I thought at first: I had to re-learn how to play with depth perceptions, shadows weren’t a useful tool anymore, and I had to learn from scratch how to play with multiple degrees of lighting.

There were many effects and many ways of offering visual feedback that worked for light mode, and I struggled for a few days as I learned how to use their equivalents in dark mode.

Fue un aprendizaje a ritmos forzados y siempre surgían pequeños detalles sobre la marcha: La saturación de los colores era demasiado agresiva, el fondo oscuro hacía más difícil usar colores en líneas finas, contrastes que no cumplían los estándares mínimos…

The experience was rough, since I only had a few days to assimilate concepts that I would normally learn in a week.

Style tile para Early Gaming

With every step I took, I needed to double check my work to make sure I was adapting to design standards and applying the new techniques correctly

I chose to elaborate a landing page for the tool, since many of the sites I had studied in my competitive analysis used one for their home pages, and it proved to be very functional when it came to showing visitors what the site could offer.

I moved on into the filter system for the tutorials functionality, focusing on searches by genre and specific title.

Las cards ofrecen información sobre la dificultad y los jugadores registrados, para que el usuario pueda entender como de costoso le resultará aprender el juego y cuantos usuarios podrán ofrecer su ayuda en caso de pedirla.

The cards provided information about how difficult a game could be, and how many registered players were available for teaching that particular game. This allows the user to picture how accesible teachers will be, and how much help they will need for a specific game.

Lastly, I designed the functionality that allowed the user to post teacher requests, so they could easily manage them through a personal menu later.

Este menú nos permitirá gestionar las ofertas de ayuda, y contactar con los profesores a través de un chat integrado para discutir la lección o el método de ayuda en más detalle.

Communication happens through an internal chat, that lets us talk to our teachers or alumni with ease. This way, we can agree on the best way to take the lesson, the methods that would help the new player, or the time that the lessons will take.

--

--