Router Web GUI

ReDesign Web GUI B2C

TIMELINE

  • 2012/6~ 2013/12
  • 18 months

TEAM

  • 4 PM
  • 1 PD (I'm here!)
  • 1 FE
  • 2 BE
  • 3 QA

ROLE

  • Research
  • Wireframe
  • Mockup
  • User test
  • Front-End

TOOLS

  • Photoshop
  • Illustrator
  • html+CSS

Brief

This project was truly unforgettable — not only the toughest one with the most late nights, but also the one where we spent the most time aligning and refining the design. To completely revamp the old Web GUI from both a structural and flow perspective, I collaborated with four PMs and held design discussions almost every morning. From understanding complex functions, refining UX logic, to aligning with hardware constraints, we worked through every detail step by step. Looking back now, it still feels incredibly rewarding and satisfying!


Research

Problem & Needs


Customer Service Dep.
CSD collects customers feedback questions and comments

User Trial in US
When the product is completed, an internal employee test will be held in the United States, and the reference for the adjustment.

Competitive Analysis
Compare and analyze the advantages and disadvantages of competitors' products.

User Trial in Taiwan
Collect feedback and troubleshoot problems by conducting User Trial and AB test in Taiwan

Industry Status

Image-1

A/B test profile

ABtest-1
ABtest-2

Refine Goals

Simpler Interface

  • Clear status map on the home page.
  • Show necessary information ONLY on the status map ( Internet, Router, Wi-Fi Clients, Ethernet Device, USB Device)

More Interactive User Interface

  • Intelligent troubleshooting
  • All fields default to the most commonly used setting options

Fresher Look

  • Abandon the classic orange, use the blue-green consistent with the D-Link LOGO, and the flat style
  • Optimized design for touchscreens and tablets.

Design Philosophy

  1. Comfortable but not “Wow…”
  2. Intuitive and no learning curve
  3. Find everything within 2 clicks
  4. Touch screen AND mouse control
  5. Work with Retina Display
  6. Interactive error checking

Web UI Design Footprint

Boldly explored various possibilities for the dashboard design, drawing inspiration from everyday life, movies, and Apple’s design style.


Design-1
Design-2
Design-3
Design-4
Design-5

UI Guideline

Color Plan

guideline-1

Typography

guideline-3
guideline-3

The Final Web UI Design & Before / After


Home Page

final-1

Basic Settings Page

final-2