P a g e 1

Extension Marketplace & Enterprise Website

Coburn Hawk • Director of UX

CASE STUDY • MAGENTOUX DESIGN

P a g e 2

MAGENTO CONNECTEXTENSION MARKETPLACE

90 DAY DESIGN & DEVELOPMENT CYCLE

P a g e 3

THE LEGACY DESIGN

Magento Connect was a single page buried deep in the Magento website.

If a merchant even knew about extensions, it was hard to know which extensions would work on their store.

It was harder for extension developers to upload & promote their extensions.

MAGENTO CONNECT

…

P a g e 4

PROCESS

USER TESTING & RESEARCH

WIREFRAMES & INTERACTION DESIGN

INFORMATION ARCHITECTURE

UI DESIGN

P a g e 5

The New Experience

The new marketplace provided a trusted destination for merchants to browse, research, and purchase extensions from 3rd party developers.

Magento Connect was moved onto it’s own code base and given it’s own complete site destination.

MAGENTO CONNECT

v2

P a g e 6

Search Results & Filtering

One of the key UX principles we always came back to was making sure merchants could find & compare extension that were most relevant to them.

The new search filtration allowed merchants to easily locate extensions specific to their platform version, price point, and business need.

MAGENTO CONNECT

v2

P a g e 7

MAGENTO.COMENTERPRISE WEBSITE DESIGN & RE-PLATFORM

ANOTHER 90 DAYS TO MAKE IT GREAT

P a g e 8

THE LEGACY DESIGN

The Magento website was not just dated in looks, it was hard to navigate & structurally broken as a CMS.

User testing showed visitors lost and confused at every click.

After the success of the new Magento Connect, I lead the UX team tasked with both the interface re-design as well as a complete re-platform onto a new Drupal CMS.

MAGENTO.COM A BIGGER PROBLEM

…

P a g e 9

PROCESS

PLANNING & USER TESTING

UI DESIGN WIREFRAMES & INTERACTIONS

LOW FIDELITY MOCK UPS

CMS LIBRARY

P a g e 10

The Multi-Site Approach

The organizing principle of the new design was to deliver the most relevant content in an easy to navigate architecture.

One giant site became what we called a Multi-Site Approach.

Context sensitive menus changed as users browed the new ecosystem, allowing a better definition of Magento & their product offerings.

v2

MAGENTO.COM A NEW ECOSYSTEM

P a g e 11

Clean Design, Clear Story

The updated navigation and information architecture came with a contemporary visual design.

Prospective merchants could understand the offering. Existing Merchants could find the apps & extensions. Developers could get the training they wanted.

Conversion numbers for new Enterprise clients went up.

v2

MAGENTO.COM A NEW LOOK

P a g e 12

Drupal CMS Platform

If you’re rebuilding everything, why not re-platform at the same time? The new CMS system was essential to the company.

Paired design & development were essential. Designers & developers sat together, sometimes designing right in the browser, to make the best experiences for end users. v2

MAGENTO.COM A NEW PLATFORM

P a g e 13

ThanksCoburn Hawk • User Experience