Loading video...

Website Design & Development

RealSeriousGames.com

Following the success of the rebranding project, I extended my services design and develop their new website. The website was designed to reflect the new brand identity and showcase the company's work in the field of virtual reality and educational gaming. Since this project began in 2020, the website has gone through several iterations and updates base on the analytical data and studies to improve performance and experience. Integrating the grand scale of the digital eco-system is noted in a separate journal entry.

_{Live Url:}

realseriousgames.com

_{Services includes:}

Website UI UX Design, Post-Production and motion-graphics assets, Frontend Backend, 3D modeling, SEO & Marketing knowledge.

_Tools:

VS code, AWS EC2, Centos Infra, Figma, Illustrator, Photoshop Premiere Pro & After Effects, Blender, Lottie

Category :

Website Design & Development | UI & UX

Client :

Real Serious Games

Start Date :

June 2020

Company :

Real Serious Games

- Senior Cross-Discipline Designer

Deliverables:

Website Design & Development (WordPress → PHP → Next.js), UX/UI & Content Strategy, SEO, Analytics & Performance Optimisation, CMS, CRM & API Integrations, Blog, Newsletter, Community & Support Systems, Social Media & Growth Integrations, Hosting, Domains, SSL & Security

Loading video...

Loading...

RSG website login screen in the dark visual style

Loading...

Loading video...

Web Design & Development Process

Orginal site was built on a wordpress. The site was slow and not user friendly. The site was not mobile responsive. The site was not SEO optimized. However, as wordpress was still prefered as the cms of choice, the site was rebuilt on wordpress with a new design.

Understanding Objective

Different company have different objective for their website. Some company use their website to showcase their product, some use it to generate leads, some use it to sell their product. Understanding the objective of the website is the first step in the process of redesigning a website.

Usually, the objective of the website is to generate leads. However, business model is unique and so is the objective of the website. But, in most cases, after serving several clients, they're not entirely sure themselves. This is when having wireframes and user flow comes in handy.

Design Development, SEO

The design and development of the website is the most important part of the process. The design of the website should be user friendly and should be easy to navigate. The website should be mobile responsive and should be SEO optimized. The website should be fast and should load quickly. The website should be secure and should be protected from hackers.

The website should be easy to update and should be easy to maintain. The website should be easy to scale and should be able to handle large amount of traffic. The website should be easy to integrate with other systems and should be able to communicate with other systems. The website should be easy to use and should be easy to understand. The website should be easy to use and should be easy to navigate.

Web Infra, Security, Analytics

Setting up the web infrastructure is the next step in the process. The website should be hosted on a secure server and should be protected from hackers. The website should be backed up regularly and should be able to recover from any disaster. The website should be monitored regularly and should be able to handle large amount of traffic. The website should be able to scale and should be able to handle large amount of traffic. The website should be able to integrate with other systems and should be able to communicate with other systems. The website should be able to track the performance of the website and should be able to analyze the data. The website should be able to generate reports and should be able to provide insights into the performance of the website. The website should be able to generate reports and should be able to provide insights into the performance of the website.

Monitoring and tracking

SEO tools like Google Analytics, Google Search Console, SEMRush, Ahrefs, Moz, etc. are used to monitor and track the performance of the website. These tools help in tracking the performance of the website and provide insights into the performance of the website. These tools help in generating reports and provide insights into the performance of the website. These tools help in tracking the performance of the website and provide insights into the performance of the website. These tools help in generating reports and provide insights into the performance of the website. These tools help in tracking the performance of the website and provide insights into the performance of the website. These tools help in generating reports and provide insights into the performance of the website.

Research & Wireframes

Evolution of Web Architecture

The design and development of the website is the most important part of the process. The design of the website should be user friendly and should be easy to navigate. The website should be mobile responsive and should be SEO optimized. The website should be fast and should load quickly. The website should be secure and should be protected from hackers.

Pre 2020

^{v.0 by previous contractor}

2020

^{Wordpress v.1 - Archived}

2022

^{PHP Site - No CMS}

2025

^{Final NextJs Payload}

The Problem with Wordpress

Before wordpress supported headless cms, it was extremely vulnerable. The site was slow and not user friendly. As the site is also intended to create brand dominance within the vr xr industry, in corporating custom threejs content was challenging.

Innitialy, react was my framework of choice, as I was fairly new to it, handling deployment and backend enviroments had to be upgraded as well. And so, the site was rebuilt on wordpress with a new design. The site was built with a custom theme developed with PHP. The site was also optimized for SEO and mobile responsiveness.

React-Three-Fiber Integration

All 3D assets were remodeled to achieve significantly lower polygon counts, with textures consolidated into optimized atlases to ensure fast loading and smooth performance. Leveraging extensive experience across multiple industries and 3D formats, each model was adapted for real-time rendering constraints—improving efficiency and delivering a noticeably better user experience.

The Intrim Solution

Developed with PHP to address hosting and server constraints.
Upgrade security and performance with custom validation and error handling.
Intergrate google analytics and tag manager for data tracking and analysis.
Setup and configure Google Search Console for indexing and search performance.
Setup goals and events tracking for user interaction and conversion analysis.
Integrate SEMrush for SEO and performance monitoring.
Integrate Hotjar for user experience and behavior analysis.
Link with social media platforms for content sharing and engagement (LinkedIn, Youtube, Instagram).

Setup and configure Google My Business for local search and business listing.
Setup and configure Google Ads for search and display advertising.
Setup, configure and monitor Campaigns on LinkedIn.
Create a custom dashboard (Dashten) to assist with managing and monitoring the digital eco-system.

Related Projects

Loading...

RSG website screen introducing extended reality services

Web Applications UI UX

RealSeriousGames.com

realseriousgames.com

Website UI UX Design, Post-Production and motion-graphics assets, Frontend Backend, 3D modeling, SEO & Marketing knowledge.

VS code, AWS EC2, Centos Infra, Figma, Illustrator, Photoshop Premiere Pro & After Effects, Blender, Lottie

Website Design & Development | UI & UX

Real Serious Games

June 2020

Real Serious Games

Roadmap

Web Design & Development Process

Orginal site was built on a wordpress. The site was slow and not user friendly. The site was not mobile responsive. The site was not SEO optimized. However, as wordpress was still prefered as the cms of choice, the site was rebuilt on wordpress with a new design.

Understanding Objective

Design Development, SEO

Web Infra, Security, Analytics

Monitoring and tracking

Evolution of Web Architecture

The Problem with Wordpress

React-Three-Fiber Integration

The Intrim Solution

Website RSG

ReBranding RSG

Dashten