Project date: 01/06/2019 to 01/12/2019
My Role: UI/UX Design of the website.
Tools: Adobe XD, Miro, Microsoft Visual Studio Code
Client Information: Ging Games is a small enterprise hyper-casual mobile game company based in Ankara, Turkey.
Please click on images for high resolution.
Design Process:
Goal identification:
I meet with the client to determine what goals the new website needs to fulfill and to determine what its purpose is. The initial key findings are listed below:
-It is stated to be a simple and small web page.
-Themes should be related to gaming, fun, and vivid.
-Vivid above the fold followed by soft pastel tones.
-Website should have simple navigation.
Scope definition:
I discussed and determined the scope of the website both for content and timewise with the client.
Customer Requirements:
-The homepage should not be bloated. It should start with an attractive greeting with a company slogan.
-Above the fold should be followed by the games section where some of the games should be displayed.
-After the games section there should be about us and careers sections on the homepage.
-There should be a contact page where people can send their information such as mail address, name, and message.
-There should be a career page containing short small information about the page.
-There should be an application page where people can send their information along with their attached file type.
-There should be a games page that shows all games with a picture and name. This page should not contain any paragraphs. The game pictures should be linked to the apple store links.
-Footer should contain the related contact and social media information along with navigations to other pages.
Time-based:
For a total of 4 months, there will be monthly milestone feedback sessions to see the ongoing process.
Target Audience:
Age starting from 9 to 60 can be a publisher studio, a game player, or a person interested in the company.
Competitor Analysis:
I tried to analyze the direct competitor's design strengths and weaknesses to compare them with my design idea. I came up with a top list of hyper casual game companies including publishers and developers by looking at Data.ai platform analytics for EMEA for Apple Store and other websites. I came up with the following companies: Ketchapp, Lion Studios, Supersonic, Good Job Games, Voodoo, and Rollic.
Top 10 EMEA Hypercasual Games by Global Downloads
Here is the Competitive Analysis Table where studios are compared according to their current website features.
Key Findings:
-Most of the websites do not have breadcrumbs.
-Homepage buttons usually navigate within the same page.
-Some have not got or lack contact information.
-All of them are responsive, have high-resolution media, have consistent content, and have multiple platform support.
-Some lost easy navigation due to long pages with no go-to top arrow.
-Some have a bloated homepage that contains too much information.
-The ones have a long navigation bar preferred side menu on mobile design.
-Additionally, some have design mistakes such as creating a home button on the navigation bar and having no text-media and whitespace balance.
Information Architecture:
With the scope well-defined, I started to create the IA, defining the structure of the website, and the relationship between all the areas.
Wireframe Creation:
Homepage Wireframe
Games Page Wireframe
Culture Page Wireframe
Contact Form Page Wireframe
Error Page Wireframe
Visual elements and Content:
With the site architecture and some content in place, I started working on the visual elements combining the client's needs. Therefore, I created a mood board to help with this process. At this point, I was given the textual information that needs to be put on the website.
High Fidelity Design:
Homepage
Games Page
Culture Page
Apply Page
Contact Page
Error Page
Testing the Design:
By now, I've got a high-fidelity design, it's time to make sure that all interactions are working to demonstrate it to the client. I tested the design with 3 people who are in the game industry.
Converting Design into Code:
To ease the time and effort of the developers, I converted all artboards into HTML and CSS files via the Web Export Plugin of Adobe XD. I coded the micro-interactions, animations, and mailing/contact settings in JavaScript.
Testing the Code:
I used Microsoft Visual Studio Code to test the code in a Chrome browser. I walked through navigations, micro-interactions, images, and animations.
Project Delivery and Result:
At the end of this project, I have significantly contributed to my HMTL, CSS, and JavaScript skills. In each milestone, I shared the current process with the client and moved according to their needs in an agile project system.
I presented a prototype of the final design to a team of 5 people consisting of developers and game designers for user testing and 90% were able to achieve the goal of simple navigation and contact features successfully.
