pl / en

BehanceFacebookLinkedin
180905_Amerigas-slider

AmeriGas i FLAGA – strona www – narzędzie do pozyskiwania leadów dla 7 europejskich rynków.

AmeriGas and FLAGA – a web page – a tool for getting leads for 7 European markets.

Brief, który otrzymaliśmy mówił o stronie internetowej. Wskutek wspólnych prac powstała strona dla 7 europejskich rynków, która jest jednocześnie kluczowym narzędziem na ścieżce pozyskiwania klientów. Za skuteczność jej działania odpowiada wysoki technologicznie poziom wdrożenia, opracowana w oparciu o badania potrzeb komunikacja marki i modułowa budowa pozwalająca dostosować stronę do różnorodnych potrzeb – w 7 krajach, w zmieniających się okolicznościach rynkowych.

 The scope:

  • Back-end development
  • Front-end development
  • Survey of needs (IDI)
  • Desk Research
  • Design managment
  • Analysis of technology on the market
  • UI/UX design


The Team:

  • Michał Kozik
  • Marek Kozik
  • Anna Kącka
  • Martyna Bargiel
  • Magdalena Betlińska
  • Patryk Dorosz
  • Karol
  • Mariola Banaś
  • Jakub B

One of the key challenges was to meet the needs of 7 European markets.

Grupa UGI, która jest właścicielem marki AmeriGas w Polsce i marki FLAGA w Austrii, Szwajcarii, Czechach, Słowacji, Węgrzech i Rumunii wyznaczyła centralę w Polsce do koorydnacji działań związanych z transferem technologicznym, w którym strony www były najistotniejszym elementem. Zebranie potrzeb, koordynacja działań z osobami odpowiedzialnymi za strony w;nbsp;poszczególnych krajach, z zewnętrznymi dostawcami usług – od SEO do narzędzi do obsługi leadów, w kilku językach – było wyzwaniem tego projektu. Kluczowy był balans pomiędzy zbieraniem potrzeb i wsłuchiwaniem się w głosy różnych krajów, a efektywnym zarządzaniem projektem i nadawaniem kierunku zmianom, jakie wiązały się z wprowadzeniem nowszej technologii. Proces ten i współpraca kontynuowana jest po dziś dzień.

Bez nazwy-1_Obszar roboczy 1

Design challenge

How to sell gas – a product which hardly differs at all between the suppliers?

The main challenge of the project was concerned with the basic need of the Client – to sell gas. It was essential to understand how a web page can impact the customers’ decision process; what they pay attention to while choosing their supplier; which technology should be used; how to prolong the life of the product so that the web page doesn’t have to be re-designed for as long as possible; how to prepare for the unpredictable change in market conditions – these are just some of the questions that we had to ask ourselves working together with the Client in the project process and that needed to be answered.

Project process

Proces_projektowy1

Research and analysis

We started from Desk Research, i.e. research based on the analysis of various available source materials such as: the Client’s materials (earlier research, internal data), web pages of other gas suppliers. We conducted in-depth interviews with users of gas tanks and cylinders. This is how we were able to identify the Client’s real needs and objectives.

Ideation

We developed personas that represented groups of AmeriGas web page users which we identified. We chose 3 benchmarks as standards for the new web page. We analysed the information and determined the insights which became the strategic assumptions for the project.

Proces_projektowy2
Proces_projektowy3

Design and implementation

Zaproponowaliśmy nową strategię komunikacji opartą na odkrytych, kluczowych dla odbiorców wartościach – Wygody i Oszczędności. Zaprojektowaliśmy nową architekturę strony i layout, a następnie rozwinęliśmy projekt graficzny, dopasowując go do istniejącej identyfikacji wizualnej marki. Ostatni etap stanowiło wdrożenie responsywnej strony www.

Researched areas

Prior to commencing any design works, we conducted desk research and then interviews with gas users – both those using gas cylinders and gas tanks.

badane_obszary

Understanding the needs

Why does somebody chose this gas supplier rather than another? What added value can a brand offer for the customer to choose their product and to be happy with it? Getting to the core of the needs and picking out the key factors for choosing a gas supplier was one of the main challenges we were faced with. Without going into details, due to the sensitive nature of the conclusions, here are some key statements from gas users.

zrozumienie_potrzeb_lewazrozumienie_potrzeb_prawa

Personas

In order to segment the needs and to build the architecture for communication, we developed three personas, which helped us to order our assumptions and subsequently confront them with our models of Clients.

Persona1
wywiady@2x
Persona3

Conclusions – values identified in communication

Finding the right message – something that sets the Client apart from the competition (Convenience + Economy), simplifying the narration, while at the same time addressing all the Customers’ needs and possible concerns (Safety, Process, Handling), so that they can be sure what they can expect not only from the product. Treating the supply of gas as a wide service – these are the key conclusions that both the Client and us could build upon.

wnioski

Low-fidelity wireframes

At the beginning stage of designing, in order to present more efficiently the conclusions from project work that we formed, we developed low-fidelity wireframes. Based on them we were able to discuss structuring of information, assumptions as to the interface, narration on the web page.

190401_makiety4
Amerigas_wersje_mniejsze

Style

The style of a web page is a tool for achieving a goal. Knowing who we are talking to and using what kind of language, how we tell the story of the product, the service and the brand – we suggested two different stylistic approaches. A bolder one – based more on current trends as well as one which was slightly more toned down which could prove more timeless. Both of these approaches evolved until they reached the point when the Client was able to make a decision which version is a strategically better choice.

180102_amerigas_behance

Components

The web page of AmeriGas and FLAGA consists of a few modules. It may be built like from blocks which gives it a huge potential for further development and ensures ease of management.

Glowna
kafelki1kafelki2kafelki3

A video about the NANO cylinder

One of the latest AmeriGas products is the NANO cylinder. Trying to present how technologically advanced this product is, we created a section devoted solely to the NANO cylinder. The animation was created by Maggot studio from Poznań. As it turned out, the software used for interaction and ensuring responsiveness were yet another challenge – the result may be viewed in the video below.

Dedicated icons

Dopełnieniem języka wizualnego strony było zaprojektowanie dedykowanego zestawu ikon, którymi komunikujemy poszczególne sekcje i elementy na stronie.

blyskawiczne dostawystala_cena2najwyzsza jakosc propanulicznik
ochrona_silnikawygodny_uchwytserwis_technicznyinstalacja_zbiornika
maksymalne_wykorzystanielzejsza_butlawygodazalatwiamy formalnosci

Implementation stages

The first market where we implemented the web page was Poland.

Removing the teething problems of a product such as a web page requires constant communication with the Client and their involvement. Next, a page with a different style version was introduced in Czechia and Slovakia. Subsequently, implementations in the remaining markets were done or are being done.

etapy_wdrozenia

FLAGA

FLAGA is AmeriGas’s twin brand, present on 6 European markets.

The task consisted in using the web page we developed and giving it the style consistent with the visual ID of FLAGA. Using the same components, photos, icons and graphics we created a library of elements that the users of FLAGA web page will identify with its image. Even until today, what remains a large portion of the task is coordination of work between, in fact, 7 European countries – Austria, Switzerland, Hungary, Romania, Czechia and Slovakia – and most importantly – Poland.

Flaga_glowna
flaga_03

Performance

According to Google Page Insights the performance of the web page is  99 % both for the desktop and for mobile versions.

wydajnosc

References

„The grupa KMK team showed involvement and reliability in their approach and performance of the project, they showed involvement suggesting a non-standard approach focused on our business goals. I have a very high opinion of our relations and overall management of the project. Due to the above we highly recommend cooperation with grupa KMK.”

Paweł Dzięgielewski, Kierownik ds. Marketingu AmeriGas Polska Sp. z.o.o.

Chcesz dowiedzieć się jak doświadczenia z tego projektu możemy zastosować w Twojej firmie? Napisz do nas!