Hybris Marketing Escalation

Hybris Marketing

Project Overview

SAP Hybris Marketing Cloud is an end-end marketing solution designed for Marketing Managers to Create, Monitor, and Optimize Marketing Campaigns. However, it turns out that the current build is not satisfying users' needs regarding its functionality and usability. After many complaints, we were assigned to this project to redesign Hybris Marketing with the goal of providing a smoother, more intuitive user experience with UI refreshment and task flow improvement. In this project, I collaborated with 5 other UX designers and 1 researcher on all phases including Immersion, Research, User Story, and Design.

Project Type: Product Design

Role: UX, UI, Research

Duration: May - Aug, 2018

Tool: Sketch, Keynote, Photoshop

End-to-End Process

Immersion

Domain Study - "What is Marketing Campaign Management?"

Original Design - "What's wrong with the current platform?"

As mentioned above, this tool is designed for marketing managers to create campaigns and optimize performances. However, more and more users have been converting to Marketo or Mailchimp from Hybris. According to the usability testing report conducted by the IT department, users are escaping from Hybris as the current design & build is unable to fulfill their business needs.

Research

Research Process - “How do we get closer to our users?“

Expert Interview

4 Marketing Experts

Demographic Investigation

20+ Linkedin Profiles

Comparative Analysis

8 Marketing Tools

Workshop

2 Observation Sessions

User Persona - “Who's our user?“

User Journey - "What's a user's typical day look like?“

User Story - "How does the user interact with the system?“

Design

With all the research findings mentioned above, we were confident enough to step into the design phase. However, the design is an evolutionary process, which means nobody would point out an explicit direction for us and all paths would remain to be discovered. All we knew at this time was WHAT(problem) and WHO(user) without knowing WHERE(screen), WHEN(flow), and HOW(solution). To convert research findings into design solutions smoothly, we took to a series of design activities to drill down to the final solution.

Information Architecture - "What does the system structure look like?"

The first thing that we did in the design phase was clarify the hierarchy of different functionalities by creating this Information Architecture diagram. IA is essential as it would not only reveal what was ahead of us but also trigger our thoughts for task flow. Along with the design progress, we kept evolving IA as well to calibrate our design track consistently.

Hand Sketches - "What's the first image in our minds?"

As a part of brainstorming, all designers in the team drew Hand Sketches to quickly depict our ideal mental models for 5 key modules: Overview, Campaign, Segmentation, Customer Journey, and Analytics. Then, we discussed everyone's ideas and picked the best practices as starting points for further iterations.

Wireframe - "From where to where?"

We next moved to wireframing to proceed with final designs from our initial concepts. In this step, each of us took charge of one module out of five and created wireframes to clarify screen content and task flow. Below is an example of a wireframe created for Segmentation.

Design Iteration - "Anywhere to improve?"

After hi-fi screens were generated, we started usability testing sessions right away. Along with receiving feedback from end-users, we kept iterating our design across all modules. Here is an example of one iteration cycle that I created for the Segmentation module. After 11 iterations, we approached the final solutions.

Hi-fi Design - "What's the final look?"

Into The Future

Although we made significant progress so far by fulfilling the desired requirements, our proposal was limited by both the design guidelines and technology available. While waiting for more clarity on next steps, we decided to take action in advance to bring Hybris Marketing to a higher level from a UX and UI aspects.

More Appealing UI - Fiori 3 Adoption

Since the proposal needed to follow SAP Design Guideline (Fiori 2), not all UI elements necessarily fit our ideal landscape. As UX designers, we were motivated to jump out of the box and embrace the future. That's why we decided to jumpstart collaboration with the concept team and camp up with a fresh, revolutionary UI based on Fiori 3 - the next generation of SAP design language, which was still in its infancy.

More Simplified - All-in-one Information Flow

During the design phase, we realized that more than half of the complaints of the current experience were caused by overwhelming, disorganized information. So on this next-generation vision, we further optimized the information flow, so that most essential information will be received by users at first glance. Here is an example of using the all-new dashboard to help manage users' marketing campaigns.

Smarter Assistance - Copilot Chatbot

Empowered by Copilot - SAP Conversational AI, we decided to bring virtual assistance into our storyline to elaborate seamless interaction and data integration.