Graham Slick

Every project UX, Design

ARRIS

A new ARRIS.com for the video and broadband technology company: the site map, wireframes, responsive layouts and page designs, at Story Worldwide.

When
2015
Role
Associate creative director
At
Story Worldwide, New York
For
ARRIS

In early 2015 ARRIS, a maker of video and broadband technology, asked for a new website, built in phases: the first phase had to make the biggest difference it could and pave the way for the rest. At Story Worldwide, Graham was the associate creative director on the new ARRIS.com.

The plan was brand-led and mobile-first, with the people of ARRIS throughout. Each page reads like a news story: a summary at the top and more and more detail as you scroll, from a product area down to a product’s specs. Clear navigation ties the company’s people, solutions, products and services together, and search is always at hand.

The work ran from the site map and the flows of the navigation and search, through annotated wireframes and responsive breakpoints from a large desktop down to a phone, to the visual design of each page template: the ARRIS Story, products, solutions, services, support, resources, contact and a campaign page for DOCSIS 3.1.

Roles Creative direction · UI and UX

The top of the ARRIS Story page: Together with our customers, we invent the future, in white and orange over dark gray rays; a two-column introduction; A technology company with a human point of view; and A legacy of firsts, from the first all-digital HDTV system to 14 technical Emmy awards
The ARRIS Story page, top
The Products page: six product areas from Content Acquisition and Cloud to Video Infrastructure, an orange contact bar, a choice of markets from Cable and Telco to Over the Top, the newest products and the footer
Products
The Solutions page: Our Solutions over a dark aisle of server racks, an orange contact bar and five solutions, each with a video
Solutions
The Services page: Transform how you deliver entertainment and communications, over a hand writing with a pen, then ARRIS Global Services and a grid of what it has transformed, such as 6800+ services projects and 3,000,000+ miles of HFC plant designed
Services
A product details page under an orange header: a hardware chassis beside the product name, then an overview, details, resources to download, solutions with videos, services and related products
Product details
The Support page: orange line icons for consumer support, drivers, user guides and batteries, then a dark grid of tiles for MSO and telco technical support, from membership and order status to repair services
Support
A campaign page, A Technical Migration Plan for the Evolution to DOCSIS 3.1: a white paper to download, a webinar and a deployment demonstration video, then interviews and white papers, and a button to subscribe for updates
A campaign page
The site map: main links for the home page, the company, solutions, services and products; secondary links for technical support, resources and contact; footer links; each box outlined by whether it is a new template, a new header and footer, an external link or a later release
The site map
Annotated wireframe of the homepage on a first visit: a banner for consumers, the main photo, solutions, services and products, campaign modules, social feeds and support, with eight numbered notes on what each part does
The homepage wireframe, annotated
The homepage wireframe at four widths: medium desktop and iPad at 1024 px, large screens at 1400 px and up, iPad portrait at 768 px and phones at 320 to 414 px, with red notes on what changes at each
Responsive breakpoints, from desktop to phone