Railinc Strategic Website Consulting

Project Date: 
Monday, February 4, 2019
Case Study Intro: 

Cary, North Carolina-based IT company Railinc approached DesignHammer in 2019 for strategic consulting ahead of the redesign project they had planned for their aging corporate website. Railinc’s communications team was aware that their existing website provided a large amount of valuable content, but also knew that this content was hard for visitors to locate; particularly due to the site’s confusing information architecture. The sales team did not view the Railinc website as a business development tool due to it only generating a handful of leads per month, and the marketing team had no way of knowing what content was actually being accessed by their target audiences and existing customers.

Rather than go on “gut instinct” or attempt to update their ineffective website themselves, Railinc sought out DesignHammer to conduct a comprehensive assessment of the current website, reporting on quantitative and qualitative information, metrics, audience behavior, and other data in order to formulate recommendations for the new website.

Services Provided: 
Team Member: 
Stephen Pashby
Service: 
Consulting
Search Engine Optimization (SEO)
Google Analytics
Project Planning
Content Analysis
Team Member: 
Hunter Deschepper
Service: 
Consulting
Google Analytics
Marketing
Project Planning
Content Analysis
Call to action text: 
Learn more about our comprehensive website assessment process
Awards: 
Looking For Design & Development Help? We Would Love To Hear From You.
Project Body: 

Client Description

A reputable marketing agency with limited available development resources approached DesignHammer for additional assistance with a 4-week turnaround, white-label project for their Fortune 500 client. The agency sought to build a multi-screen video presentation to be set up as a promotional installation at a major industry trade show. The installation would provide users with a self-guided tour of the client’s product through a variety of case studies.

The Challenge

The case study content was to be presented as a series of 4k animations, displayed on massive 72-inch touch screens, with the ability to function without an active internet connection. The installation required a UI for navigating through the various chapters and pages, seamless playback of the various intros, loops, and outros for each video segment, an accessibility mode, and handling for idle timeouts when a user moves away from a screen. Lastly, the solution had to include a flexible mechanism for content updating after initial deployment, as the client was rapidly modifying their content right up to the day of the event.

The Solution

An initial discovery and planning process revealed that a strictly browser-based implementation would not work due to the size of the multi-GB videos in question and inconsistent internet access. DesignHammer elected to instead create a desktop application using a combination of Vue.js and Electron; as their open-source, cross-platform nature is cost-effective and enables fast turn-around times with multiple developers working on the project simultaneously.

A custom HTML5 video player capable of seamless playback of 4K looping video content was ultimately constructed. An entirely custom UI layer, designed to match a set of premade storyboards and animations, was also built on top of the video playback. Swipe and multi-finger tap gestures were enabled for the custom elements, as well as an accessibility feature that accommodated positional access (standing/sitting) to the navigation controls. A follow-up project resulted in the ability to set different target physical display sizes, allowing for the presentation of the same video content on much smaller displays, whilst showing the custom UI at a relatively larger size.

Result

The experience was delivered on time and on budget, all while supporting a number of last-minute content changes. The application provided an easy set-up process for event administrators and a stable experience for the whole event; several additional instances of the experience have since been shipped at other trade-shows and events around the world.

Services

Looking For Design & Development Help? We Would Love To Hear From You.
Project Body: 

Client Description

A reputable marketing agency with limited available development resources approached DesignHammer for additional assistance with a 2-week turnaround, white-label project for their Fortune 500 client. The concept was a highly interactive quiz-style experience to be displayed at a conference kiosk, challenging attendees to answer five questions correctly. The installation was to ultimately serve as a marketing tool, with the content and messaging around the questions and scoring methodology specifically designed to highlight the value of the client’s product.

The Challenge

The quiz experience needed to run all day on a set of large 4k touch panels on a conference show floor without internet connectivity. Storyboards with layout mockups were provided by the client, but they did not include any specific guidance for animations or transitions between scenes. Sound effects needed to be added, which included a looping music bed that was intended to play while users interacted with the quiz. UX was the top priority for the quiz kiosk. How the user felt about their time with the quiz would directly correlate with how they felt about the product offering. This meant that every aspect of the presentation had to feel seamless and the developers had to ensure that the animations ran smoothly in 4K.

The Solution

The application was broken out into a number of screens each handled by a full-page Vue component. The screens corresponded with each particular scene provided by the client’s storyboards. The development structure was designed to allow for multiple people to work on the application without interfering with one another. The architecture of the quiz system was set up to allow all aspects of the visual display to be adjusted independently. This made it easy to refine the parameters over the course of the project in response to user testing.

Approximately 30 hand-tuned animations were created to enhance the [experiential] impact of every single visual element within the quiz. By optimizing the elements for the Electron browser’s rendering engine, the final experience ran smoothly and maintained a crisp frame-rate during multi-element fullscreen transitions. A seamless looping music player was built similar to the video kiosk and smooth volume fading was added.

Result

The quiz was delivered on time and on budget, all within the proposed 2-week turnaround time. The agency was appreciative of the professional judgment and the creative initiative we took to construct various aspects of the animation and design.

Also, despite initial objections to running the experience in a standard web browser, a successful initial deployment motivated the client to begin presenting the quiz online for more users to experience.

While not initially built for the web, the successful initial deployment motivated the client to request a version that could be deployed on their own marketing site. We were able to update the existing codebase to support generating a browser-based version of the quiz. Our decision to use the Vue.js and Electron build tools made this process fairly straightforward.

Services

Looking For Design & Development Help? We Would Love To Hear From You.
Awards: 
Project Body: 

The Challenge

Freudenberg IT's promise to simplify IT through smart reduction of complexity was not reflected in their original website design. The menu structure was complicated and difficult to navigate. It felt outdated and lacked a mobile-friendly user experience. FIT also needed a partner to help with internationalization / localization, search engine optimization, and featured video deployment.

The Solution

The new website is now mobile-friendly, easy to navigate, and has a visually improved, modern web design. DesignHammer set up the website to work in four different languages through WordPress with Polylang, along with a robust search functionality.

Services

Services filter: 
Looking For Design & Development Help? We Would Love To Hear From You.