Character.com

A radical redesign that increased conversions and smashed targets

Character.com sells officially licenced, high quality and great value character based clothing. From Peter Pan to Peter Parker, from Bambi to Batman and everything in-between, it’s the go to place for clothes that brighten up your day.

We partnered with them to redesign the site, improve user experience and migrate over to Shopify Plus.

Old Website
The old site undersold the slick operation of the company and the vibrancy of the products. It lacked focus and wasn’t mobile friendly.

The proof of the pudding...

The results achieved with the redesign have been pretty phenomenal—way beyond what we anticipated. Revenue generated from the site is up 300% from the previous year. Of course there's natural growth and promotions within that, but with a conversion rate increase of 60% on mobile, much of the success can be put down to the new site. The company has already returned its initial investment, and now has a fantastic platform for growth. Here's how we did it...

Stats

Getting started

Our design process started with a workshop and an analytics review to determine the audiences, their buying habits, product choices and visitor flows.

The key goal was to make the smoothest shopping experience possible for both visitors landing on product pages from Google, and return visitors arriving on the homepage. We needed to provide both with a straightforward journey, whilst maximising cross selling opportunities via product discovery and recommendations.

Planning Photos V2

Prototyping

Our first job was to create and map out user journeys of example customers. Using the insights gained from our analytics review and data from the client we produced a number of user journeys—formed around gender, age, product preferences, buying habits, site usage and use of technology.

To help us test early layout and structure concepts we sketched rough wireframes, mapping out each of the user the journeys to ensure we considered the key audiences.

As our sketches progressed we started to add fidelity by creating slightly more refined wireframes. To enable us to test both desktop and mobile experiences we used Invision—a great tool that allows testers to click (or tap) through static prototypes.

Using Invision was also a great way for us to share ideas quickly with the client without the need for meetings.

Wireframing

Style guides

With the overall structure and layout agreed based on our wireframes and prototypes we moved onto the visual design of the site.

Utilising a recently developed brand identity we started to create a visual language. Rather than creating finished visuals for each page we took a modular approach, designing individual elements to establish the use of colour, typography and graphic style.

Component Pages New Image

Our designers and developers worked together to test concepts in code, allowing us to quickly iterate on the design and see how things looked on a range of devices.

From a front-end development perspective we used an approach known as Atomic Design which complimented the modular design concept. The principal of Atomic Design is to build elements in small parts that combine to become more complete components.

Working like this gave us the chance to really collaborate with the Character.com team, in a cycle of design → test → iterate.

Atomic Design

Working directly with the client in this way allowed us to follow an agile development process—designing components, then developing them based on feedback. 

Button Hover 2

Stripping things back

French writer Antoine de Saint-Exupery said "Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away".

This was very much the case with Character.com. A criticism of the old site was that the products almost took a back seat to the design. With the redesign we wanted the site to act as a showcase for the products, by removing anything deemed unnecessary.

Stripping Back Website Content
The design is purposely minimal, allowing visitors to focus on the products

Creating delight

Working with such a fun and quirky brand it was vital we didn't lose the personality in search of the most optimal commercial design. We agonised over the details, adding subtle, fun interactions whenever we felt it would add to the experience. The little details that push a shopping experience from mundane to gratifying.

Star Wars2

The metrics we measured are far ahead of what we expected and have made a huge difference, not just to the website but to our bottom line.

Picking a platform

The old site was running on an old, clunky integration of Magento on an expensive server stack to cope with the increasing number of customers. A new, modern platform was needed, so it was decided to migrate to Shopify Plus.

'Plus' is Shopify's premium plan reserved for large sites with lots of traffic. The sophisticated administration area, powerful product management and super reliable hosting made it the perfect choice.

Spiderman Mockup2

Designing in the browser

Our team worked together throughout the design and development phases of the project. This helped the dev team quickly take initial sketches and wireframes into code, allowing us to test user flows. We were able to prototype and review our work in-browser with each other and with the client.

This was better than working with static visuals because we could see it working in the real world, on real devices. It was much quicker to tweak and iterate on designs in code, than to keep updating design files. This sped up development time, while allowing for flexibility with the design.

Peppa Pig Mockup2

Development

Shopify makes developing the backend of an e-commerce site pretty straightforward, although it does have some quirks and limitations. Our first challenge was to setup a build system that worked with Shopify's tools and our own internal boilerplate. The team created a boilerplate Shopify theme project which integrates our CSS framework and build tools with Shopify's theme development toolkit. We also needed to develop some custom features which aren't available from Shopify out of the box including a custom product filtering system, to make finding that perfect pair of pj's much easier.

Migrating the data

Importing all of Character's product data was a major challenge due to their custom Magento setup. Although there are tools and services to manage these sort of migrations, none of them were able to export the information without major compromises. We developed our own custom export tool to migrate their thousands of products into Shopify. By creating this ourselves, we were able to wrangle the data exactly how we wanted, enabling us to create collections and tags as part of the export. This also meant a lot less admin and data entry for the client team.

Shopify wrote a case study about this area of the project, have a read.

Character Home2

"It was a pleasure working with a company who fully deliver on their promises. From design to implementation, Bluegg took the reigns and really delivered a project we are more than happy with. The metrics we measured are far ahead of what we expected and have made a huge difference, not just to the website but to our bottom line."

— Stephen Hewitt, Managing Director

To see the site in action, or just to buy some awesome pyjamas head to character.com. If you run an e-commerce business and want to take it to the next level with Shopify, get in touch.

Want new case studies sent straight to your inbox?