blu e-cigarettes website redesign

To make blu more competible in its markets, they were looking for a brand and website relaunch to improve conversion and engagement.

Go directly to:

Concept
Design
Extras
01_blu_Title2

Blu E-cigarettes website redesign

To make blu more competible in its markets, they were looking for a brand and website relaunch to improve conversion and engagement.

Easy as blu.

The feeling  of relaxation and satisfaction.

Produced by Fontem Ventures and owned by Imperial Brands, blu is an electronic cigarette brand that sells various types of rechargeable and disposable e-cigarettes. To maximize the moments that matter along blus consumer journey to more effectively drive consideration, increased lifetime value and referral, they had to deliver an exceptional consumer experience that would correspond with the feeling of ease when using blu.

During this complete design overhaul the two work streams – Brand positioning & redesign + website relaunch were happening at the same time. Therefor all teams had to work hand in hand and discuss each step along the way. For the website relaunch a thorough discovery including team and market interviews, UX Audit, Tech/SEO Audit and competitor analysis were undertaken. To determine users needs, user testings were conducted which led to more in depth target group definition as well as a thourough user journey.

Client

blu e-cigarettes
BBDO/Proximityww

Role

UX & UI Designer

Deliverables

Website, User Journey, Digital Design Guidelines

Timeline

Approx. 10 months including brand relaunch

Limitations and pain points.

The project challenges we faced.

Following a kick-off meeting the top 3 goals for the new website were captured. When I jumped into the project a lot of research within the discovery phase was already done. The team had a look into target groups, did a market scan as well as a review of the current website. The approach to the redesign was to break the website down into 8 main templates with several components to create every single page of the website.

Segment problems

Selling e-cigarettes comes with a lot of restrictions concerning the products and the marketing, which vary from country to country. One big restriction forbids to call vaping a better or healthier alternative in any way. Besides that the general e-cigarette segment had a lot of negative press, which we also had to overcome with blu.

Converting more customers

One of the main target groups of blu are traditional smokers who are considering trying out vaping. Marketing restrictions forbid to call vaping a better or healthier alternative in any way. Due to this and other barriers of the target group, we had to come up with different ways to convince smokers to try out blu.

Conveying the feeling of ease

Since across all audiences, the most important emotional reasons for vaping are relaxation and satisfaction, the brand blu, their products and their website had to convey the feeling of ‘ease’. Therefor a seamless user experience as well as the websites look and feel had to portray the tagline 'easy as blu'.

Contentful limitations

Due to limited time and ressources, we were faced with a lot of design limitations within the backend software that was used for blu. This made it hard to overcome ux and usability flaws of existing components. Which is why we had to rank the flaws as quick wins and backlog items.

Two work streams

We've had two seperate work streams at the same time, that could influence each others outcome. Due to this we had to find a way to work together closely and to help the brand team to understand the limitations that come with webdesigns as well as the projects limitations.

From product centric to user centric.

To ensure blus users are always in the center of everything we do, we approached digital designs with a user centered design approach. The process was later also introduced to blus team as a standard to work with for designing digital products. This iterative approach of designing and testing helped us design better experiences that are user-centric and consistent. This kind of process was also a useful way to find problems and growth opportunities to further evolve the user experience with blu.

Examine the status quo.

Audits

Outlining the testing framework.

User Journey: Understanding the consumer

To be able to create a user journey that isn’t just based on assumptions, we planned to prepare and conduct user interviews. For this we created a testing framework, which not only helped the client to understand the importance of user interviews but also helped us to define what needs to be tested.

From assumptions to hypotheses

To be able to use our findings for the user testing and the following redesign, we translated our assumptions into  measurable hypotheses. For that we used the following approach and slightly changed the wording: We believe that […] For […] Will […]. Later on we used those hypotheses to build our interview questionnaire and to create actionable and measurable tasks for the redesign.

Screener Questions

To make sure we recruit the right test users and get qualitative data, we defined the kind of test persons we wanted to interview.

  • 5 users who are smokers interested in vaping
  • 5 users who are vapers or dualists but not blu consumers
  • 10 users who are blu consumers and have purchased online (scenario 2 only)

With that as our base we created screener questions to filter the right test users for each testing segment.

User testing

With the testing framework we already defined the kind of tests we wanted to execute. We splitted the Testing into two parts. The first part was a behavioral research to observe the user as they go through one of our pre-defined scenarios. The second part consisted of live conversation interviews with individual users to uncover motivations, goals and expectations when visiting the website. To execute the planned tests, we came up with different sets of questionnaires matching the scenarios, different test users and our hypotheses.

User Jorney

Based on all the insights we gathered through our research and testings we created a user journey. The journey was used to define the contents and connections we had to incorporate into the website design.

The new look of blu.

With all the existing components we first created the structure of each page without any new design elements. This gave us the chance to agree with the client on different parts of the website. Then we started the actual design phase. The website had to be aligned with the new rebrand and the stakeholder expectations, while we had to keep in mind the existing restrictions by contentful.

BVI Extension

While we reached the design phase the visual identity relaunch was still in progress. We noticed early in the process that some of the planned elements like colors were unsuitable for designing the website, due to lack of contrast etc. Therefor we worked together with the brand team to find a solution to translate the visual components into usable digital components, without loosing the intended identity.

Photoshoot guidelines

By showing blu and the agency’s internal brand team, images and videos that could convey the feeling of ease as well as the moments that matter in the consumer journey, they learned what kind of content had to be produced. Besides that we supported the brand team with photoshoot guidelines to get good shots that can easily be used on the website.

Discover the world of blu.

In our research we learned a few things that we included in the homepage:

1. New users need an easy start into vaping and/or the brand. Therefor we included special deals and promotions as a hero image.
2. The most visited pages for existing users were placed with images and links below the hero image.
3. To overcome the user confusion which device works best for them, we connected the devices to everyday situations for users to get an idea of which device fits their lifestyle.

Creating moments with blu.

To convert more users, expeciall those that haven’t tried vaping, we used situational imagery connected to the flavors blu offered. This also helped vapers that were new to blu, to understand which flavor they might like. 

Is blu for me? (PLP)

For the device landing page we wanted to address certain user pain points such as confusion about how the device works and what differentiates blu from other devices. Therefor we explained the device’s benefits and created an animation that displays the ease of using blu.
Outcome

The first steps to creating a strategy for future designs.

Besides the brand and website redesign, we created multiple roadmaps and guidelines for different purposes, to help keep the new identity and quality consistent throughout different channels.

Increased Investments

While doing the research and creating the designs, we collected our findings, refined our approach and process and assembled digital design guidelines. We included insights about the target audience, design principles, user journey, usability and ux principles, seo guidance and the user centered design approach and how to use it.

Increase in sales?

Since WhiteGrey only designed 8 Templates to fit all pages, a spreadsheet was created to give the client a guideline of all pages, their matching templates as well as their mandatory and optional components. This makes it easier to keep a consistent look and feel throughout similiar pages and contents.