Webkinz Dock
Late 2006 - Early 2007
Interface & Interactive Design
On a humid August afternoon in 2005, I looked over the shoulder of who would soon be my boss. We were wrapping up my interview, and he invited me to take a look at an early version of Webkinz. As he navigated to the last section, a nagging curiosity got the better of me as I pointed to the Dock and asked, "That's temp artwork, right?"
It wasn't.
After earning my keep, I fought for, and got my shot at overhauling a large portion of the site's main user interface. The centrepiece of which is the Webkinz Dock, which serves as status indicator, inventory management, and site navigation.
Although preceded by many wireframes, what really sold the project was this interactive demo I built of the functionality we were proposing:
- Try the following:
- Click the status bars.
- Press the 'Get Items from Storage' to see filter menu.
- Click the KinzCash and KinzTime.
- Hover over some of the item icons and buttons.
- Switch between tabs
Features
-
Animated Status Bars
Any change in status is animated. Color transitions are calculated on the fly. Text appears outside of the bar when it can no longer fit inside it. Overall, easy to interpret at a glance. -
Tooltip Warm-Up & Cool-Down
When a user hovers over a control, a tooltip invoked after a short delay, but subsequent items show their tooltip immediately. The inital delay is reinstated if no tooltips are shown after a buffer period.
-
Flexible Readouts
The KinzTime display is usually right-justified to fit within the bounds of the Pet Info Card. But if the KinzCash count surpasses eight or nine digits, the KinzTime display is gradually pushed along, and becomes left-justified. -
Tooltip Positioning
When tooltips are invoked, the indicator arrow is always positioned on the top centre of the control they point to. Text is also centred, unless it runs into the edges of the screen.
-
Pixel-Perfect Positioning
All elements including text baselines rest on whole pixel values, preventing Flash's tendency to smudge or blur them. Even runtime animations ensure that elements always appear crisp. -
Tab Ordering
When tabs change, they are all visually reorganized to maintain the look of cascading file folder tabs.