Opattern Enterprise

ABOUT

Oracle’s back office applications used to feel very stale and boring. The user experience was an afterthought. This was an opportunity to reimagine the experience through a design system refresh.

TEAM

Harish Vaidyanathan (UX Designer)

Harish Vaidyanathan (UX Designer)

Harish Vaidyanathan (UX Designer)

Harish Vaidyanathan (UX Designer)

Priya Kurani (UX Designer)

Priya Kurani (UX Designer)

Priya Kurani (UX Designer)

Priya Kurani (UX Designer)

Jillian Erhardt (Visual Designer)

Jillian Erhardt (Visual Designer)

Jillian Erhardt (Visual Designer)

Jillian Erhardt (Visual Designer)

Jillian Erhardt (Visual Designer)

Eli Makman (Visual Designer)

Eli Makman (Visual Designer)

Eli Makman (Visual Designer)

Visual Designer (Visual Designer)

Beth Morgan (Copywriter)

Beth Morgan (Copywriter)

Beth Morgan (Copywriter)

Beth Morgan (Copywriter)

Vernon Laquindanum (Copywriter)

Vernon Laquindanum (Copywriter)

Vernon Laquindanum (Copywriter)

Vernon Laquindanum (Copywriter)

Sonali Zaveri (part-time UX Lead)

Sonali Zaveri (part-time UX Lead)

Sonali Zaveri (part-time UX Lead)

Sonali Zaveri (part-time UX Lead)

CCB-redesigned

Research and Insights

Key Insights

Customer Service Representatives (CSRs) bounce between a lot of different applications to get their work done

insight-1
insight-2

Information density was critical for our users

Even a systemic visual overhaul and consolidation of patterns can help us make the software a whole lot simpler to use for the CSRs

insight-3

Design Strategy

We had established design principles for consumer experiences. However, we did not a specific point of view for our enterprise experiences. To ensure we had a common ground, we worked through a branding exercise as a team. The question we asked was...

If our enterprise apps were a

car-optimized

Car

plant-optimized

Plant

drink-optimized

Drink

what would it be and why?

Design Principles

We pulled qualities from the branding exercise which were the most important for the product to uphold and those became the guiding design principles. They were

  1. Flexible
  2. Accessible
  3. Familiar
  4. Unobtrusive & subtle
  5. Dependable
  6. Purposeful

Design Sprinting

As the interaction designer, I worked on understanding use cases, and translated them into wireframes, which were then picked up by visual designers. We went through a process of interaction and visual reviews before engineers picked up work.

Here were the gist of components we worked through.

  • Accordions
  • Buttons
  • Cards
  • Color
  • Forms
  • Graphs
  • Iconography
  • Layout
  • Lists
  • Loading indicators
  • Modals
  • Multi-step flows
  • Navigation
  • Notifications
  • Pagination
  • Tables
  • Tabs
  • Typography

The Design Process

We will take a look at this through one component, namely forms. The process was very similar as we approached different components and aspects of the design system.

Put together wireframes, rationale and guidelines

Put together wireframes, rationale and guidelines

Finalised visual design and behaviours

A peek at the new design system

Results and Impact

1. The product was rolled out during Oracle OpenWorld and the response since has been extremely positive

“The new C2M UI was a huge hit with SWGas today. They oohed and aahed (about 30 CSRs, Managers) and then got up and crowded around the screen during the break. Very cool to see.”

— From our VP of Product Management who was doing demos for clients and prospects.

2. In addition of our back office applications adopting it, this was also adopted by our internal tooling teams

BEFORE

insight-3

AFTER

after