full scale ux/ui & development
for launch packaging design

Matching digital presence
with offline succes

Launch Packaging Design Limited is an independent structural design specialist providing 3D CAD design services to the packaging and beverage industry. Launch Design bridges the gap between the aesthetic design and styling services offered by most creative design agencies, and the principally technical approach adopted by many manufacturers.

With over 25 years of experience and award winning bottle designs to companies like Coca-Cola, Kraken Rum and Highland Spring they are a fast growing company within their field.

CLIENT LAUNCH Packaging Design ltd.
YEAR 2016
Services UI/UX Design, Iconography & Development
Approach

Since several large scale projects were nearing completion at Launch Design they expected a significant increase in traffic over the next months and wanted to make sure their online brand and especially their site was in line with their ambitions.

The experienced bottle designers wanted a well-thought through design, so The Special Something conducted a complete UX research to design a very strong user experience that would increase conversions. The full project consisted of three phases.

PHASE 01

UX RESEarch

To be able to create the best user experience possible for the new site we collected and analyzed visitors data from the site of the past one-and-a-half year.

PHASE 02

UI DESIGN

Once the wireframes were created the online brand was brought to life in the site's design by creating brand new iconography and photography as well as other UI elements.

PHASE 03

DEVELOPMENT

Reaching the final stage of this project meant developing the approved visuals into a fully-responsive website. The site was built using HTML, CSS, PHP and Javascript.

Creating a solid basis

PHASE 01 / UX Research

After conducting a analysis of the competitors collecting the site's data of the past one-and-a-half year and comparing it to the Launch team's expectations a significant mismatch was quickly discovered. A large amount of referral spam was driving traffic to the old site of Launch Packaging Design, but without the team noticing the traffic to be spam they were preparing to focus on the US, Brazilian and Chinese market and have the new site available in those local languages. Roughly 39% of all traffic to the site was referral spam from these three nations. Since not a single visitor from the referral sites spent more than three seconds on the site we felt confident enough to leave out additional languages and block the referring sites completely by commanding so in the .htaccess file on the new site.

As there was a distorted image of the typical visitor to the old site - due to the referral spam - and to get a better understanding and an easier way to bench mark wireframes and concept designs we created two personas. The typical visitor based on analytics data, combined with the input of the Launch team allowed us to bring Eliza and Turk to life.

Looking further into the new user experience of the new site we found out that most users to the old site were unsure about how to initiate a follow-up on their interest. We therefore, implemented clear call-to-actions across the site, but especially at the bottom of every page.

Despite only 5% of all visitors had been coming from mobile devices we did see the need for a fully responsive site. Even if it would be for the team itself as the team of Launch often had to explain their services by the hand of their site. If this were to happen 'on the go' they would greatly benefit from a responsive site. This combined with the fact that the amount of mobile internet users has exceeded the number of desktop users in the past years was enough of a foundation for us to follow through with a fully responsive site.

All the collected data allowed us to come up with a new information architecture and start the creation of wireframes of the site.

Key takeouts

Referral spam

The analytics data told us that there was a large amount of referral spam coming from nations such as Brazil, the United States and China (as shown in the above map).

Call-to-Actions

Across the site the current site there has been a continues lack of call-to-actions. The visitors are not encouraged to take any further steps.

Responsiveness

The old site was not fully responsive and not optimised for phones and tablets. This was a high priority as a fair amount of traffic came through mobile devices.

Bringing it to life

PHASE 02 / Ui design

After receiving approval on the wireframes we moved into the next phase of the project; designing the full site and its user interface. The colour scheme from the initial logo was used across the site. However, when looking at the typography we moved away from the logo's initial Trade Gothic font and combined the san-serif Montserrat (h1, h3 headers and paragraph text) and PT Serif (h2 headers and quotes). This font pair was received so positively by the client that they wanted the Montserrat font to replace the Trade Gothic in their logo.

As there was a distorted image of the typical visitor to the old site - due to the referral spam - and to get a better understanding and an easier way to bench mark wireframes and concept designs we created two personas. The typical visitor based on analytics data, combined with the input of the Launch team allowed us to bring Eliza and Turk to life.

Looking further into the new user experience of the new site we found out that most users to the old site were unsure about how to initiate a follow-up on their interest. We therefore, implemented clear call-to-actions across the site, but especially at the bottom of every page.

Despite only 5% of all visitors had been coming from mobile devices we did see the need for a fully responsive site. Even if it would be for the team itself as the team of Launch often had to explain their services by the hand of their site. If this were to happen 'on the go' they would greatly benefit from a responsive site. This combined with the fact that the amount of mobile internet users has exceeded the number of desktop users in the past years was enough of a foundation for us to follow through with a fully responsive site.

All the collected data allowed us to come up with a new information architecture and start the creation of wireframes of the site.

view brand board

Iconography

making the final touches

PHASE 03 / Development

Turning the design into code seemed a challenge at first, but ended up to be smooth sailing. Since the client did not require a CMS we decided to use code the site using HTML/CSS and Javascript.

We used Zurb's Foundation with Gulp (Sass and Browsersync) to achieve flawless responsiveness throughout the site. Introducing Javascript physics turned out to be a bit of a challenge, but did allow us to add an extra dimension to the overall experience of the site.

I love the way the site is looking (…) We are really happy with the way that the site has come together and thank The Special Something for all the work and inspiration that has been put into it.
David Wheelwright (director)

WANT TO SEE MORE?

Select one of the case studies below or go back to our latest & greatest

Tailored Money

Brand Identity - UI Design - Development

Footfall

digital print Design

Let's Make Your Digital Presence Awesome!

Don't be a stranger