Sven Uilhoorn

Interaction- and Game Designer based in Groningen, the Netherlands
Back to homepage Logo of the Card Race Series forum card game, showing 5 of the game's cards with 'Card Race Series' in text in front of them.

Cosy Racing Community

Website and forum for my international sim racing community. The final product is a highly customised MyBB forum. This is the home of respectful, low-preparation, friendly but still competitive racing.

The forum is designed based on surveys on behaviour. It's replacing our old forum (2009-2015) with many improvements, while suitable and consistent branding create a thrustworthy image.

Roles and Responsibilities

I did all the work on this project;

  • surveys regarding experience of previous forum
  • wireframes and branding of proposed new forum/website
  • building the custom theme for MyBB
  • set up all the functionality and documentation for admins
  • polish after feedback from users

Final Product

Homepage of a forum, with primary and secondary navigation, forum board categories and forum board below them.

Final homepage. The top of the page handles the most crucial tasks/goals of users, like checking sign-ups for the latest races, private messages, new member introductions and requesting a membership.

Screenshot of a page within a forum board. It shows the thread list, the number of replies to each thread, views and when and who made the last post, as well as some editing options for administrators.

Page within a forum board showing the thread list. Removed unnecessary stuff from the templates to provide a less cluttered screen.

A screenshot of a forum post with a quick reply box below.

Quick reply box at the bottom of a post, as well as how posts are displayed.

A screenshot of fully editing a post or reply, with a text editor, emoticons, checkboxes for administrators and thread subscription. At the bottom there's the option to add attachments and post, preview or save as draft.

Full post edit mode. Visually very different from MyBB's default.

The highlights page showing both liveries of race cars and stills from videos in a three block wide grid.

Highlights page showing the winning liveries of livery contests as well as the compilations of highlight videos of series.

Three screenshots of the mobile version showing different parts of the website.

An overview of the smartphone lay-out, also thoroughly customized to match the functional and aesthetic requirements.

Process and Methods

The old forum had numerous issues and was becoming harder to update without issues. We also wanted to get rid of the old "ETCC" brand that didn't cover our vision and the kind of car classes we raced.

Since it was quite hard to get sessions where I could sit next to our actual members and observe them and comparing to competing websites could be quite difficult since it would usually require them to sign up, I based most of my design on two online surveys regarding members' current experience.

Screenshot of a typeform survey showing a question about the foremost goal of visiting the old site. Answers consist of signing up for races, checking results and standings, reading comments on races and other.

First question of survey. The survey was set up to qualitatively assess the previous forum as well as mapping wild ideas and edge cases. With 18 responses from about 25-30 active members, a pretty solid base to build from.

A wireframe, vertically divided into segments like navigation, forum board number 1, forum board number 2, admin board number 1, admin board number 2, etc.

Per page I made a wireframe like this with a few focus points as goals for the visual design and functionality. Based on these I started comparing various forum software packages, both from a user and admin view.

Three different style guides that only differ in color next to each other. One is black and orange, the other black and gold and the last blue and gold.

Style guide in three different colors, based on our core values and the corresponding color matches from color theory. From top to bottom: the main navigation, front page blocks, forum board layout, membership request page, topic example and (simple) quick reply box.

Screenshot of the homepage showing big but low pictures of a car, which is used to represent a racing series, with horizontal navigation below, and a link to sign up for the next upcoming event in the series.

Early home page blocks, dropped in favor of the forum page (quicker access to nearly everything) and the introduction of the highlights page, showing the best race car liveries from the community and highlight videos.

Screenshot showing three smartphone layouts side by side. Left, the homepage with forum boards. Middle, a sign-up form to request memberships. Right, a sample of posts with an image of a point score table of race season results.

Early work on the mobile theme; forum home page, membership request form (dropped because not functioning well) and posts within topics with the appreciation system.

Toughest Challenge

The toughest challenge was quite likely choosing the right forum software. In the end it was a choice based on a very active community, a free forum package and some very specific requirements on the admin side and custom pages being supported without the need for an additional CMS.

The templates for MyBB weren't very user friendly to use and there's little documentation available. It was not necessary difficult, just a lot of work to go through templates and find the actual line of code that needed changes.

What I'd do Differently

Although there are (quite) some goals I didn't achieve, I'm not sure other forum packages would've made for an overall better final product. It was a pretty ambitious project and the response from old and new members has been very positive.

Tools Used

  • Trello: checklist and project planning
  • Illustrator: wireframes, branding and style guides
  • Typeform: member experience surveys
  • MyBB: forum software, I've customised the templates and theme to closely match the style guides

Back to homepage

More Projects Like This

Gibu Bestratingen
Website for paving company showing projects and expertise
Student Housing and Insurance Company
Websites for student housing and financial services