case study

2018

AURUM LARP

ROLE

Web/Mobile

UI/UX Design

E-Commerce

Webflow Development

A new wind for an old world.

Aurum is a fantasy themed live action role-playing game that started in 2017.  The team had spent a lot of time developing an engaging storyline and an abundance of content for their the players but with a new season approaching in 2018, it was time for a refresh. I was brought in to completely re-design their site and develop a new blog and e-commerce experience. 

From the start, it was apparent that the site felt too dense and there were some critical pieces of information that seemed hidden from their users. My goal was to present their story in a current and concise way but stay true to the brand they’ve already started building.

MBP Mockup

Re-telling the story.

To create a flow and establish some clarity we had to re-prioritize the content Aurum already had.  Equally important was designing a layout that would continue to guide their players through the site and eventually into the registration phase. The aim was to minimize any confusion and questions but to not overwhelm. By removing the clutter, starting with the main hero, the site’s pages now show their purpose.

2017

iphone mockupContact FormProduct Page

2018

Typography

Alegreya

Regular, Medium, Bold

Regular Italic, Medium Italic, Bold Italic

Main body text.

Dynamic with various weights.
Provides a vintage but not dated feel.
Legible on screen.

Colors

Fantasy World

Industrial

Vintage

While selecting the typography and colors to base the rest of my content on, I tried to combine the elements so they appeared vintage and antique, yet provided a darker tone to the project .

#402D04
(64,45,4)

#5D583E
(93,88,62)

#F6EDCF
(246,237,207)

#EFE9DA
(239,233,218)

#FAF7F0
(250,247,240)

Web Design

Before the ideation phase, I created a flowchart to help group all relevant information together.  In the original site the various forms they needed were scattered throughout, game and site details were hidden and visually there just wasn’t anything there to pull you forward. By mapping out a new flow and using it as a reference, it made laying out the navigation and then the structure for the pages themselves easierer.

UX

Smoke
Aurum Home Page Original

HOME

H

Welcome
to the
Community

The home page now consists of a brief intro to Aurum’s story and a section calling attention to upcoming event dates. Previously, this was put in a sidebar and not linked from anywhere else on the site.  Various images were edited in to supplement the tone of the page and set a precedent for the following pages.

New Aurum Home Page
Old Aurum Info Page

Getting  Started

GS

New
Here?

This page was able to compress a lot of vital information into one space and acts as a visually appealing FAQ location that can address most players questions, new and experienced.

An inner nav was added in the hero to help users quickly get to their intended section. Rulebooks can now easily be downloaded and various pages are linked within each section to move the startup process along.

Everything has been clearly defined and labeled with the layout providing easy scanability. Subtle animations were added so the page wouldn’t appear as static – it is heavily text based and covers many topics so can quickly get dull.

Original Aurum Forms

FORMS

F

Participating
In the Action

Aurum puts in effort to be inclusive and mindful of everyone’s individual quirks, needs, and restrictions.  They also have a developing storyline that the players actively get to curate. To attain this information they previously had several forms linked through their other pages or as part of a dropdown under ‘Contact Us’. This is not only confusing but a negative experience on both ends if the user can’t provide the information that is needed from the game creators.  

Currently, all forms have been consolidated to one page and can be reached through the main navigation.

CODE OF 
CONDUCT

The Code of Conduct page uses images that carry the same tone as the text and to break up the page into comfortable sections. In the sidebars, Aurum’s core values are highlighted and a subtle parallax effect was used to add depth to the page.  Similarly with the rest of the site, I tried to keep the page light and not have it feel overwhelming.

T

New Tools,
Who This?

The site was developed and hosted through Webflow and utilized their CMS to tackle the Store and Blog. By learning how to use Webflow I was able to take full control of the process and not have to delegate time for a handoff. Minor changes and tweaks were done on the fly and it allowed me to design right in the browser.

Through the CMS, their team can now add items for purchase, customize registrations, develop storylines and posts, better inform users of events and continue to build an open and flourishing community. While Webflow handles all forms submissions, Foxycart was brought in to handle the online orders, which also includes processing of event registrations.

The site is now fully responsive and can be updated easily, down to the email templates the team receives in form submissions.

Photoshop
Photoshop Icon
Sketch
Sketch Icon
Webflow
Webflow Icon
Foxycart
Old Aurum StoreAurum Store

CMS

New Aurum Store

The blog is updated with all current events plus in depth cards for characters and storylines. Their team has the ability to feature certain articles and bring focus with full bleed imagery. They can edit right in their browser, stylize their posts and publish as needed with their customized CMS layout.

The online store facilitates the registration process for users by clearly laying out all options up front and behaves as a normal checkout via FoxyCart. Miscellaneous items are added to the grid and they also populate as recommended options on each product page. With an increase in revenue and showings at events, the Aurum team is well on their way to excel in the LARPing community.

New Aurum BlogSteampunk Dog

LAUNCH
PROJECT