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.
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:
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:
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.