Highlights
-
Increased qualified leads from 6/day to 12/day.
-
12% bounce rate, compared to 22% on old site.
-
40% sign up form conversion rate, up 5% compared to old site.
Highlights
-
Increased qualified leads from 6/day to 12/day.
-
12% bounce rate, compared to 22% on old site.
-
40% sign up form conversion rate, up 5% compared to old site.
Website Lift and Redesign
When I started at the gritty, high energy startup Ship.Cars, I immediately saw that there was a huge opportunity to modernize its online presence and bring in new customers. When I began there was only a single, outdated landing page that the company had outgrown. The site did not align with the company’s vision to be a leader in the car hauling industry.
As the supporting and then lead designer it was at times a challenge to align key stakeholders. The pace of work was fast and often ad hoc, meaning that I was working with a shifting constellation of teams and strategic goals, and often few resources. I overcame these challenges to rollout an overhauled website that increased qualified leads, decreased bounces, and increased engagement. In recognition of my achievement in rolling out a product the entire company could be proud of, I was promoted to lead designer.
Defining the Problem
Persona Workshops
Our personas were already well on their way when I arrived on the team. A series of workshops held with the CEO, key sales reps, CTO, and support team defined our key personas.
Competitive Analysis
Our product team evaluated sites in both the car hauling and b2b startup space. We evaluated design trends, sales funnels, and did a graphics audit. We used these examples to create a mood board and advance the design direction.
User Interviews + Contextual Inquiry
One of our challenges was sporadic interview access to key user personas. We were able to conduct interviews with drivers, carriers, dispatchers, and brokers. These activities also included contextual inquiry. We wanted to get a sense for the broader workflow context. Limited access and selection bias raised concerns that our sample was not representative of the industry as a whole.
One of the biggest lessons learned of this project was veering away from the foundation of our personas in favor of appeasing stakeholders. Using our personas would have provided a more stable and compelling base for our approach and prevented some of the pitfalls.
One of the biggest lessons learned of this project was veering away from the foundation of our personas in favor of appeasing stakeholders. Using our personas would have provided a more stable and compelling base for our approach and prevented some of the pitfalls.
Goals
Driving Business Initiatives
The key purpose of the site was to drive two key initiatives. Generate leads on the broker side of the business and increase awareness among carriers through:
- Engagement/Awareness among non users.
- Retain/extending current users.
- Engaging customers at all points in the sales funnel.
- Facilitating key sales activities.
Initial Concepts
Nailing Down Information Architecture
The initial concepts were both product and use case focused. Each product page cross linked to a relevant use case, and each use case page linked to relevant product pages.
From there, we fleshed out some lo-fi concepts. To drive iteration, our product team took a diverge and coverage approach. Each designer generated layout concepts and navigation schemes.
Design Approach
As site wires progressed to mid fidelities we had to decide upon a design approach. Initially, this phase to be handed off to a design agency, but, they were nixed at the 11th hour. Even so, we pushed ahead and determined that we had 3 options:
Illustrative: Persona Based
Photographic: Persona Based
Abstract 3d
While this option was intriguing and trendy, ultimately the fear was the imagery would not connect with our target audience.
Design Iteration
Creating Assets on a Tight Timeline
We landed on a persona based Illustrative approach. The team made this decision because it gave more control over branding and narrative. Unfortunately, one of the other key drivers related to timeline and resource constraints.
This is where we began drifting away from personas and towards convenient, internal choices. A temperature check with our core audience and stakeholders would have saved some headaches.
Instant Demos
Product Video Content
One of the key catalysts for our lead generation funnel was our instant demo concept. Site visitors could view a high level summary of our applications in exchange for submitting their email. This ensured that top of the funnel user engagement would align with lead generation initiatives. This would allow us to target these visitors based on their product interest going forward.
I storyboarded these demos in collaboration with each product’s respective PO. In the end we had 4 high level demos. In addition to providing engaging site content, these videos instantly became valuable collateral for our sales team to send to prospective customers.
Pump The Brakes
The Road Gets Bumpy
Starting From Scratch
I would like to say that at this point the project was coming into focus. The reality was that a series of constraints and subsequent decisions had caused the team to drift from our initial approach. Due to losing our design agency we had to split our UX department between product centric work and the site.
A lack of alignment caused wasted efforts and duplicated work. Our PO being in Bulgaria presented challenges related to stakeholder engagement. We had limited dev resources and the chosen CMS presented a lot of problems.
Morale was low and there was a growing feeling of the project being dead in water. Our CEO had to step in and reorg the team. At this point, this changed from supporting to lead UX and design.
A Renewed Approach
Information Architecture
Our new PO injected a sense of energy into the project with a lean MVP. The project again began to build momentum. While disheartening we knew the mistakes that had been made up to this point.
Back to the Personas
The feedback we had gotten was that the site was too product focused both in content and structure. This necessitated a re-haul of the site information architecture. I gathered the sales/marketing team, CEO, and PO for a card sorting exercise. We landed on a persona based solution that spoke to our 6 key customer segments: Owner Operators, Carrier Companies, Small Brokers, Large Brokers, Dealers and Auctions.
Defining Sales Funnel Engagement
In collaboration with the sales lead, marketing lead, and CEO the team established key sales flows within our funnel. We interviewed our sales team to support our current processes. We then looked to extend engagement at each of the critical stages in our customer journey. We identified key conversions at each stage we wanted to drive. Please Note: the stages listed below are generalized. In reality we defined activities per stage for each key market segment.
-
Pre & Post Awareness:
Blog, Viewing Product Videos, Testimonials, Newsletter signup, Request Demo. -
Pre & Post Sales Demo:
Product Page/Use Case, Testimonials, Product Videos, Request Demo/Contact. -
Pre & Post Contract:
Knowledge Base, Support, Sales -
Pre & Post Adoption:
Knowledge Base, Support, Sales, In App Learning/Up-Sells
A Fresh Design Take
We knew that pursuing a photographic persona based approach would be the only path forward. Internal appetite for use of stock imagery was low. So, the team had to throw together a photoshoot on short notice. In collaboration with our PO, I defined a set of shots. We put together a mood board to ensure we properly briefed our photographers.
This shoot was miraculously pulled off over the course of 2 days. Our PO arranged a car hauler, driver, location, and 2 photographers. We went from having 0 useable assets to 500+. Things felt like they were turning a corner…
Icon Set
We were able to engage in collaboration with an outside design agency that produced a custom icon set. These icons were used on our product pages to communication top product benefits. These icons served as branding bridge from our persona based approached and iconography present in our products.
Option 1
Pushing the Design and Having Fun
The team presented key stakeholder’s with two alternatives for homepage look/feel. The first took more design risks than the other. Both included loading animations to give life and bring fidelity to the prototype.
The site header featured asymmetrical organic framing. The shape created a swoop that mimicked the trajectory of the company: up, up, and away!
Replacing the static hero graphic was a looped video treatment. Clickable icons replaced with traditional carousels in the top feature section.
Option 2: The Winner
Sales Funnel Focused
This option took a more traditional approach with static imagery and traditional layout. Vector half tones supplemented images to give the site a dynamic, action orientation. The modules just below the header focused on segmenting personas based on unique solutions. Persona tailored problem statements informed the positioning of our solution suite.
To this point stakeholder demos had suffered from the static nature of the pages. So, I utilized key trends in loading animations and interaction design for the demo. This helped frame the more conservative design in a contemporary light.
This solution was enthusiastically chosen. The design direction was preferred, and built upon the bones of key sales processes.
Final Designs and Dev Handoff
Defining Specs and Component Behavior
With the design finally approved I incorporated final stakeholder feedback. The component behavior was spec’d and laid out in Zeplin for our developers. I recorded all key interactions and animations. All motion timed and spec’d to ensure seamless developer execution.
Final Designs
Our modular approach allowed us to flexibly and quickly build pages. The new photo assets of actual car carriers, brokers, and shippers helped to root our message.
Highlights
-
1,643 total conversions/form submissions (Approx 550/mo) in first 3 months of launch. Up 10% compared to old site.
-
Increased qualified leads from 6/day to 12/day.
-
12% bounce rate.
-
40% sign up form conversion rate up 5% compared to old site.
-
65% avg. video completion rate on product videos.
The Launch
This project was a challenge for a variety of reasons. We were resource and time constrained. We drifted from our initial user first focus in favor of a product focused inside out approach. The project suffered from scope creep and lack of stakeholder alignment. The internal team experienced turnover, burn-out, and at times suffered from low trust.
That is why nothing felt better than overcoming all those obstacles and launching the site. I found that even the most challenging projects can get to the light at the end of the tunnel. I learned a lot about gritty determination and leadership from key team members. I also understand that launch doesn’t mean your work is done. However, it represented a major hurdle for our team and for myself.
Highlights
-
1,643 total conversions/form submissions (Approx 550/mo) in first 3 months of launch. Up 10% compared to old site.
-
Increased qualified leads from 6/day to 12/day.
-
12% bounce rate.
-
40% sign up form conversion rate up 5% compared to old site.
-
65% avg. video completion rate on product videos.
Check out some other projects
Location Sharing
Ship.Cars Driver App
A location sharing feature for the Ship.Cars mobile app. Built to help car hauling drivers give dispatchers the location data they need when they need it.
See Process »
Configurable Inspections
Ship.Cars Driver App
Industry leading feature that included a redesign to the Ship.Cars Driver app’s inspection flow and requirements. Carriers where asking for it and we gave it to them.
See Process »