Using UX design to build Octoborg’s landing page
Octoborg®: a digital game development and consulting studio focused on education
Company
Octoborg
Project
Designing Octoborg’s landing page
My role
UX/UI designer, user research, prototyping, testing
Tools
Figma, Miro, Maze
Time frame
15 days (Feb 2021)
The Problem
Ready to publish their first authorial game, the partners of Octoborg® realized that they did not have a company website for contact information and game releases. In 15 days, I was willing to use UX design techniques to build the company’s website, identifying the most important data to be shown.
The UX Challenge
How could we build an attractive website showing the company’s main information?
Current Scenario
According to a survey conducted in 2018 by the company Homo Ludens, the games market has been growing in Brazil. Between 2014 and 2018, all regions of Brazil saw an increase in the number of game development companies, from 133 to 276 formal companies (the ones with presence in the national register of legal entities — CNPJ). The greatest growth occurred in the North and Center-West regions; however, the Southeast region continues to concentrate most developer studios (146) presenting an increase of 109% in relation to 2014.
The survey also analyzed the type of activities carried out by the developers and revealed that only 3 out of 10 developers work in serious games (aimed at educational purposes). About 33% of them develop their own educational games and 27% educational games for third parties. Other activities related to serious games are corporate training games, health games and simulators with the use of specific hardware.
The area of serious games is a highlight when we analyze Basic and Higher Education. Mathematics, Computer Science and Engineering and Health Care are some examples where serious games are already employed. Basic Education, although little explored, is attractive to this segment, especially in the High School stage. Studies show that young people do not perceive usefulness of the content of the classes. Mário Meireles, master and doctor in Computer Science and Computational Mathematics, professor at the Federal University of Maranhão — Brazil, talks about the use of serious games as an instrument of engagement and learning. In an article published in BNDES Setorial #42, Gustavo Mello and Patricia Zendron, analyze the serious games market, showing that, whether in the Mathematics, the Natural Sciences or the Human Sciences, it is possible to use digital games as a tool to support the transmission of concepts and information, exercise the application of techniques or assist the learning and assimilation of didactic contents.
Within this scenario, Octoborg®’s team wishes to offer its services for the development of serious games aimed at education. In order to be active in the market and to be found more easily, they need a website dedicated to showcasing their work and thereby attracting their first customer.
Business objectives
Faced with the challenge entrusted to me, the idea of a solution aims to give visibility to the company, in order to present its values, capabilities, composition and send the message that educational games can be fun and effective.
Develop Octoborg®’s website to reach potential customers and, in two months, close the first contract.
User
In order to get to know the potential user of the service better, I developed a proto persona called Carla. With that, I identified pains and possible painkillers and built a proto journey from the identification of the problem (students’ lack of interest), through the idea of implementing games, to hiring a development company. The prioritized profile was the one I managed to gather more information which was validated by research; however, to generate concrete results, much more research is needed.
The collected and validated information for proto persona and proto journey were translated into the images below.
Proto persona
Proto journey
First validation step
After creating the proto personas and their proto journeys, I listed the Certainties, Suppositions and Doubts in a CSD Matrix and prioritized, through the Knowledge x Impact Matrix, the ones I found most interesting to research.
CSD Matrix
Impact x Knowledge Matrix
In order to better formulate the questions in the online questionnaire, I turned the prioritized assumptions into hypotheses and established metrics to know whether it was right or wrong.
The research was carried out in an online form (Google Forms) and disseminated on LinkedIn and Facebook and among friends and acquaintances in the area of education. The collection of results, for the purpose of this article, were collected after 4 days of circulation and had 36 respondents.
Outcomes
The questionnaire’s responses analysis answered some questions about the proto persona, the proto journey and the hypotheses raised. However, for greater assertiveness it is necessary to keep the survey live longer to collect more data. In addition, the study should be deepened through interviews.
The conclusions I reached by analyzing the information obtained so far were:
Hypothesis 1: Schools are open to the use of technologies aimed at teaching, since they already have this practice, even before the pandemic.
Hypothesis 2: Professionals who use digital games (45%) are encouraged by the institution.
Hypothesis 3: Students are more participative in classes with the use of digital games.
Hypothesis 4: Inconclusive data, since half of the respondents were unable to say who is responsible for hiring developer companies.
Hypothesis 5: Most respondents do not look for developer companies through Google but ask their colleagues for referrals.
Hypothesis 6: Inconclusive data. Only one person answered that question.
Hypothesis 7: Education professionals have little knowledge about digital games, despite they are able to establish conversations with students about games they have been playing lately.
In addition to the hypotheses raised, I took advantage of the form to understand what people are looking for when looking for a digital game development company. Despite the few responses so far — only 8 said they had already looked for a developer company — I raised a possible hierarchy of the most important information for them.
Benchmarking
The path taken so far has revealed important information about the target audience, knowledge about digital games and the product potential of the company Octoborg® (digital games aimed at education). The survey also revealed the most important information for those who have already looked for a game development company. After this analysis, I surveyed the main educational game developer companies already active in the Brazilian scenario and carried out a benchmarking identifying the information contained on their websites. The numbers that appear in the figure are associated with the order in which they appear on the website.
Prioritising opportunities
Using the HMW technique (from English, How Might We), I revisited the opportunities identified in the journey and prioritized those that would generate greater impact with less effort. The two selected opportunities were used to make the first draft of the Octoborg® website.
Four-Step Sketch
After prioritizing opportunities, I started the ideation phase by reviewing the information obtained so far, taking notes and looking for ideas on the sites used for benchmarking. Then, using the Crazy 8’s tool, I explored different ideas and ways to present the desired information.
The best idea obtained by Crazy 8’s was explored in more detail in a Scribble, already paying attention to the words I could used on CTA buttons, for example.
With the most well-established ideas, I went for the low-fidelity prototype, using Figma. First, I made the prototype for access via cell phone (Mobile First), then I implemented the same site for desktop version.
Low-fidelity prototype usability test
The low fidelity prototype was tested through the Maze.design tool, a free tool that allows the testing of prototypes produced in different platforms (Figma, Adobe XD, InVision, Marvel, and Skecth). In it it is possible to insert a preferred path (golden path), in addition to questions of various types (open, multiple choice, opinionated, among others). At this stage I prioritized testing the mobile version.
Results of the first usability test
Two people left comments at the end of the test. The comments were analyzed and I decided to make some changes to the prototype.
- One person completed the mission after viewing one of the games and said he would have liked to see more information about the other game. Although I did not prototype the interaction with the other game, I found it interesting that the person clicked on the “order” button, but referred to it as “buy”.
- Another person called attention to the button on the Hero Header. The call prompted her to want to purchase a game rather than contact the company. In addition, she found the tag line contradictory.
The feedbacks received served as an engine to improve the prototype before building it in high fidelity. The first comment highlighted the absence of a button to buy a ready-made game made available by the company. The second comment pointed to the change of the first button that appears on the page and the improvement of the text call.
The heatmap provided by Maze tool highlighted the clicks on the Hero Header button hence its importance.
Wireframe & Style Guide
Starting from the low fidelity prototype and the results of the first usability test, I started building the wireframe. Some modifications were made based on user feedbacks. I used two different grids to help me in the positions of the elements on the screen: Bootstrap’s 12 column grid and 8 point grid.
Then I identified the components that would go into the style guide. The image to the right shows the headings, paragraphs and buttons that will be used in the mobile version. Using the lean methodology, I created only the styles and colors needed at this point.
I then started the style guide. First I defined the primary and secondary colors (and their variations), then the light and dark colors. Here it is worth mentioning that the company did not have a style guide and all the definitions were made for this project. I went on to define the typography and its variations using the minor third proportion (5:6) starting from 16px for the paragraphs in the Desktop version (13px for the mobile version), because it gave a good scale between paragraphs and titles. Finally, I defined the share icon and set up the primary, secondary, CTA, textual and iconographic buttons.
Thinking about the accessibility of the site, I combined the colors and checked the contrast using the Contrast Checker site. On average, the accessibility of the chosen colors had the following result:
Colors
Typography
Buttons
High-Fidelity Prototype
Access the high-fidelity prototype.
Usability Test
The high fidelity prototype was submitted to usability tests using the Maze tool. The test was live for 6 hours and counted with the participation of 5 users.
In this phase, the main interest was to analyze what the user’s first action would be. For this reason, I added an end of test button so that people could end the test whenever they wanted. Thus, they were free to analyze the whole site and click where they felt more comfortable. The second objective was to validate the changes made after the first usability test, so I repeated the questions from the previous test.
Results
The heatmap of the first screen showed the first intention of those who tested the prototype. In the following images, I have summarized the main results achieved.
For greater assertiveness, it is essential to run more tests. For this reason, I preferred to think about possible improvements only after collecting more information about the browsing experience.
Next steps
With the mobile version, for now, completed, it is necessary to move forward with the desktop version. The same steps must be followed for this other version to then hand-off to the developers.
Conclusions and lessons learned
This was my first solo case and my first landing page. There were 6 whole days (and several nights) dedicated to this project and after 3 intense weekends (the first being the carnival holiday) I completed the task of completing the first part of the study and turned my learnings into this article (which I am very proud).
As this is a real company, I kept the quantitative survey form open to receive more responses, since many more responses are needed to draw more accurate conclusions. In addition, as it is a quick study, most users were close people and, despite being the target audience (people in the education field), their answers may have been biased. New research with “external” people should be done to validate the hypotheses raised.
It was enriching to do all parts of this study: from the formulation of the questions in the form and their subsequent analysis, to the prototyping of the site and creation of the images for this article. Time management was also challenging. While the research and tests were in the air, I started to dedicate myself to writing this article.
Many other techniques such as interviews, A/B tests, card sorting, 5-second tests, UX writing studies, among others, in addition to increasing the number of tests and the number of respondents are extremely important to analyze the return on investment.
To sum up, I brought my rationale for building the landing page of a company that develops educational and fun digital games that is new to the market. This is a job that deserved much more time and dedication, but UX design is also about prioritize (or eliminate) solutions and work with what is within our reach. If in a short time, alone and using only free tools, I managed to apply so much knowledge, imagine the results I could get if I’m working as a team, with financial support to seek answers from the target audience and use the paid versions of some tools! =)
I apreciate your attention to this article.
