The last asset that I have to design for my bank branding is a landing page. I have actually never heard of the term landing page before, so I had to do a quick google search on the term.
According to Wikipedia, a landing page is “a web page which serves as the entry point for a website or a particular section of a website.”
The purpose is to give a quick overview of all the best things you have got to offer, and turn visitors into customers.
We were expected to make our landing page in Webflow. Thus in class, we set up a Webflow account for the first time, and later on, Dr Kyle gave us an introduction to Webflow.
For me, since I have never done a landing page before, the first step is to seek out some inspiration. I used the resource given to us in class called “ONEPAGELOVE.COM”. I collected some of my favourite web pages and put them together into Figma;
Since it is my first time using webflow, I thought I would start off with a simple layout and then build on my ideas. The foundation for my landing page was built on inspiration from these 2 web pages ;
I liked how on the first webpage there are 3 clear sections of different offers, I would like to do the same for my brand where I can market to potential customers 3 of my bank’s best qualities. I also wanted a big first section like the webpage on the left, it is one of the first things people will see and it grabs attention. I think I may put my “join now” button there too;
I wanted to build upon that idea, thus I looked into other elements that I can add to my landing page;
For the left photo, I like how there is 3 separate standout element introducing the perks of the brand against a white background. I think I would like to do something similar and show all the different bank accounts that my bank has to offer.
For the right photo, I like the strip of ” sign up for the course now”. It breaks up the page nicely and since my first idea just contains ” section 1″, “section 2” and “section 3”, I think it will add a fun aspect to my rather rigid and mundane foundation layout;
Now that it is coming together nicely, I did a few mockups on Figma to see my idea in colour;
The left mockup was my first attempt, after discussing my ideas with my teacher, we decided to simplify the heading image.
In subsequent classes, more discussion on my mockup lead to a series of changes;
On my 3rd attempt ( left most image), there were a lot of changes.
First, the colours were dampened a bit, there is no longer a different background colour for each section. This makes the webpage a lot easier on the eye, and makes it more professional and uniform. I also added a credit card section. The purpose of this section is not so much to show off the credit cards, but I want to add a section where it encourages the customers to download the app on the app store or google play. I noticed with a lot of companies that have an app, their website always has a section to encourage downloading of their app. Since my brand is place heavy importance on the bank app as well, I feel like this section was important to add.
On my fourth attempt ( middle image) there were 2 major changes. First, each section has a different image, not like before when it was just 1 user interface screen for each section. It made the webpage less mundane. I have also reduced the size of the ” join us” section and the accounts section to reduce visual clutter.
My firth attempt was my teacher suggesting that I should move my credit from the left to the right so that the eye naturally flows down from the credit section to the join us section.
Now that the layout of my webpage is nearly complete, I have to consider my content and what my brand special.
Thinking about my brand slogan of bringing opportunities and the bright colour schemes, my content needs to be upbeat and positive.
Looking back to my previous blogs, my brand has come a long way since the original idea of “providing personalised opportunities through transparency”
I now think about my brand as something that is born out of the desire to be a ray of sunshine in the banking world in a time of economic pessimism, especially for the younger generation who now feels a lot of pressure from the rising housing and living cost.
I have come to understand that a bank can’t solve all their problems, but it can make their day just a little better with amazing rewards, and make banking just that little easier instead of it feeling like a chore.
I thought about my 3 sections on the webpage and selected the 3 most important messages that I want to convey;
- Personalised offers and rewards that the user will actually find use in and made them smile, everyone who signs up is entitled to these offers, it’s our way of giving back and making their day a little better. this also links back to opportunities, the offers are opportunities for the user to save.
- Helping the user to budget is one of these functions at a lot of modern bank offers, but I don’t want to be different for the sake of being different. Helping people, especially young people who are just getting started in the financial world to budget is important to us.
- Technology should make life easier and more convenient. Banking should not be a chore. Our bank app has all financial functions such as – saving goals, tracking investments, financial statements and money transfers all in one place. So you can have full financial control 24/7.
With all that in mind, I did a quick summary sketch of what is going to be in each of my webpage sections, and did a final mockup in Figma;
At the last minute, I also decided to add a contact form. Choosing a bank and bank accounts for the first time can be daunting a process and one landing page cannot answer all questions. If the user is unsure about something, they might leave it or try to find a way to contact the bank. A lot of times in this process the user’s life gets in the way and they might forget to ever ask the questions. The contact page is there to make sure that any questions can be asked straight away in a convenient way.
Now I move on to actually design the landing page in webflow. I don’t really really know how I can document this process as it was a long learning process with lots of trial and error, back and forth.
I think I will just summarise 2 of the most Webflow skills that I learned on the way; the first was learning to make elements interactive by using the hover function;
( left before the mouse hover over the words, right what happens when the mouse hovers over the words)
This at first was not easy to figure out, to make the transition shown on the images above, I have to set a text shadow, a movement transition and sometimes also colour change, and for each of them, I had to set a separate speed of transition. I remember feeling so frustrated when learning it on webflow, but in the end, it was all worth it as the outcome is really an interactive webpage. The following elements are some examples of what I was able to make interactive;
The next important skill was using buttons and links. For example, if you click on this button, it will take you to the apple store/google play store;
If you click on these buttons, it will take you to specific sections of the landing page;
Some of the buttons are decoys and are for decoration purposes;
( I added these buttons in anticipation that in bigger projects, there will be separate information pages that gave the user more information on specific topics. I did not want to overcrowd users with information on a landing page).
If you would like to see my finished landing page, here is the link;
https://preview.webflow.com/preview/jing-yi-suns-banking-site?utm_medium=preview_link&utm_source=designer&utm_content=jing-yi-suns-banking-site&preview=5a0929b281fe227f263bbef3a9ec9cf4&workflow=preview