Website Redesign for the Star Trek™ Fleet Command Computer Game

Scopely wanted to keep using WordPress (WP) as the Content Management System (CMS) for this website, not just because the team is already used to working with it but also considering the need for migration of a lot of content.

Once we worked on a completely custom design for the website, we proposed not to use a pre-built WP theme for this. Like this, we also avoid the possible issue of maintainability of a theme out of our control.

1. UI/UX Design

   We were ready to start putting ideas into the designs once we gathered all the information and expectations from the growth team.

   The first step was the development of wireframes for the website. Our designer created more than one option of UX to give Scopely a general feeling of their options. The whole project was built in Figma so that the client could share the process with or consult at any moment.

   This first round allowed us to collect feedback to refine the wireframes interactively, making the best possible balance between the client's needs and design best practices, coming up with an adequate solution for this website.

   

   Next on the agenda was setting a visual language for the website. Even though it was important that the website reflect the game itself, Scopely was looking for a modern design based on the actual game. We proposed to work on a decoupled UI that wasn’t completely dependent on the game, so the website will not get completely deprecated if there’s a change in UI.

   Addressing this was a very interesting challenge while working on the Design System. Include something from the gaming world and adapt it to the website with different needs and rules.

   One of our main concerns was related to user accessibility for the website. For instance, some of the game’s original colours were tweaked to be in conformity with WCAG's AA and/or AAA level compliances. We had to follow with a series of colour testing and interactions with the Scopely team until we got to a well-balanced colour schema.

   

   In general, the Design System we delivered was a compromise between best practices, STFC identity and a renewed vision of it. Using Figma was crucial during this iteration phase since it allowed for quick updates and changes at any given moment.

   After the Design System was established and approved, we moved to the Hi Fidelity Mockups, bringing the insight from the wireframes and the UI system into formal layouts.

   

   Each page was designed in several viewport sizes and immediately subjected to Scopely approval. Just like the wireframe stage, each milestone was reviewed.

   In this phase, new people from the STFC team were brought in, which deepened the feedback and allowed for better conclusions.

   Having the whole website designed, and by whole, we mean the templates for each type of content (homepage, article page, fan art page, etc.), it was now the moment to transition to the development stage.

   

   
2. Web Development

   The first step of the development phase was to create our blank WordPress canvas by setting up a clean WordPress theme. We then created a lean and clean SCSS architecture as a sound base for the entire website's front-end.

   Taking advantage of modern yet well-supported CSS features, like custom properties, grids, etc., reduces the need for any CSS framework. The CSS parameters for the entire project were set up within a couple of stylesheets.

   Once that was done, it was a matter of creating each page specifics in their own component/page stylesheets. This was a very quick and efficient setup from the ground up.

   While our front-end developers were doing their magic, we had our WordPress developers focusing on more complex back-end features for the website, such as the CMS-powered fleet ships and the like system for the FanArt page.

   

   This approach allowed for fully styled static HTML (static meant content not fed by the CMS) to be presented to the client in a staging environment so they could see progress and give feedback.

   As soon as we had components and pages ready, we shared them with the Scopely team, and we could act on their feedback while we were developing the website. Like this, any possible major refactor asked wouldn’t mean an overly impactful change on the whole.

   This logical process allowed for a very fast-paced development where, basically, our team took about one month from the Design approval to the WordPress theme delivery.

3. Migration of Content

   On top of this, a second development process was occurring, which was migrating the content from the old website into the new one. This meant news articles had to be imported into the new layouts. It was not just a matter of referencing or linking them into legacy templates, they had to become part of the new website.

   Again, working with a fully controlled theme was pivotal to having the best grasp possible in the whole process. We managed to match previous content types and page templates with the ones and automatize the importation. Via CSS, we could also style the old elements into the new design as well as possible.

   
4. Quality Assurance

   Quality Assurance was delivered since day 1, as our team conducted product tests (via physical device testing and Browserstack) in the development stages. But an additional pass was very important to address any occasional issue.

   Marzee and Scopely agreed on an additional Quality Assurance (QA) step by creating a series of acceptance tests and checking how the pages and components behaved in different browsers and screen sizes. More than that, we’ve tested overall accessibility compliance and performance with specific scores.

   The process was simplified in its concept (not meaning it was basic or ordinary), resulting in a streamlined resolution. The QA team would flag an issue, and our team would address it by fixing and testing it before marking it to a new review. Only after the final approval of the STFC QA team, the feature was deemed fixed or approved.

5. SEO and Analytics

   Developing a marketing website for a big game meant following Search Engine Optimization (SEO) best practices and, most importantly, properly setting up Analytics tools so the Scopely team could closely follow up on how the website was performing and adapt and change if needed.

   While we were responsible for hitting accessibility and SEO scores high, our partners at CreativStrategies were responsible for preparing all the copy with relevant keywords for better ranking and managing all Analytics relevant tags and reports.

• By working very closely with the Scopely team, we achieved an optimal web Design for the new website, allowing us to deliver development within a month.
• There was a significant increase in visits and sessions in the following three months compared to the previous website.
• The conversion to the STFC store, or go-to-store action, tripled in the following three months.
• The client has retained us in multiple capacities moving forward. We also built the game's best-performing landing pages with an almost 50% download rate and boosted all on-site metrics, including SEO, load speed, engagement, time on site, and reduced bounce rate.

All of this was the fulfilling piece of feedback we strived for after the delivery of the project. It is not just a happy client, but a happy client with results in hand, showing the hard work was more than an aesthetic revamp but an actual improvement in their results.