Description

CraverNation is a fan portal sponsored by WhiteCastle and managed by Zimmerman Advertising. Users of the site are awarded points for interacting with site content such as voting on challenge entries, uploading their own content, and even sharing on social networks. These points earn real world things like free meals and merchandise.

Introduction

The following website was originally designed and integrated in a CMS engine known as Kentico. As the site grew it was often difficult to make update and expand site features and so I was tasked with recreating the site from scratch to create an immersive desktop and responsive mobile experience. Additional creative as part of the 2.0 reskin was supplied as images and/or PSD’s that I have constructed into a functional webpage. All of the code including HTML, CSS, and Javascript were either rewritten or updated. The site is fully responsive with the same code delivered on desktop and mobile with changes to the layout activated by CSS media queries and JavaScript.

For this project I lead the Front-End development with another member of our team leading the Backend which utilizes .NET MVC 4 and Razor to create a highly robust application capable of scaling to user demands.

WhiteCastle CraverNation

CraverNation consists of several main components that include the user generated content gallery, challenge and slidergram entry, as well as games, and even a party planner.

Users entering the site are greeted with a call to action from none other than Uncle Crave himself. When logging in to the site we use a simple dropdown that includes the option to create an account on CraverNation or log-in using a number of social options.

Using the masonry options in the popular Isotope plugin a grid is constructed of randomized user content with weights placed on pulling in a certain amount of active challenge content. Items can be expanded to see a larger preview image in addition to its full title and description. Options are given to share and/or vote depending on if a user is logged-in and that item is part of an active challenge.

Various challenges are created by the WhiteCastle management and marketing teams and are entered by either uploading a photo or a video. Photos can be selected from Facebook giving mobile platforms a method of uploading content by using Facebook as an intermediary.

When selecting a facebook image a simple browser appears that allows the user to traverse the various albums that are uploaded and select the right photo. Once selected the entry is then given a title and a description by the user and is then submitted for approval by the WhiteCastle management team.

Additional templates and overlays are available for use when a new page needs to be added.

Mobile

The tablet version of the site preserves nearly all of the features of the desktop version. Similarly the mobile phone experience keeps many of the same elements as the desktop counterpart. Additionally the site utilizes separate assets for large header and background images improves the load time on mobile devices.

When going mobile the traditional menu bar is replaced by a dropdown select that allows mobile browsers to use their native controls to increase the accessibility of the page. The sidebar content is dropped and the main body content is allowed to shrink in size to fit the mobile display. Expanded user content is shown in a single column layout to maximize the available screen area.

Challenge entry is nearly the same with most items that were previously shown in multiple columns now stacking to maximize the available screen space. Using fluid width elements allows for a seamless transition between desktop and mobile resolutions and also ensures that when tilting from horizontal to vertical orientations that page content will adjust properly.

Campaigns

Launching the site under a new initiative or campaign is easy with the use of additional styles that can be configured for the given media. This includes the ability to set font colors and include different imagery such as white stars or a blue craver map. The styles are easily activated by adding a single class to the body allowing both the front and backend to control the campaign mode.

All image assets are cut out as transparent PNG when necessary allowing the new background to be seen through the existing imagery eliminating the need to replace all images on the site when running the campaign.

Simple campaign landing pages can be setup with items such as videos from Youtube that will work responsively when going down to mobile platforms. A separate background asset is used on mobile so that more of the background effect is visible and that colors blend properly further down the page due to fixed background positioning issues on mobile.

Party Planner

The Party Planner provides a way for WhiteCastle to promote various items in their store and other initiatives by suggesting various party themes to users who answer 3 questions in a quick survey. The Party Planner types each feature their own unique Slidergram card with store items suggested based on the occasion and the amount of people attending.

Each member of the Craver Council will have their own suggestion for the Party Plan based on the answers to the questions. Some themes show up under multiple occasion and attendee types with others only showing up under specific types such as the Secret Santa Shindig which only appears when Christmas is selected as the occasion.

The results page shows the individual Party Plans with the ability to scroll through other suggestions that appear under the selected occasion and attendees amount. Each plan has it’s own tag-lines and copy text that separate that plan from the other styles creating a uniform layout style that still has enough variation increasing user engagement.

The mobile experience for Party Planner maintains all of the functionality of the desktop version with many items breaking into a vertical approach versus the horizontal approach on desktop. Using designs that focus primarily on the mobile experience generally end up with a much improved experience for both desktop and mobile. Items that were displayed in horizontal tabs are now shown as tabs that are stacked vertically maintaining the same flow between items while still having the same accessibility to content.

Slidergram

Slidergram provides a fun way for users to create personalized greeting cards that can be sent to their friends and family using email, Facebook Share, and also Facebook Message functionality. The sender has the option to ask the recipient to RSVP to the card at which point the sender will be notified of the recipients response.

Users can select from any one of several built in card designs that feature WhiteCastle branding and feature items that one can move around and resize to create their own custom card. Personalized pictures can be uploaded either directly from the computer when on desktop or through Facebook Connect which allows the user to browse their albums and select an image to use on their card. This ensures the experience operates on mobile browsers where device image upload is not always possible.

Using the in browser photo editor the user’s photo and the other moveable items can be manipulated in size and placement within the frame. Once satisfied a back-end process will combine the various layers from the editor and create a single image that can be shared across the various social platforms. A personalized message is also included and will show up on the shares and emails sent out from the last step.

Slidergram on mobile maintains all of the functionality from desktop with the exception of device image upload which at the time of this project was not an option on iOS devices. By providing an alternative means of accessing photos by utilizing Facebook Connect users can still personalize cards and send them to friends and family right from their mobile device. It is even possible to use the image manipulator to resize and position images and other treatments brining a rich experience to mobile.

Legal

All trademarks and artwork of the White Castle website are property and copyright of White Castle and Zimmerman Advertising and may not be reproduced in any way for any reason with all rights reserved.