I thought I was going to Disney for a few months to provide supplementary design and front-end development support during a particularly busy Christmas season.

By the time I left, I was guiding all Product and UX design for the Disney Store’s international e-commerce sites, including US, UK, France, and Germany.

A Unique Role

After arriving, I quickly identified opportunities to optimize various workflows. In one case, I wrote internal automation tooling that reduced a recurring 2-week design task down to a single afternoon.

Because I kept gently pointing out small tweaks that could be made to improve the user experience, I was asked to take a stab at redesigning high-friction pages, including the checkout flow.

Recognizing the full breadth of my background in UX, Product Design, and Engineering, the Heads of Product and Engineering carved out a unique cross-functional role for me. Serving as the strategic bridge between technical, creative, and business teams, all product and UX design went through me.

It was my job to shape the product experience, profile and advocate for users, and ensure technical feasibility without compromising the creative vision. Along the way, I continued contributing to front-end dev, visual design, and even some very light animation.

THE CHALLENGE

We overhauled Disneystore.com with a new visual design and UX flow improvements. But no sooner had we launched the refreshed site when a new, much wider-scoped directive came in for a comprehensive redesign: a server stack migration, total replacement of the front-end code, new creative direction, and new product features.

I advocated for accessibility and usability to be a focus. The core project goals and measurables were expanded accordingly.

MY ROLE

As the DisneyStore.com modernization & redesign project got underway, I partnered with the heads of Product and Creative to work closely with an outside agency through the ideation and exploration process. Once the agency was out of the mix, I led our internal product process of crafting UX flows, UI, and final branding design.

The customer base for DisneyStore.com had a wide demographic spread, from web-savvy young adults, to parents, to less technical grandparents who tended to bump on any feature that wasn’t super clear and easy to use. (If they couldn’t figure something out, the older folks would do one of two things: Give up, or make a day out of calling customer service.) I worked with the product manager in fleshing out User Stories and profiles.

On the development side, I led a from-scratch modernization of the site‘s HTML and CSS. When a typographer was contracted to design a custom font called Matterhorn for DisneyStore, I worked with him over several months to refine and trouble-shoot the creation and implementation of the webfont.

I coded front-end executables, teaming with two JS-dedicated developers to write and test the user-facing stack. (Each page on Disneystore.com is like an app, with rendering and functionality spread across the browser and a JSP environment tied to multiple back-end services.)

ANOTHER CHALLENGE

Managing four standalone, separately deployed e-commerce sites required massive redundant efforts, as each featured unique functional requirements, back-end integrations, and transaction providers.

I was responsible for working with the product owners overseas in the UK, France, and Germany, to adapt and implement DisneyStore USA’s UX and design updates within each country.

Simple text UI or boilerplate text updates could take weeks or months because they were gatekept in an old-school IBM database that only outside engineers could access.

When the big DisneyStore USA redesign got going, I pitched and drove an initiative to unify the US, UK, FR, and DE front-ends, reducing the support burden from four codebases to one.

I built localization and internationalization features into our new HTML/CSS/JS and moved all UI text out of old databases and into JSON files that our team managed. Copy updates for foreign sites became a simple matter of updating a text file.

In the end, we unified about 95% of the DisneyStore’s international front-end code. An update to US could flow out to other country sites with little more than a translation effort, a few custom CSS rules, and turning on a feature flag.

ACCOMPLISHMENTS

We launched a dramatically faster, easier to use, and more attractive DisneyStore.com that was met with excitement internally. More importantly, customer reaction was positive as well, with metrics improving across the board, sales among them.

Our international sites joined in the fun, and enjoyed the fact that they could get UX and feature improvements quickly, and at greatly reduced cost.

• UX & Research: Partnered an external agency to drive ideation. Worked with business and creative to define requirements and UX flows, establishing user profiles, journeys, and success stories.
• Wireframing & Prototyping: Sketched and designed digital wireframes. Built interactive prototypes in HTML/CSS/JS at increasing levels of functionality.
• Accessibility & Usability: Evangelized and spearheaded inclusion and ease-of-use, overseeing heuristic evaluations of each stage and user testing.
• UI & Branding: Collaborated with internal marketing creatives to brainstorm, iterate, and finalize UI and Disney brand/visual design.
• Cross-functional Consensus Building: “translated” between different teams, helped manage process with outside agency, presented solutions to executives. Basically, I made sure engineering, creative, and business stakeholders were all on the same page.
• Front-End Architecture: Led a clean-slate rewrite of the site’s HTML and CSS to dramatically improve desktop and mobile performance, lower maintenance costs, and pave the way for new features.
• Coding & Global Scale: Successfully scaled a single, unified front-end architecture to power localized experiences across the US and international markets.
• Tailored UX: Preserved region-specific customization, allowing each DisneyStore to maintain unique content, languages, and regional features.
• Efficiency at Scale: Established a common codebase that drastically reduced redundancy and yielded enormous development and maintenance efficiencies.

All of these changes laid the blueprint for what we did with Marvel, but that’s a story for another page.