DESIGNING BETTER,

31TEN SOLUTIONS

SLEEKER & MORE

EFFICIENT WIFI
HOTSPOT PORTALS
 Much like offering A/C or water, providing access to WiFi at your
place of business has become a given, especially in countries like
China where people use data plans judiciously.

On the business side, WiFi portals serve as an excellent tool and

WIFI IS A
provide often untapped opportunities for communicating with customers.
However, the user experience tends to receive a limited attention from

BUSINESS STAPLE
providers and business owners alike. Logging into most WiFi portals is
currently far from optimal.

This is not only hurting your overall experience, but it’s also missing
an opportunity to add value to your business by bringing competitive
advantages and enhancing overall consumer loyalty and satisfaction.
This document gives an overview of typical issues seen in most WiFi
portals, best practices and ends with a case study of our successful
redesign for Shanghai’s airports. Please feel free to download it as
a PDF and keep our WiFi portal design best practices checklist as a
reference tool.

2
OFFERING FREE
B U S I N E S S S TA P L E

WIFI IS ESSENTIAL W O U L D T H E AVA I L A B I L I T Y O F I N - S T O R E W I F I

INFLUENCE WHERE YOU SHOP

• Much like offering A/C or free water, providing access to WiFi at

your place of business has become a given, especially in Asian
countries like China where people use data plans judiciously
• Customers report the availability of free WiFi as a key factor in 20.5%
deciding where to shop, eat and avail services
• It’s not just about goodwill, free WiFi increases foot traffic and
ensures customers stick around longer, spending more money 48.1%
• Complimentary WiFi allows customers to freely browse product
reviews, search for in-store offers and look up the business’s
31.4%
(mobile-responsive) website, all of which are part of the modern
shopping experience
• Thus, providing customers free WiFi leads to more engagement
and higher sales, especially for businesses in retail (bookstores,
clothing boutiques), F&B (coffee shops, restaurants, pubs) and 79.5%
other services (salons and spas)

Yes Somewhat No

*Source : Jwire, Q4 2012

3

Home solutions just won’t cut it, unless your idea of a fun Friday is dealing with security breaches, data leeches and run-ins with law enforcement.
1 2
The portal acts as a page to help
users identify it as your business and
your WiFi so they don’t accidentally
connect to a hacker’s network. Be
aware of someone else setting up
a wireless network nearby with a
similar name.
NO PORTAL, NO GAIN
B U S I N E S S S TA P L E
It’s also more convenient, since
otherwise customers are left looking
or asking for a WiFi password.
3 4
It limits your liability for the users’ Portals help manage bandwidth, so
behavior on the Internet connection that one can prevent a single user
from taking up all bandwidth (e.g.
a. In China, as in many countries,
downloads, gaming) and affecting
the law requires users to provide
the speed for other patrons.
their real identity with all apps, ISP
connections, and hotspots. By using
a portal, you ensure only those
who submit their verified cell phone
numbers (which now requires ID) to
connect have access to your WiFi.
b. The portal also allows inclusion
of a contractual “acceptable usage
policy” (AUP) which prompts users
to accept it if they want to connect,
further relieving liability.
4
 TAPPING INTO THE BUSINESS VALUE
B U S I N E S S S TA P L E

The use of portals unlocks a new level in accessing valuable information and marketing tools

BRANDING AND MARKETING CRM DATA SOURCE AND

MANAGEMENT TOOL
• They are a bonus channel for businesses
to communicate with customers, and add • For improving user experience
impression points ››By allowing your patrons to use their social login
• Leveraging landing page and impression credentials to gain access to your network, you have
points access to a variety of social data points

››Identifying your brand ››Can create more personalized experiences based on

real information
››Timed injection advertisements
• For business intelligence
››Exclusive deals
›› Insights on shopping habits of customers, online
››In-store ordering
product searches for own and competitors’ products

›› Find busiest times, floor sections with heaviest footfall

›› Test and track responses to real-time targeted offers

SOCIAL AWARENESS
Invitation to link to your company’s social media
accounts.

5
 T Y P I C A L T O U C H P O I N T S AVA I L A B L E

Login page Post login

marketing marketing
spaces space:
generic

Final landing page

Preroll full page or overlay
marketing space

Social
login to Or targeted
collect user based on social/
information consumer data
6
USER EXPERIENCE IS
B U S I N E S S S TA P L E

YOUR BRIDGE BETWEEN

BUSINESS GOALS AND
CUSTOMERS
Though portals bring with them many advantages, it is important to
not lose sight of the main purpose - to allow quick, effortless access to
the Internet.

The top priority should be given to the user experience and value
offered.
• UX must not be obstructive
• Ad placement must be non-invasive and organic in order to
minimize the annoyance factor

As a result, the design of the portal should reflect a mutually-acceptable

compromise between user and business.

Users are impatient, more so with procedures. If the portal is saddled

with poor design, pop-ups, unresponsive interface, they’ll simply go
back and review other WiFi options. Or worse, possibly move to
another location/business. Alipay and Wechat wifi at Mc Donalds

Source: Dan Grover

7
BETTER UX IS KEY TO
B U S I N E S S S TA P L E

GETTING AHEAD IN THE

B2B HOTSPOT GAME
B R O C A D E A N D H U AW E I A R E N E C K A N D N E C K F O R
THE LEAD IN GLOBAL CARRIER WIFI EQUIPMENT
REVENUE SHARE

UX is a key differentiator for hotspot providers when building competitive Brocade (Ruckus)
advantage in an increasingly competitive market. Other

Although growing at a very fast pace, the market is commoditizing due to lower
barriers to entry, penetration of technological improvements and resulting cost-
advantages.
Huawei
• Platforms and routers are gradually getting cheaper and easier to deploy
• Loyalty is decreasing, and businesses/governments are more likely to change Nokia
providers based on pure pricing
• Market leaders invest extensively in R&D to stay ahead of new entrants
Cisco
In 2015, the global market for WiFi hotspots was valued at $1,510 mn, and HPE
expected to reach $3,325 mn by 2020
• CAGR for APAC region (top growth market) till 2020 to be above 18%
H1 2016 Global Carrier WiFi Equipment Revenue Share
• Adoption of internet-enabled phones in China on the rise, and local
governments not blind to importance of public WiFi access; 2014 alone saw
over 600k WiFi hotspots set up in China
• Highly competitive market with multiple players yet little product differentiation
due to uniform adoption of industry standards (IEEE WLAN specifications)
Source: IHS Markit
8
WIFI HOTSPOT
PORTAL DESIGN
BEST PRACTICES

Landing page after WiFi login in Paris Charles de

Gaulle’s lounge, France: Where do we even get
started?

9
MAXIMIZE DEVICE
BEST PRACTICES

COMPATIBILITY
Make it responsive across screen sizes
• Website should cater to at least smartphone, tablet,
and desktop interfaces

Take older devices into account to maximize browser

compatibility
• Avoid javascript-heavy portals and sophisticated CSS
effects

Track user interactions

• To understand the reason they leave without logging in-
not receiving the SMS in time? Browser compatibility
issues? Default portal layout of HP’s Aruba portals

• Bounce rates (users leaving without attempting a

login) can indicate incompatibility
A Shanghai restaurant chain’s
WiFi portal as displayed on
mobile

10
 OPTIMIZE SPACE USAGE
BEST PRACTICES

M A R S E I L L E A I R P O R T, F R A N C E S TA R B U C K S P O R TA L , S H A N G H A I

GENERAL
Page could have been
displayed in EN or FR
depending on browser
language, instead of
wasting space with
bilingual content

ICON SIZE
GENERAL
Not adaptable to
screen width, not Login steps occupy
centered 60% of the screen,
could be halved with
an accordion
CONTENT
CROP
Further information is
cropped off

Login options occupy entire screen,

no usable space for revenue
generation
11
 LEVERAGE INFORMATION HIERARCHY
BEST PRACTICES

S TA R B U C K S P O R TA L , S H A N G H A I M A R S E I L L E A I R P O R T, F R A N C E

Make the option that

users are most likely to
Step 2 stands out use stand out
more than Step 1

12
DISPLAY CONTENT IN THE USER’S LANGUAGE
BEST PRACTICES

•In a bilingual interface, when using language icons or clickable text,

only show the language alternative

English | 中文 VS 中文

Leverage automated
browser language
detection
•Use the full language name rather than 2-letter codes
But keep providing a Show the current language as selected
clear way to switch
language (icon, drop-
down) VS

13
 MAKE INTERACTION AND FLOW AS
BEST PRACTICES

UNDERSTANDABLE AS POSSIBLE
•Use descriptive button labels •When showing a timed injection advertisement or message, include timer
Use countdowns, progress bars

Submit Get online 3 Skip

VS

•Animate buttons when users click them •Make error messages as explicit as possible
This indicates the start of the action Clearly explain the underlying reason when validation errors occur

Get

•Make small interactive elements more forgiving

Add a transparent border to small buttons

VS

14
 USE INTUITIVE FORMS WHEN COLLECTING
BEST PRACTICES
INFORMATION
•When asking for a code verification (captcha, SMS code), give
realtime requirements and feedback
VS
•Keep form labels visible at all times
VS
•Save information entered by users
This is particularly important.
›› When validating a code via SMS: On iOS, switching to the
Messages app to see the verification code dismisses the portal,
disconnecting you and requiring you to go back into Settings, re-
connect, and finally enter the code. Don’t make users enter their
information again!
›› When setting up time usage limits (e.g. 2 hours), store user
information and make the next login a one-click affair (“let me
online”)
VS
15
 WIFI PORTAL CHECKLIST
BEST PRACTICES

Is your portal
Compatible and tested for the majority of devices less Avoiding any unnecessary steps?
than 5 years old?
Saving user information to avoid them having to re-
Organizing information and visuals hierarchically? enter it in case they accidentally leave, or to make re-
login easier and quicker for them?
›› Displaying the most used option(s) prominently?
A/B tested on the most important interaction elements?
Optimizing all usable space for marketing purposes?
Intuitive and understandable?
Detecting the user’s language and displaying
accordingly? ›› Uses descriptive labels and buttons

Fully responsive for ›› Uses interactive elements to show if and when action
has started
›› Smartphones
›› Uses forgiving small elements
›› Tablets
›› Indicates countdowns in timed injection messages
›› Desktops
›› Makes error messages as explicit as possible
Tracking the user interactions?
›› Uses real time information-filling feedback
›› Bounce rate
›› Keeps labels visible at all times
›› Time to login
›› Clicks

16
31TEN’S REWORK OF THE
CASE STUDY

WIFI PORTAL FOR SHANGHAI

AIRPORTS (PUDONG &
HONGQIAO)

17
CASE STUDY

REVAMPING SHANGHAI
AIRPORTS’ FREE WIFI
PORTAL

SITUATION
100 million people went through both Shanghai Inter-
national Airports in 2015. A frictionless internet con-
nection is a key variable in airport ratings. We were
thus commissioned to redesign the outdated free WiFi
on-boarding portal. VS

CHALLENGE
The project had to make an arbitrage between user
efficiency / ease of use and maximization of the ad-
vertisement space for sponsors, which finances the free
Wi-Fi in the airports.

OUR SOLUTION
SAMDecaux was provided with two fully responsive
versions of the login page to be A/B tested on user
samples, to assess how much sponsor space is accept-
able while maintaining a seamless experience.
The final version chosen after testing is currently receiv-
ing 1 million visits a month.

18
 MULTIPLE IMPACT OPTIONS FOR MARKETING &
CASE STUDY

ADVERTISING

1 2 3 4 5 6

Impact: Preroll screen (10 Transitioning welcome Impact 2: Login form Impact 3: Post-login Impact 4: Landing page after login, to be implemented
seconds, skippable) screen, 2 seconds advertisement (10 seconds,
skippable)

19
 A FULLY RESPONSIVE EXPERIENCE
CASE STUDY

PREROLL TRANSITION LOGIN POST LOGIN

DESKTOP

TA B L E T

PHONE

20
 OPTIMIZING SCREEN SPACE FOR MARKETING
CASE STUDY

VERSION A VERSION B

• The login block is only 25% of the screen

space on mobile
• Version B uses transparency settings to
allow for fullscreen assets

21
DELIVERING A FRICTIONLESS USER EXPERIENCE
CASE STUDY

VERSION A VERSION B

• Detects browser language and displays

accordingly (language switch is still
possible)

• Virtually 100% compatible with all

devices and browsers <5 years old

• Smooth login: All steps happen with

adaptations of the login block (no page
reload)

• Heavy usage of hints and indicators to

maximize intuitiveness

22
DEMO
You can use random numbers
for the phone number and
code.

Scan or click http://qr02.cn/CLhybp

23
DOWNLOAD
Please feel free to download
it as a PDF and keep our WiFi
portal design best practices
checklist as a reference tool.

Scan or click http://cn.mikecrm.com/fQD7AKN

24
THE 31TEN USER EXPERIENCE & USER INTERFACE TEAM
C O N TA C T U S

Need to design or improve a digital experience? Liked this piece and want to discuss it further?

TAILIEN SHEN
VLADIMIR GARNELE
PRODUCT MANAGER &
USER EXPERIENCE DESIGNER

https://www.linkedin.com/in/tailienshen 3 1 T E N PA R T N E R , H E A D O F U X - U I
lily@31ten.network vladimir@31ten.network

JOAN LIN
USER EXPERIENCE &
U S E R I N T E R FA C E D E S I G N E R

https://www.linkedin.com/in/joanjunglin
joan@31ten.network

上海市静安区民立路130号4楼
4F, 130 Min Li Road
200070 Shanghai, China

25