October 18, 2019

Growing our brand with a website upgrade

By
Merve Guneyhan
,
Junior UI Designer

Do you believe in the power of a great first impression? We do.

For most businesses today, the first impression they make with a potential user or customer takes place on their website. As Upgrade Pack expands internationally, the design team were conscious that our existing website was failing to project the brand we’ve been developing since our initial launch just over a year ago, leading us to embark upon a comprehensive website redesign. 

The redesign journey has been exciting, instructive and – to be honest – fun for me. Upgradepack.com was nine months old when we started the project, which may sound young, but a lot can happen in nine months in a fast-growing company so it’s essential for us to continually develop our design style with regular releases.

Business requirements

Before thinking about any design elements for our new site, we first had to focus upon the company needs, both collectively and across our internal teams.

The Upgrade Pack website is an essential asset for our Commercial team as they develop our global relationships. They are the public face of our company, and having an up-to-date company website that clearly explains our value is essential in their drive to develop these partnerships and establish client relationships.

The Marketing team manages our external engagement in terms of PR, Social Media marketing campaigns, and they need our digital home to be the latest iteration of the brand. We also wanted to support our Group CEO and Group COO with a new, impressive-looking website to support their business development and their ongoing speaking and event participation around the world.

Beyond the specific needs of each team in the company, an outdated website that fails to communicate the huge strides we’ve made as a company in just nine months is a disservice to our brand and value. And with our platform being such an innovative, market-first product, it’s essential we convey our innovative technology and the value we can bring to customers and partners in a succinct, interesting and engaging way.


How did we start?

To create a style that lasted, we brought our business needs, recent design trends, and our interpretations of potential design treatments together to comprehensive starting point.

Following our kick-off meeting, we defined a structure by having a full list of every design element to consider including design tokens, such as typography, our colour palette, component spacing, call to action (CTA) styles, image treatment and new design patterns to enrich our brand identity. 

Design Changes

Let me walk you through some of the user interface (UI) changes you'll see on the new website and why they were made.

Firstly, we took advantage of having a foot in the travel industry, and showed alluring landscapes across the globe; when it comes to travel, there is nothing more beautiful and inspiring than nature. Treating our images with a gradient mask provides a classy feeling and allows the design to really breathe. 

In previous iterations of the website, we’ve kept app demonstrations to a minimum, but are now in a position to showcase the (almost) full user flow, enabling visitors to feel more familiar with the app and concept as a whole.

It's important to tell the story behind a product but, at the same time, people are curious about the user experience. The new website includes a lot of product shots and a simple user flow as a slider, allowing every visitor to see the stages of the user journey and become well informed about the Upgrade Pack app experience.


This website redesign project presented us with an excellent opportunity to rethink our brand identity and find some ways to enrich it, working to enhance our brand whilst maintaining our distinct personality.

For example, we have introduced a series of guilloche patterns.These will be familiar to travellers, with passports typically using a form of guilloche as page patterns (a fact for you -guilloche is a security feature which makes it impossible to copy a passport). We used it at the top of all our main pages which you can see from different angles.

Another new brand mark is our confetti flourish, formed of different sized Upgrade Pack triangles and colours from our broad palette. With this introduction, we wanted to instil a feeling of dynamic and branded achievement. 

And finally, our font combinations. We’ve always had a serif font in our stack, but have neglected using it until we felt the opportunity was right. With our brand adopting the classic looking guilloche pattern, we decided to take another look at the font’s possible implementation. After extensive experimentation, we found a lockup that worked for us ­– using our serif font (Playfair Display) as a transparent highlight to our regular large headings, set in the brand front Berthold Akzidenz Grotesque. The transparency gives us the subtlety that we need whilst allowing the beautiful serif shapes to shine.


Teamwork, challenges, and looking forward

The success of our website redesign mainly came down to our collaboration as a team. From our VP of Product and Group CEO to Marketing and PR, everyone pulled together for this project. Combining our collective expertise allowed us to make high-quality decisions together to accomplish our goal. 

The biggest challenge? With an iterative approach, the design-time will always be time boxed, but we aimed to build a living website; not a ‘release and forget’ project. In the coming months, we will be layering on features that we reserved for future releases and extending the brand further. And our journey as a business will shape the Upgrade Pack website, as it should do. 

As a sneak peek into our plans, we're aiming to introduce more animation, iconography, and maybe even some custom illustration. Of course, we'll keep it clean, easy to read, well balanced, and always up to date to give our visitors the best experience possible

Design
News
Team