Shipping a Great Idea
Imagine you’re a company with an incredible new product. You’ve been perfecting your idea, growing your business and marketing. Now people are placing orders, and you need to send your products around the world—thousands a day to dozens of countries.
But how? You can’t spend all your time at the post office. Setting up and operating your own warehouse is out of the question. What can you do?
E-commerce platforms, like Shopify and eBay make it easy for anyone to sell online. But once you’ve made a sale, how do you get your product to your customers?
Making shipwire.com
A New Way To Ship
Shipwire wanted to solve the problem of logistics and shipping for an ecommerce world. It created a way to make it easy for growing companies to ship products anywhere around the world. As a seller, you can use the Shipwire system to connect your ecommerce platform directly to Shipwire warehouses. You don’t have to maintain an expensive warehouse, or pick, pack and ship products yourself.
Send your inventory to Shipwire, hook its system into your shopping cart software, and when your customers place orders, Shipwire automatically finds the closest location and cheapest carrier, then ships your product to the customer. Shipwire even takes care of returns.
The company opened the first Shipwire warehouse in Chicago in 2007, and soon added more: Toronto, Vancouver, Los Angeles, Philadelphia, The United Kingdom and Hong Kong.
Summing up Shipwire
- Shipwire connects to your online cart and receives order information
- They determine the best warehouse to ship the order from
- The customer receives their order faster and for less money
The Language of Logistics
Shipwire made it easier and less expensive to go global. But it’s a complex business that can be difficult to explain. The Shipwire team was excited about its logistics, but the logistics didn’t tell a story. Companies needed to better understand what the company was offering or how it could help. They also needed to know the company would handle products with the same care and attention they would if they were to ship it themselves.
Our core team consisted of experienced designers, information architects, developers and a project manager, with Geoff Teehan at the helm. Our first task was understanding the problem:
- How do we make the complexities of logistics easy to understand?
- How can we inject personality into a logistics brand?
- How can we demonstrate Shipwire’s reliability and care?
The Deep Dive
Working with a shipping logistics company was new terrain for us. With Shipwire, we needed to understand the ins and outs of the logistics business, to a high degree of detail. Before we even thought about sketching an idea or pushing a pixel, we dove into the deep end of Shipwire’s day-to-day activities:
Team Shipwire To Do List
- Interview employees extensively at Shipwire in Palo Alto.
- Set up Shipwire accounts using phony businesses.
- Talk to customers and prospects about current experience.
- Discuss. (At length.)
Talking To The Right People
We gathered tons of insights from the insanely knowledgeable executive team. We also realized that Shipwire’s customer care reps are incredibly in touch with how prospects and customers perceive and use Shipwire. They were able to help us understand what was currently working and what needed help.
“Customer care reps helped us understand what was and wasn’t working.”
Defining Design Principles
Our team consolidated the notes from our interviews, phone calls and discussions, and used this material to create personas. We then drafted 4 design principles to help us prioritize requirements, establish a conceptual framework and make tradeoffs.
Make your story provocative and succinct. Use a compelling narrative to walk the user through the experience.
Clearly articulate why a merchant should trust you, and back it up both quantitatively and qualitatively.
Show you care about each individual company and are committed to helping businesses succeed.
Let your passion for your product shine through..
Stepping Up Our Game
Until recently, our process was shaped like a waterfall. That is, our teams would wait for one part of the process to finish before starting the next. We would never architect anything until we had a full list of requirements. We wouldn’t design screens without the IA, and we most certainly wouldn’t have built anything without polished PSDs. We’ve learned, thankfully. Now we often build out rough prototypes after a quick, initial round of sketching.
We started working on IA and design simultaneously
The idea: Moodboards would enable us to create design concepts without having to rely on wireframes. The elements would be slightly more abstract and lack some context, but they would still communicate useful design ideas.
The Reality: We thought this approach would enable us to work faster and smarter. We were wrong.
Falling Short
We were proud of our moodboards and the guys at Shipwire loved them. After some feedback, we melded the moodboards into a single design concept based on the now approved architecture. What came out the other end (see below) was frankly, not great. The approach was stale, flat and lacked all the things we had agreed it needed to be. It also didn't have much in terms of personality. We knew we needed to pause and take a fresh look.
Our Turning Point:
A New Approach
The moodboards didn’t do us any favours. What we needed to deliver instead was a concept based on an identity, not just an aesthetic. We spent the next week working on a new high-level concept that would ultimately become the foundation for the entire company.
The answer, as it turns out, was staring us in the face the entire time.
the beginning of a new identity
It’s more than a box
Rewriting the Language of Logistics
As part of our new approach we also wanted to rework the existing tagline: Store, Ship, Sell. We needed this aspect of the identity to fall in line with the new direction. It needed to make customers aware that you didn’t need to be a Fortune 500 company to act like one: Enterprise Logistics for Everyone
The Making of a Shipping Manifesto
Everyone that works at Shipwire really does have a passion for logistics. That might make them a bit crazy, but conveying their passion instills trust. We needed to create a simple model that Shipwire could rally around as a company and communicate to everyone. We looked at companies like Rackspace for ideas and noted its Fanatical Support®, which we liked, because it’s an actionable promise representing more than mere words. Shipwire already had well established values, we just needed to give them a way to present them. We called this The Shipwire Manifesto.
The Development of Better Customer Tools
We were gaining momentum, so we decided to divide and conquer. As some members of the team continued to refine and polish the brand, others were hard at work simplifying Shipwire’s pricing calculator. Not only was the pricing model complex and evolving, but we also saw this as the perfect opportunity to help potential customers understand how the Shipwire service works. We needed to completely redesign the calculator, so that it was simple, educational and easy to use.
The Design of a Visual Language
Throughout the design and build process of Shipwire.com, we constantly defined and refined the company’s visual language. We needed to ensure it was consistent, but more so, we wanted to ensure the Shipwire team had what it needed to make its own basic updates after the project wrapped.
The Delivery of the Final Product
View the final site to see what fulfillment shipping services are all about, then find out what we learned below.
What We Learned
Working with clients is a lot like dating.
Geoff Teehan, Partner
You usually figure it out in the first few minutes. In this case, our first date was a bit expensive, but entirely worth it. Shipwire is located in Palo Alto, and we’re in Toronto. We don’t like to date over the phone (it’s far too difficult to understand chemistry on a call), so we made the trip to make sure we got along, and spending months working together made sense. Aside from obvious things like aligned religious and political views (just kidding), we always look to see how involved the most senior staffers are. Shipwire is a very tight team, it was amazing to meet and work with its CEO, who is incredibly passionate about his company, industry and our project (as was Shipwire’s entire team).
Web fonts are not created equally.
Matt Hodgins, Designer
This site was designed when web type was just becoming available. We hadn’t done much commercially with it, and we definitely learned a few things. Namely, type rendered differently from application to application and from browser to browser, and often appeared far more bloated in build than it did in Photoshop. At one point late in this project, we realized that the italics looked so bad in one of the browsers that we need to change the font. Today, thankfully, we have the tools to help understand how type will render before making any final font decisions. Many web font services, like Typekit, have good preview mechanisms that show actual screenshots so you can get a good sense of how the type will render. Nothing beats a quick prototype, but these screenshots are the next best thing.
HTML5 animation has room to grow.
Chris Erwin, Developer
The animations on the site were both challenging and fun. We used the timeline in Adobe Edge Animate when it was still in beta, which meant we had to collaborate closely together and experiment to get it all just right. It was pretty early days for this stuff and it couldn’t do what we wanted it to on its own. Eventually we needed to hack some JavaScript to work with Edge behind the scenes to get the background colours to look the way we wanted. It’s come a long way since then, but it still has weaknesses when trying to get complex animations and interactions to be responsive.
Passionate clients breed great work.
Geoff Teehan, Partner
Our main point of contact was Shipwire’s head of product. People in this position need to be deeply involved in projects like this. Making sure we had plenty of access to him helped keep the project going and helped ensure our success. We were a needy group due to the complexity of the business, and we built up trust because we knew it was okay to say we didn’t understand something. In the end, he respected us for asking questions and our relationship flourished. This collaborative attitude needs to be at the core of any project.