Day 3 of 100: Landing page that engages — A Wakanow case study
UI design challenge with context and a process.
Good morning, good afternoon and good night to you awesome readers/learners anywhere you are right now. Welcome to the third day of my interesting 100 days of UI challenge using real life scenarios. It has not been easy these past couple of days for I am combining this challenge while having an awesome day job. Don’t feel bad for me at all for we are all learning new things through this challenge.
Preamble
A few days ago, a friend of mine ran into me, explaining the new Wakanow Pay Small Small( I will refer to it as PSS from now) landing page introduced by Wakanow: one of Africa’s leading full-service, online travel company.
Wakanow Pay Small Small (PSS) is a flexible travel payment plan that lets Wakanow customers lock down great travel deals by making only 25% down payment of the travel cost and paying the rest in convenient instalments.
He did not really like the PSS’s landing page experience owing to the fact that this was a new launch and that Wakanow definitely would love to make their awesome customers want to use this service. I took a quick look and told him “Well if I have time I will have work on it but that I don’t decide this UI daily challenge”.
So when DailyUI who decides the UI element(s) we focus on daily, sent me an email to “design a landing page UI ( above the fold )”. The only thing that came to my mind al day was Wakanow’s Pay Small Small landing page.
What was the ultimate goal?
To design a landing page that will on-the-fly encourage viewers to engage with the PSS page once they it loads.
Background research
Unlike the last two days where I immediately asked myself lots of questions about how to design a better experience, I instead turned quickly to research and understood the following;
- what actually is a landing page and an ‘above the fold’ design?
- sites that have successfully implemented great landing page experiences.
- the myths of ‘above the page’ designs.
- great qualitative usability tests conducted by lots of companies interested in the usability of websites. I thoroughly went through Nielsen Norman Group’s awesome insights on ‘above the fold’ design, scrolling and attention, how little do users read, interaction cost etc )
- what makes great above the ‘fold designs’ for a landing page.
- also learnt from other talented designers on one of the best design communities ( Dribbble ) on what a great landing page should look and feel like.
So what is an ‘above the fold’ design?
— a term borrowed from print-newspaper terminology and used as a way to reference what is visible on the webpage without scrolling.
Once you get to a website, the visible content you consume without scrolling is your above the fold.
Summary of what I learnt from my research and while looking at Wakanow’s PSS is a great learning process to designing a better landing page that encourages engagement.
Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.
What appears at the top of the page vs. what’s hidden will always influence the user experience — regardless of screen size. The average difference in how users treat info above vs. below the fold is 84%.
Visual elements can draw the eye down the page but compelling content can draw user in.
People prefer sites that get to the point and let them get things done quickly.
Build a solid story that will encourage user diving into your primary engagement items.
Prioritize important and rewarding content above the fold
Quoted points above are from Nielson Norman group’s website. See footnote for reference.
So the big question after a thorough research is?
Does the current Wakanow PSS page have an awesome above the fold design that encourages engagement?
I will innocently say NO.
What issues can we notice from Wakanow’s PSS page?
issue 1: The current above the page content does not say anything about PSS. Everything that won’t make the PSS feature to be seen first should be eradicated.
issue 2: Words! Words!! Words!!! everywhere — Nothing appeals to the user or encourage any engagement. A user will be like “Okay I am here, what should I do and what exactly are you trying to say”.
issue 3: No primary call to action — Anybody who launches a new feature or update will definitely have a call to action to try out the new stuff but it was totally lacking here. All I saw was a tired and stressed “Not registered ? Click here” text.
issue 4: Sorry mobile users, for you will have to scroll to almost the bottom of the page to read about the new feature.
issue 5: Wakanow used links for tabbed columns. The blue links confused me seriously that I had to try clicking, only to discover that they are not links but a style.
Sketch!!! sketch!!! sketch!!!
Yes!!! I love sketching. Here are the different designs that would have been a better fit for PSS.
From the above sketch, I chose the first screen on the left, though the one on the right is another interesting design in case they don’t have time to make a video intro. It’s more like a carousel (image slideshow explaining what the launch is about with great visuals)
Did any prototype emerge? Yeeeeesss :)
After many variations using Bohemian sketch app,
And I was able to come up with a Wakanow Pay Small Small landing page that is simple, soft on the eye, appealing and with design boldly communicating what was launched with immediate primary(signup) and secondary call(learn more)to actions.
Quick glance on changes I made for the design, whichI believe will improve PSS’s landing page experience
- I prioritized the above the fold content for the new PSS feature alone for we already know what to do if we wanna book flight or hotel on Wakanow.
- Research has shown that
Visual elements can draw the eye down the page but compelling content can draw user in — Nielson Norman group
I used a video landing page that one can quickly play or click the learn more arrow to know more.
- I made sure that there was clarity on what is seen above the fold . Very key for immediate engagement.
- created an obvius primary call to action.
- bold title, saying what was launched
- Subtle “learn more” arrow button incase the user wants to know more after watching the video.
DISCLAIMER: I represent myself and myself alone and not any company or secret agency trying to mar or destroy Wakanow’s online image. I am just a learning designer trying to improve, by looking at real life design scenarios. This is for educational purposes only.
Thank you so much for reaching the end of this article. Your feedback will be highly appreciated and please don’t forget to “recommend” and “share” the article if it made sense to you.
Watch out for day 4 of the 100 days UI challenge. #Shalom
Day 1: A minimal, easy to do sign up form for Jumia.com
Day 2: Card checkout UX flow — from Diamond bank online to Interswitch WebPay Platform
references:
