Menu

New Age Transportation

Light brand and full responsive website re-design

Diving in to Trane’s goals for this application involved a full day UX workshop. Through various activities including empathy maps, feature prioritization, and dot voting we were able to condense most of their phase 1 requests in to a digestible application for both UX and development.

After digesting the findings, we began working on the overall interaction strategy for the app based on their core users. It was vital that we convince Trane that who they were building the app for weren't the people they were currently speaking with. After a few brief meetings we were able to get on the phone with the people who the app was actually going to be for.

Through those interviews we began to re-prioritize the core features and content being featured on the site. With some brief, simple wireframes and further visual prototyping through Invision App, we began collaborating with the Trane team to land on a finished product.

“The people who are going to use the app are actually the field technicians who will be installing or repairing Trane equipment.”

Services Provided
Agency

The Nerdery

Role

User Experience Design & Visual Design

Team

UX Team Lead : Mary Oakland
UX / Visual Design: Brant Day

# of months spent on the project

3

From kickoff to final file delivery to development.

# of user interviews given

6

We tried to get as broad a spread as possible and used the client to gather individuals.

# of revisions to the designs

3

There wasn't too many rounds of revisions as we sorted out technology constraints first.

Brand Enhancements

New Age Transportation didn’t have much as far as branding goes so adding new elements was an important part of building out their story. We were advised not to touch the logo and because of that we knew that the site still needed to pay tribute to the elegant script and that anything too trendy would make the two clash.

Old New Age Site

Visual Strategy Board

As part of the visual discovery process we began crafting style tile/moodboard combinations from inspiration that we and the client had been collecting. We modified some of our user research techniques to grab brand and marketing insights as well and allowed those to help dictate the direction we focused on.

Brand Elements

As part of the website re-design we needed to establish some new brand standards for the company that would help modernize their message and presence.

Sitemap

A large part of New Age Transportation’s need was arranging their content in a way that told their story and highlighted their strengths at the same time. New Age wasn’t just about shipping items from A to B, they wanted a relationship with the people they worked with.

The sitemap was an exercise in positioning content in meaningful ways. It was half content strategy and half UxD.

New Age stands out because we go above and beyond what other third parties do. We call our customers and sing to them on their birthdays. We have book clubs and we occasionally have an infant working in the office. New mothers are allowed to bring their baby to work for three months. We also get up to dance the Cupid Shuffle at random moments throughout the day.

Internal brand survey respondant

Wireframes

The entire site was wireframes out with a large emphasis being placed on content and story. Due to the small budget and timeframe we were staying away from over-the-top features and transitions and keep the site lean but modern.

Halfway through the process the client put a lot of pressure on the team to provide an “interactive experience” which may or may not include animation and voice over on each page. As part of the solution to show them our vision for the site we began to include animation annotations as well as animated psd gifs.

A large part of New Age Transportation’s need was arranging their content in a way that told their story and highlighted their strengths at the same time. New Age wasn’t just about shipping items from A to B, they wanted a relationship with the people they worked with.

Motion Prototypes

The client came to use near the end of the project saying that they wanted more “pizazz.” In our attempts to re-direct their passion from animated voice-overs on each screen we compromised with some animated transitions.

Pages & Details

Mobile Screen

The mobile version of the site removed some of the hover states and brought them to the forefront of the site.

Need more magic?