TP-Link Wi-Fi 6 Site (Interactive Prototype)

Background

All the product launches are within an extremely tight deadline. In order to concur, I helped the team build a template of 10 different sections so we are able to switch and swap the sections for any new product release. The sections include Hero banners, feature boxes, app showcase, product display, text & image display, awards, frequently asked questions, customer reviews, subscribe, and connect. For this project, I used what I previously designed as a base to move forward.

About W-fi 6 Products

Wi-Fi 6 is also known as AX Wi-Fi. Wi-Fi 6 uses both 1024-QAM to provide a signal packed with more data (giving you more efficiency) and a 160 MHz Channel to provide a wider channel to make your WiFi faster. Experience stutter-free VR or enjoy stunningly vivid 4K and even 8K streaming. Wi-Fi 6 uses 8×8 uplink/downlink, MU-MIMO, OFDMA, and BSS Color to provide up to 4x larger capacity and to handle more devices. Come home to a virtually flawless smart home experience or throw house parties with a network built to handle all your guests and their devices.

User Research and Persona

This time, a major wifi-6 router was launching within a roughly 2 weeks deadline. Considering the time frame, I gathered all the information I can learn and get about wifi-6 routers with the help of the product manager.

I chose to do a guerrilla-style interview with 2 existing users.

Since it’s a newer technology, we found out it’s mostly used by lead users, gamers who need faster and more stable internet, or company/office environments that require better Wi-Fi. Since the TP-Link brand focuses on B2C (we have a B2B brand called Omada) so we will only focus on lead users and gamers.

Combining both background research and persona, we got the key benefits that our potential users care the most about:

Higher data rates (faster speed)
Increased capacity
Performance in environments with many connected devices
Improved power efficiency (saves power)

We also found out:

They love researching the specs of the products they are interested in, but a text-heavy official site is not what they’re looking for.
They enjoy the feeling of exploring and gaming. Fun and interactive is the kind of vibe that attracts them the most.

Interactive Prototype

Done in InVision Studio, provided with detailed specs.

Feature Section

Display the three main features that our consumers found most attractive. We chose to hide the detailed contents because some of our users dislike contents that are text-heavy while some other users get to dig deeper if they want to learn more.

Product Section

The original design on all our web pages was the four-blocks-in-a-row display. We came up with the idea of changing it into a product image-focused spotlight display.

Users don’t get to see four products showing right away, but the one they see can actually grab more of their attention immediately. It’s always been tricky to have the right balance between what the company wants to deliver and what the users actually like.

We later found out our audiences find the new design much more attractive and we also get to choose which product our marketing team wants to focus on more. The final result is the total click-through rate increased by 18.7% compared to the original design we used and the main product marketing team wants to push was increased by 86.2%. (data provided by digital marketing manager)

Prototyping Software: InVision studio.

Original Prototype (possibly long loading time)
https://tp-link.invisionapp.com/public/prototype/skawyhhuw00peob01m2msvam3

Team
Project lead: Torrance Hu
Designer(support): Sanguen Lee
Product marketing manager: Bryan Hammer
Developer: Caia Tsai

Related project

We also revamped a related project: a landing page for two of our major SKUs linking directly to one of our biggest retail vendors. The aim of the project is to assist our retail team in driving traffic and boosting sales of our newly released key products on Walmart.com.

I made the design focus on our products without too much information distractions. We decided to hide the detailed description as optional that only reveals after hovered on since a large proportion of our targets do not like text-heavy content. The extended content is intended for people who like to explore and learn more.

Implemented as a landing page, we reduced the length to fit in the browser window without having to scroll down or look further. In this way, visitors can simply find the call-to-action buttons at first sight without unnecessary interactions.

Results
According to data provided by our digital marketing manager, the conversion rate went up significantly from last year’s 5.91% to 18.57%. Also remained a 100% mobile-friendly click rate. (tracked by Google Analytics)

Team
Project lead: Torrance Hu
Project manager (channel marketing): Amita Gupta
Developer: Caia Tsai