The Making of the New Simability Website

Establishing a mood

The first step was to determine the qualities of the Simability brand. That exploration lead to the mission, vision, and values on the new About page.

Next, I made a mood board to connect the brand to a visual feeling. Here is the result.

Let’s go through it image-by-image:

• The close-up of the Rings for Thrustmaster shows the quality of our products. They take a lot of hard work, and we want that to be visible (although the site focuses more on text than images).
• The “Flat and fast” image is a screenshot of the Fanatec website. I like how the presentation feels modern and clean while having a motorsport edge to it.
• The classic car represents our love of vintage motorsport. It inspired our first logo (made by Greg Carr). I chose the Exo 2 font for the new logo to try to continue that approach. But it is less decorative, making it easier to read and also fit for headings.
• Carbon fiber (in addition to making a great background) is the primary material used in the Standard Paddles for Thrustmaster.
• In racing, the green flag means one thing: go! Symbolically, it represents the chance we aim to give people who couldn’t otherwise play racing sims with a wheel.
• The last image represents helping the community and the joy we hope to bring to you.

Next, the style tile allowed me to convert the mood into actual design elements: colors and fonts. I also made the new logo and tagline at this stage.

Choosing a WordPress theme

One of the most exciting changes for the new site is the move to the WordPress platform. It is far more flexible than the previous system. However, choosing a theme wasn’t easy.

I selected the following search filters:

• Accessibility Ready
• Custom Background
  • For the carbon fiber 
• Custom Colors
• Custom Logo
• Featured Images
• Footer Widgets
• Full Width Template
• Wide Blocks
  • To give images and multi-column layouts (like the About page) extra space (They stretch further out than the text, except on mobile.)

That didn’t leave many options. I first tried NanoSpace, but it doesn’t actually have wide blocks (at least not without using a page builder). I then switched to Reykjavik and have been happy with it.

Since our audience is international, I then added “RTL Language Support” and “Translation Ready” to my list of filters. Luckily I didn’t have to change the theme.

Taking notes

I then took a look at the previous website to see what worked well and what needed improvement. The process helped shape my goals for the new site.

I found three primary areas for improvement:

• The previous site did not support assistive technologies well. (I know, how ironic?)
• Product pages were difficult to use. Information about features and benefits was mixed in with technical details that aren’t relevant to everyone.
  • The new product details use subheadings for easy scanning. Tech specs are now listed in separate tables.
• We know, the FAQs were really in need of an update!

Setting goals

I want the new site to serve two purposes. First and foremost, it must be easy for users to find the right Simability products for them. A major focus was to make it easier to tell which wheels and systems (PCs/consoles) each product is compatible with.

But Simability has always been more than a place to buy hand controls. The support of the sim-racing community is what keeps Dad doing what he loves. Two new features should give you new opportunities to show and share your support:

• The blog you’re reading right now
• The Simability Racing League page

Mapping it out

It was then time to make the sitemap.

The new organization of the site is focused on categorization. Products are now grouped based on the type of driving controls (paddles/rings). Support resources are all in one place.

Home sweet home

I like the previous social media header image (made by Michele Vaglini), so I decided to use its background as the background for the homepage’s headline and introduction. The page’s text is made up of these parts (in order):

1. Headline
2. Introduction
3. Product categories overview

• Customers sometimes wonder which Simability product is best for them. I feel it is important to clearly explain the differences between the three main product categories. They each have their advantages.

4. System compatibility statement

• On the previous website, it wasn’t immediately obvious which products (if any) work on consoles.
• Therefore, I am now using an icon to represent console compatibility for relevant products.
• Any console-compatible product will work with all the systems that the wheel supports (including PCs).
• Any products that are not console-compatible will only work on PC games that support using multiple controllers at once.

5. Call-to-action to check out the Simability Racing League
6. Recent posts and a call-to-action to check out the blog

Graphical presentation

In general, the site focuses more on text than images, but the new homepage is an exception. The images create extra space between the short sections.(For the time being, we’ve decided to use separator lines instead until we get better images.) This makes it easy to scan the information that first-time visitors need to know.

I have avoided using call-to-action buttons to promote buying products. As you might know from our About page, Simability does not exist for the money. We believe that if people are truly interested in our hand controls, they will buy them, no big buttons needed. These buttons are useful to promote the blog and league, though, since we want to closely involve you.

On that note, we’d love to know what you think about our new website. Have any feedback? Feel free to comment below.