Rough Magic

My Role
  • Front-end Development
  • UI Design
  • UX Design
Launch Date

19th January 2018

Problem Statement

Rough Magic is a theatre production company based in Dublin’s city centre. Their guiding principle is that they are part of a world culture celebrating Irish identity diverse in nature and outward-looking in its vision.

Working for Fusio, I performed all roles on the project from research, wireframes, high definition UI designs to front-end development and theme building in WordPress.

Through several meetings and workshops with the client I identified the key components to improve on and create for the new website.

Designing the Site Map and Wireframe

Rough Magic’s previous website navigation was confusing and content was difficult to find. There wasn’t an obvious hierarchy so the first thing I did was plan out the site structure and hierarchy of the new website.

Rough Magic wanted their users to be able to go all the way back to productions from the 1980s so I devised a hierarchy for their productions that would be sorted into blocks of 5 years.

Rough Magic's previous website's landing page

Rough Magic site structure

Homepage wireframe

Lighten Up - Re-designing with the new branding

The previous website was very dark – it adopted a pitch black background that tended to swamp the images and text content.

The client specifically mentioned in their brief that the “new site’s design should be bright and fresh and avoid the heavy use of black that is on the current site”.

For my initial designs I decided to amp up the bright colours and used their new brand identity manual as a guide for the colour scheme.

Sample from Rough Magic's rebrand - designed by Aad design studio

However, these initial designs weren’t exactly what the client was looking for – they felt it didn’t really feel like the Rough Magic brand and it went too far in the direction of trying not to be dark.

I went back to the drawing board, and in an unusual step I decided to not use their new brand guidelines – I adopted the colour scheme of a brochure they’d supplied at a previous meeting, merging it with a few choice colours from their new branding. The resulting second round of designs were greeted much more warmly by the client and adopted for the final designs bar a couple more iterations.

The Production Archive

The Production Archive and individual archive postings are the most important feature of the Rough Magic website. I decided that it had to feature prominently on the home page, have an archive page that was easily accessible to the user, and convey each piece of information successfully on the individual production posts.

Rough Magic's Core Pillars

Rough Magic has four core pillars as their guiding philosophy and what they aspire to. Originally, they sent this piece of information innocuously as background material to help me understand their company. This caught my eye and I was compelled to push for its inclusion in the design, specifically on the home page. It made me connect with the Rough Magic brand and I thought it would be a focal point for people new to the brand as well.

Core Pillars wireframe

Core Pillars - first design

Core Pillars final design with background image

Rough Magic on mobile

Rough Magic is fully mobile and tablet responsive, built on the Bootstrap 4 framework.