OBJECT-ORIENTED UX

Role: UX, UI, & Research • Timeline: 3 months • Scope: Design System

Problem

Design and development teams are often working in silos
Inefficient design and development processes that are not based on patterns and reuse
Bloated code that is hard to maintain
No design system shared across teams

What is Object-Oriented UX?

The object-oriented UX (OOUX) framework has been created by Sophia Voychehovski. This framework approaches website design as a holistic system and focuses on reuse of elements. It’s also deeply rooted in users’ mental model, which helps us design and build systems that could be easily understood and used by our customers. This design approach lays a solid foundation for creating a design system (style guide) and shared language between UX/UI, front-end engineers, and back-end engineers.

Sophia came to Macy’s to give our UX team a training workshop in OOUX.

Most Frequent Shopping Tasks

12%

Browsing

Browsing for inspiration or to kill time. Looking for what’s popular, what’s new, or what’s on sale.

Researching

Collecting information, looking for the right combo of price and features. Flagging and comparing items of interest.

40%

Purchasing

Buying replacement items or items she has researched. Goal-oriented behavior, she wants to be in and out quickly.

User Scenario

We created an example story board that included the shopping tasks of browsing, researching, and purchasing. In this scenario, they happen sequentially, but in real life, these tasks might span over a coupe days or weeks.

Kim’s hobby is to bake cakes for friends and their kids’ birthday parties.

Kim has been busy and she’s been meaning to upgrade some of her utensils.

While waiting at a doctor’s office, she browses the Macy’s website for ideas.

Kim finds a KitchenAid mixer that she likes, but the price is too high.

A week later, Kim receives and email about a Kitchen Sale at Macy’s.

She finds out that the mixer she wants in on sale and she purchases it.

Defining the Objects

To define objects, we analyzed user scenarios and task and extracted nouns from them.

Kim wants to buy a stand mixer
She likes the KitchenAid brand
She browses categories on the Macy’s website
Kim saves the items she likes to a wishlist
She places an order for a mixer
Kim uses her credit card to pay for the purchase
She has the mixer shipped to her home address

Object Map

As the next step, we defined content, metadata, nested objects, and calls to action (CTAs) for each object and prioritized them. Then, we defined whether objects appears on the website as modules, lists, or detail pages.

Module, List, and Detail

Each object may be represented in up to three states: module, list, or detail. These states do not change the meaning of the object. Instead, they vary the level of detail that is revealed based on the context in which the object appears.

Module

List

Detail

Wireframes

We fleshed out the objects with UI elements to create a set of wireframes that covered the browsing, researching, and purchasing experiences.