Cashless Culture
This project was created for IG to increase the quality and quantity of traffic on their website. The company provides online spread betting and stockbroking.
Client: IG
Services: User experience, User Interface, Data Visualisation, Outreach and SEO
My Role on the Project: UX and UI Designer
about
The campaign displays data of contactless payment and cashless living in Europe, Germany, France, Switzerland. But despite the scepticism, digital trends are transforming, and it shows a significant increase in cards, contactless and online transaction.
the mission
This campaign will help increase the traffic on the company’s website from various search engine with the help of the Outreach team.
process
Campaign Brief -> Research -> Moodboards -> Wireframes -> Design -> Build -> Test -> Live
design concept
Having to display a large amount of data and trying to give the user a better experience, I have opted for card-based visualisation through the entire campaign. Card-based visualisation helps the information to be more digestible, and data remains responsive on different screen sizes. I have used more creative data visualisation and differ from section to section. Also, for a nice touch, I kept the company's (IG) brand red.
Landing Page
On a quick look, the user is welcomed with a brief description of the campaign, client and campaign logo, sharing icons, language button and two main sections. The reason I opted for two buttons on the landing page, is because of the heavy data on this project. Dividing the campaign into two main sections keeps the number of clicks to a minimum by making it easier to navigate.
The data has been researched and created only for France, German and Swiss market, hence the only three languages options.
Companies - France
By default, after choosing Countries the first page opens on France, displaying Lydia and SlimPay being the highest on the market. The fact that I have chosen card-based design made the transition from mobile to the desktop more responsive.
Companies - Germany
This section shows the highest investors in Germany in different tree sectors. When I have a large amount of data to visualise and want to create something eye-pleasing and great data experience, there are a lot of factors that I had to take into consideration before designing.
The data has to be easily responsive from mobile to desktop and in between sizes, to fit and be comprehensive at the same time on the limited space on mobile, true representativeness of numbers and choose the right type of visualisation to present the data.
Navigation Menu
To make the user journey easier between main areas, I created a traditional sliding menu with links to the main sections and a close button. On the desktop, if the user prefers to explore the second part of the campaign (Payments), it can be accessed from the burger icon situated on the navigation menu or by selecting the campaign logo which will take the user back on the landing page.
Payments - Europe
On the second part of the campaign, Europe is shown by default. Here, it is shown the number of check transactions in Europe between 2013 and 2017. The user can select a transaction method to see how transactions have evolved throughout the years in Europe.
The best way to display the data through the yeas in this section was to use a bar graph.
Payments - Europe
On this section, shows the percentage and the transaction of checks have been used in France over the years.
Mobile Wireframes
Landing Page
Company - France
UX Annotations
LANDING PAGE
1. Links
Dropdown button to select between the languages Italian, Swiss, German and French.
2. Link
Two main sections Companies and Payments opted to have them on mobile for better and quicker navigation.
COMPANY - FRANCE
1. Navigation Bar
Easy navigation with burger menu and campaign logo.
2. Non-Clickable Cards
Honeycomb display of highest company investment in France. Table layout of company fundings.
3. Footer
Social and sharing icons.
UX Annotations
COMPANY - GERMANY
1. Payments Navigation
Cheques, e-money, direct debits, credit transfer and card payments.
2. Cards
Data displayed on card-based designs.
Companies - Germany
Open Menu
UX Annotations
OPEN MENU
1. Links
Expandable menu to navigate between sections.
UX Annotations
PAYMENTS - EUROPE
1. Payment Navigation
Cheques, e-money, direct debits, credit transfer and card payments.
2. Non-Clickable Card
Graph showing payments cheques, payments by county and by years.
PAYMENTS - FRANCE
1. Description
The navigation and the layout are exactly as Europe page. The only difference is the data.
Payments - Europe
Payments - France
Desktop Wireframes
UX Annotations
LANDING PAGE
1. Links
Dropdown button to select between the languages Italian, Swiss, German and French.
2. Links
Main two sections Companies and Payments opted to have them on mobile for better and faster navigation.
2. Icons
Two social media sharing icons and an info button.
Landing Page
Company - France
UX Annotations
COMPANY - FRANCE
1. Navigation Bar
Logo linking back to the main page. Buttons that help the user to navigate to different sections of the campaign by selection.
2. Cards-Based Design
Displaying the highest companies with investors and the highest amount of money invested.
UX Annotations
BURGER MENU
1. Navigation bar
A sliding panel, displaying the main two links section of the campaign.
Menu
Company - Europe and France
UX Annotations
COMPANY - EUROPE
1. Navigation
Navigation menu links between Europe, France, Germany.
2. Cards
Data split into 2 cards for better responsiveness.