ASUS ROUTER REDESIGN

UX, Instructions, Brand & Identity

Artefact + WWU

Working with Artefact as our client, the WWU UX capstone project includes researching, prototyping, and developing a solution to improve the current ASUS dualband gigabit router. This project emphasizes working within a short timeline while creating a realistic project scope. While maintaining positive aspects of the product, the project is focused on optimizing the holistic user experience.

11 Week Timeline


PROJECT TEAM

UX Capstone Project 

Emma Nestvold - Industrial and User Experience Designer

Marina Semez - Graphic and User Experience Designer


Project Proposal / User Research / Concepting / Usability Testing / User Flow & Scenarios / Prototyping / Brand & Identity / Interface Design / User Experience

INDIVIDUAL ROLE

 

 

PROJECT PROPOSAL

Project Strategy & Phases

Our team created a detailed schedule for interfacing with our client over the 11 week timeline. The proposal helped to achieve transparent communication with Artefact and coordination of our timeline with intermittent internal and external reviews. View the project proposal here.


CURRENT UX

Problem Area Identification

In the beginning design stages, the project started by evaluating the current product from the purchasing experience (online and in store), unboxing, setup, and connecting online. Our main goal was to understand the user from every angle and design for their needs.

 
 

UNBOXING

Setting the Product Tone

The unboxing experience sets the tone for the product and brand. Without careful curation, the user may doubt their own ability to use the product. Setting up a router is already an intimidating process for many users. How can we instill a sense of calm and confidence during the unboxing? 

 
Incorrect antenna configuration

Incorrect antenna configuration

Complex directions

Complex directions

Too many flyers, incohesive branding

Too many flyers, incohesive branding

 

 

SETUP

Performing Clear Communication

At its core, the setup process is the connection of two cords and turning the router and modem off and back on. This basic task is intimidating because many users are unfamiliar with the process or may have had a bad experience in the past. How can we increase user confidence during setup?

 
Setup easier than appears

Setup easier than appears

Connecting modem & router

Connecting modem & router

Ideal antenna configuration

Ideal antenna configuration

 

 

CONNECTING

Easing Platform Transition

The connecting process has an inherent awkwardness from the transition of media. The user goes from connecting physical hardware to configuring their network names, passwords, and other information on a digital device. How can we smooth the transition from physical to digital?

 
Very large text, outdated look

Very large text, outdated look

Overwhelming router site

Overwhelming router site

Does not walk user through setup

Does not walk user through setup

 
It has a very not user friendly interface. It’s my worst nightmare.
— Amazon review
 

 

ONLINE REVIEWS

User Knowledge Divide

Evaluating amazon reviews revealed a deep divide in customer satisfaction. Customers with in-depth knowledge of routers applauded the router performance and comprehensive customization features. However, negative reviews came from users with little or no background knowledge, especially with initial setup. How can the product experience support both high-tech and low-tech users?     

 
Screen Shot 2017-05-13 at 11.13.28 AM.png
 
Killer router for heavy usage. Handles heavy traffic with ease while providing commercial level control of your home network.
— Amazon review
 

 

After initial research, the project scope was narrowed down to the areas in most dire need of an update that could be resolved within our timeline: the packaging instructions and the router website. These aspects were chosen because they are the most essential to setting up a router. 

PROJECT SCOPE

Defining Design Direction

 
 

 

FEATURE CURATION

Analyzing Features

Ideally with a website of this complexity, user data would be used to help determine which features are kept. In this case, an in-depth analysis of all 60 current features was done to determine what features were creating unnecessary clutter.

 
 

 

FEATURE FEEDBACK

High-tech User Feedback

To help supplement the lack of user data, feedback was necessary to avoid getting rid of useful features. Questions were presented to individuals interested in hardware and software. Using the sub-reddit r/hardware, feedback was given about what features advanced users want and use. This confirmed advanced users are specifically interested in port forwarding, static IPS, firmware updates, changing the network channel, controlling the QoS, traffic and bandwidth management, parental controls, open WRT, guest networks, and file sharing or file storage.

 
Screen Shot 2017-05-04 at 7.25.22 PM.png
Screen Shot 2017-05-04 at 7.25.35 PM.png
Screen Shot 2017-05-04 at 7.25.41 PM.png
 

 

IDEATION

Conceptual Development

With research findings in mind, concepts of user flows were created to solve these problems. Many of the concepts address the disconnect between the high tech and low tech users, both currently using this product. How can you help the low tech users understand setup and basic features without overwhelming them while also providing advanced features to the high tech users? 

 
 
Scan2Edited2.png
 

 

3 Directions

Instructions & Website

After general brainstorming, 3 concepts were chosen to create a complete user flow and test. These concepts addressed our key issues with different solutions. 

 

INSTRUCTION CONCEPTS

1. Complete Directions with Icons

2. Abbreviated Directions with Icons

3. Complete Photo Directions

 

WEBSITE CONCEPTS

1. High-tech & Low-tech Interface

2. Choose Custom Features

SCAN0014.JPG

3. No Customization

 

 

USER TESTING

Instructions & Setup Usability

Using low fidelity paper prototyping, user flows of each concept were tested. Users were asked to connect the router by following our instructional prototypes as well as complete setup to the website.

 
UserTesting.jpg
 

 

CURRENT ASUS BRANDING

AsusBrand.png
 

 

BRANDING APPLICATION

ASUS Brand Update

To investigate the future branding application, we wanted to find out: do high tech users like the "hacker look" aesthetic? Different interpretations of high tech looks were assembled into mood boards and tested on computer science majors (identifying with our high-tech user group). They were asked the following word association questions: which mood board looks the most powerful, dependable, high tech, inviting, like the ASUS brand, and which interface would you would most want to use? The association results are shown below each board, scaled proportionally.

 
 

 

INSIGHTS

Proposed Look

Based on our findings, the proposed look for updating the ASUS website should be a combination of "Darker Tech" and "Minimal Tech". Between the two of these, the word association testing covers what the ASUS brand represents and moves the branding forward.  

 

PROPOSED LOOK POWERFUL / DEPENDABLE / HIGH TECH / ASUS / WANT TO USE

 

 

Branding Application

Study in Sketch

A high-fidelity mockup was made in Sketch of the website homepage and instructions to show how these styles could be applied to the ASUS brand. At the same time, we want to uphold the integrity of the current ASUS brand.

 
Screen Shot 2017-05-06 at 4.08.55 PM.png
 

 
Unboxing Experience Before and After

Unboxing Experience Before and After

Frontside of Instructions

Frontside of Instructions

 

INSTRUCTION REFINEMENT

Iterations and Final

After testing the extended instructions, it was clear that users found these instructions overwhelming and the web setup steps were unnecessary. There was room to condense the instructions and add a better hierarchy as seen in the following version. 

 
1.0 Instructions with Web

1.0 Instructions with Web

2.0 Instructions without Web

2.0 Instructions without Web

 

 
 

 

CHOSEN DIRECTION

Homepage Dash

After exploring different concepts with varying levels of customization, user testing showed that people want a hands-off approach: the website should not require any customization. This concept allows the homepage to give quick information about the most-used features. In addition, parental controls and the guest network can be turned on and off with the click of one button. For high-tech users, advanced settings can be found under the advanced tab or by searching at the top.

 
WebPreview4.png
WebPreview5.png
WebPreview3.png
 

RESPONSIVE WEB DESIGN

Cross-platform Application

Multiple platforms were considered for the design of the setup and website. Below demonstrates how the design would scale based on the screen size.

 

 

Project in progress, please return soon!