Skip to content

Helix

Self-service help centers for retail and member brands, on Oracle Service Cloud.

Client
Helix Business Solutions · Oracle Service Cloud
Year
2017–2018
Role
Application and CX Engineer — UX design and front-end
Platform
Mobile-first web · Oracle Service Cloud
Disciplines
Enterprise SaaS, Support UX, Front-end
Four mobile help-center screens side by side: Fanatics, Nike, NVIDIA and SAG-AFTRA.

Four mobile help-center screens side by side: Fanatics, Nike, NVIDIA and SAG-AFTRA.

Overview

Helix implements Oracle Service Cloud for brands with high support volume. I designed the UX of the customer-facing portals and built their front-end components in HTML, CSS, JavaScript and PHP. A help center is used at the worst moment in a customer relationship — an order that didn't arrive, a renewal that failed — so the job is to get people to an answer, or to a person, fast.

Task completion

~25%

faster after simplifying complex support workflows

The pattern

Many brands, one anatomy.

Every portal answers the same three questions in the same order: where do I search, what do most people come here for, and how do I reach a person. The brand changes; the structure doesn't.

That consistency is what made reusable UI patterns possible across client implementations — and why a new portal didn't start from a blank page.

01 · Search

The question comes first.

A single search field sits at the top, phrased the way a customer would ask — “How can we help you?”, “What can we help you with?” — before any menu.

Fanatics — search, then topic cards.
Fanatics help page on mobile: How can we help you? with a Search for Answers field above a list of topic cards such as Shipping and Handling, Returns and Order Inquiries.

Fanatics — search, then topic cards.

Nike — Quick Assists accordion.
Nike Get Help page on mobile: a single search field, then Quick Assists — an accordion list of Returns, Shipping & Delivery, Orders & Payment and more.

Nike — Quick Assists accordion.

NVIDIA — knowledge-base search, grouped links.
NVIDIA Consumer Support on mobile: language selector and knowledge-base search, then Top Support Links grouped under icons for drivers, orders, GeForce NOW and forums.

NVIDIA — knowledge-base search, grouped links.

02 · Top tasks

Two shapes for the same list.

Below search come the most common requests. When they're actions — cancel an order, request a price adjustment — they work as an icon grid. When they're topics, a scannable list of categories reads faster.

Costco — top tasks as an icon grid.
Costco Customer Service home: a search field, a Main Menu bar, and a ten-icon grid of tasks such as My Orders, Return/Replace Order, Price Adjustment and Cancel Order.

Costco — top tasks as an icon grid.

SAG-AFTRA — FAQ categories for members.
SAG-AFTRA Frequently Asked Questions on mobile: FAQ search with a button, then categories such as Audiobooks, Background and Commercials with their questions listed beneath.

SAG-AFTRA — FAQ categories for members.

03 · Escalation

Always a way to a person.

When self-service runs out, the next step is never hidden: a plain Contact us, a feedback prompt on the page itself, a persistent live-chat tab.

REI — a clear route to a person, and to feedback.
REI Help Center footer on mobile: Need more help? with a Contact us button, a How are we doing? feedback link, and an email sign-up.

REI — a clear route to a person, and to feedback.

Sportsman's Guide — collapsible topics and live chat.
Sportsman's Guide FAQ page on mobile: FAQ search with Search and Reset, expand all and collapse all controls, a list of collapsible topics, and a Live Chat tab.

Sportsman's Guide — collapsible topics and live chat.