Where
Leida, Spain
What
Website Design
Why
New Website Launch
Role
Web Designer, Visual Designer
Category
Landing Pages, Website
When
August 2022 - January 2023
Starloop Studios, owned and managed by Magic Media is a leading game development company in Spain that provides quality game art and development services to game developers and publishers since 2011. Ever since the acquisition of Magic Media in 2021, the company has been focusing for AAA+ game development and services.
The main goal for this project is to create a whole new website dedicated for Starloop Studio's mobile services. The website will contain all the information ranging from 2d to 3d art services, game animation, game development, game marketing solutions and other important company information. The website will be called "Starloop Mobile".
I had the privilege of working with the company's lead developer, marketing manager and art director. I was responsible for creating the website's layout, wireframes and visual designs while making sure that all finished project materials/assets are verified before handing them off to the dev team. On top of that, I also assist some digital marketing tasks whenever needed.
At the beginning of the project, we were briefed by the management with regards to why they decided to launch a new website. Before the acquisition of Magic Media, Starloop Studios was well known for their mobile game services and it was due to the rapid market for mobile games and the continuous mobile development inquiries, that lead to the decision to separate AAA+ and mobile game services.
That being said, I did a quick research on the current state of mobile games in the market dated few years back up until 2021.
Mobile games revenue has been rapidly increasing in the last 6 years. The market has an estimation of $180.1Bn in 2021.
*Statistics based on Newzoo annual growth report 2021
At the beginning of the process, it can be an intimidating task gathering information from the client. This would involve asking questions with the designs (branding, visuals, layout etc), content and everything else. There are so many that it can be easily overlooked. That's why it's crucial to present a good design checklist before anything else. This can help with expectations and can answer some of the most important questions. It can benefit developers and SEO specialists as well, since it includes technical questions.
Aside from the client's competitive audit which is already included in the design checklist, we were also tasked to do a separate audit to 2 of the company’s chosen competitors. Our main goal here was to compare how they present game portfolios, visuals and the overall user experience when navigating the website.
Competitor 1
Competitor 2
Though both website show amazing visuals, the key difference was layout and structure. Through our audit, we were able to come up with different pros and cons.
Moving on, I created a mood board document and invited some of the key members of the team. This is where we do a creative collaboration by posting any images, texts or design materials of whatever we might feel the concept of the website should be inspired to. This shared document will help me determine what style, colors or ideas that should convey to the new website and branding.
Above screenshot is the trimmed down and final version of the mood board.
At this point of the process, I created a design guideline document. This document will serve as a cheatsheet for the company's branding. It can also benefit everyone who's directly involved in making digital marketing materials as it contains information about what font or color palettes to use. If there are changes with the styling, this document will be updated.
A site structure is another part of the process where I create a simple diagram that shows the hierarchy of the site's pages. Even though these information are already available in the design checklist, It is still essential to show a visual representation and add it to the site's documentation. This can also serve as a reference and would be a great help for anyone in the team when planning ahead with the tasks.
Once I had my initial processes done, I started creating the low-fidelity screens. My goal here was to make sure the layout and structure of all the main pages are finalized and approved before making the actual designs. This part involves a lot of collaboration with the marketing team, specifically content writers.
With low-fidelity screens ready, It is time to make the actual website design. There were a lot of back and forth changes within the process but mostly visuals and content revisions. The design is primarily based on the mood board and the design guideline document with some small additional styling that would fit the concept.
Color Palette
Primary, secondary, tertiary, background
Font
Poppins - Regular, SemiBold, Bold
Look and feel
The style of the design was achieved by incorporating some bubbly and cartoony art assets from the artists
This includes mobile responsive designs and some special sections from the website. I also made sure to create separate page in the design tool (Figma) dedicated for icons and other assets used in the design for easier reference and access for the dev team.
With loads of free amazing icon libraries to choose from, the process of designing interfaces is much easier and efficient. However, there are cases where we need to customize or create an icon to be consistent with the planned concept. When I started making the high-fidelity designs for Starloop Mobile, there were sections of the content where I had to customize some icons to match up with what was required in the content.
To have a consistent layout, I made sure to use strict alignments by using the grid layout feature in the design tool (Figma) and applied correct measurements to each section of the design. I had my designs set at 12-count column with a width of 80px and a gutter of 24px.
When designs are done and ready for implementation, I usually add references or prototypes for animated sections. In Starloop Mobile, I had to make sure to collaborate with the dev team for any sections that require customized animations. If providing references won't work, I then create prototypes using any of my preferred prototyping or motion graphic tools for presenting my idea.
When it comes to designing websites, It's always important to make it mobile friendly. In Starloop Mobile, most of the low and high-fidelity screens I designed were presented in desktop version. With mobile and tablet screens, since the website is content based, I only did the designs with pages and sections that require attention. Most of the process for responsive designs were with collaboration with the dev team for quality checks.
There are still some recurring quality checks, now that the website is ready. This would include web page performance, code quality, browser checks and everything else. At this stage, with the help of an SEO expert, the team is making sure that everything is in optimal performance. My role is to assist the dev team by making sure that images and other assets are correct in terms of size and quality.
Starloop and Magic Media's goal is to provide quality results not just for gamers but for publishers, developers and world class brands. That's why its really important for me to make sure that the website is well-structured and well-designed as this would help make a good impression for existing and future clients.
Designing Starloop Mobile was both fun and challenging at the same time. I would like to thank the management for the continued trust and allowing me to be creative with my designs, the marketing and dev team for the new learnings and to the whole Starloop Studios team for the smooth and seamless collaboration.
- Mark