Project Background

 MDRgry   is an international board game production and distribution company, located in Europe. They operate in Germany, Poland, Romania, and Spain. MDRgry wanted to introduce their latest game "Marriage Games", a party game for adult couples, to the American market, hence the need for a new website.

My Role

I was hired to design and build a website for the US version of "Marriage Games".

I was also responsible for extensive UX research with potential American customers. I thoroughly analyzed the game’s compatibility with US cultural norms.

Process

Ideate

Design

Build

Step 1: Ideate

Based on delivered content and artwork, I created a few versions of wireframes for the "Marriage Games" website. I had to decide which photos to present to the American customers – and which images needed to be eliminated due to cultural differences.

Using pen and paper I drew low-fidelity wireframes to kickstart marketing conversation with the company. We met via Skype and discussed my ideas, especially the choice of images and product description suited for American audience.

Step 2: Design

At this stage, I knew how the website should look like and which images were approved by the marketing department as suitable for the American audience. Since all the requirements were locked, I skipped designing in Sketch or Photoshop and started coding the website directly in HTML / CSS.

During coding the website in the Bootstrap 4 framework, I realized I needed additional mobile-friendly image sizes - so I produced them using Photoshop. I had to provide smaller resolution files, but also fix aspect ratios so that the website would not awkwardly jump when switching from desktop to mobile version.

Step 3: Build

I coded the website using a simple (but powerful) text editor called TextMate on macOS.

I used the generic Bootstrap v4 framework – but I had to add some customizations as well. This process required editing SCSS files and recompiling final CSS stylesheets.

• I made the following Bootstrap v4 customizations:
• transparent navbar
• font color and size
• button color and style that matches the rest of the website
• image responsiveness using custom ".d-none .d-md-block .d-lg-none" visibility options (instead of the standard img-fluid class)

The Final Product: