D-Link EXO AX Wi-Fi 6 Router Product Page
The future is unstoppable, your Wi-Fi should be too
3 min read
Holder
D-Link Corporation
My Role
Web UI, and UXDesigner
Duration
May. - Jun. 2020 (1.5 months)
Tool
Adobe XD, Photoshop, Sitecore, Visual studio Code
My work
Prototyping
Interaction design
Visual design
Front-end coding for UI
Responsive design
Work with
B2C Product Manager
Senior Visual Designer
Copy writer
Website Manager
Project Vision
The new DIR series router was the first Wi-Fi 6 router to the company, and D-Link wanted to show how powerful it could enhance the overall internet experience. Wi-Fi 6 brings next-generation Wi-Fi technology into people's homes, giving them the quantum leap in capacity, speed, and range to handle all the Wi-Fi demands.
View Page
Problem
How might we let customers clearly understand what kind of benefit they could have with this router?
The new features of the Wi-Fi 6 router were all technical functionalities. The customer unfamiliar with the network might feel confused when looking at the internet jargon. Therefore, it's crucial to transform the terminology into digestible sentences and match what customers want.
Solution 1
Used simple and more straightforward concepts to explain those internet terminologies.
I used more life-related objects to explain how the function works and how it could improve your internet speed or fix the connection issue. Instead of solely relying on words, I added SVG animation to let users better understand by watching the motions. Some people can't imagine the functionality just by seeing the image. So, the visual metaphor animation could help them connect to the existing knowledge already stored in the brain.
The moving truck could better demonstrate how the feature "OFDMA" works.
Solution 2
Used comparison table or area chart to show the enhancement so that people could know the benefit without fully understanding the technical detail.
The concept of speed attenuation was hard to explain how the speed decreased with distance. However, people cared more about the value of buying this router. They would like to see the difference compared to other products.
For color blind people they could click the label to see the line separately.
I used Chart.js to implement the area chart so that people could see the speed difference via color indication.
Solution 3
Introduced all the features first, then diving deep into each part at the below section to further explain. Therefore, people could have a basic understanding of those essential features.
For this part, I collaborated with our copywriter and product manager to clarify what essential features we needed to add and the priority for each element. After discussion, we chose to use several icons with one line of simple description to present.
Takeaways
I collaborated with many people from different positions and used some new design methods during this project, and here are the main takeaways.
1. Explained for product's technical features for people unfamiliar with networking.
I searched those networking terminologies on Google and tried to describe them to others initially. However, I found out some of them were hard to explain even to my colleagues.
So, I provided my first version of the concept design to the product manager and discussed improving legibility. Then, for the second round of testing, I sent it to all the team members to see whether they could understand it or not.
2. Implemented different animation methods to our CMS for the first time
The Wi-Fi 6 series page was the first time I designed the flagship product page. After fully understanding the key visual concept from the senior designer, I would like to create a different layout. Therefore, I decided to use parallax.min.js to implement a scrolling effect with diamonds.
However, our CMS was not suitable for adding additional javascript. It would write it inside the HTML body. Consequently, it would slow down the loading speed. After talking to our engineer, they suggested adding it from the Back-End side.
