Omni by Infobip
As one of the world’s largest SMS providers, Infobip's platform provides push messaging services to millions of users globally. The rapid growth across many of its industry verticals lead to the creation of multiple independent SaaS applications. This project introduced the challenge of unifying all these verticals into a single universal platform. The solution was the introduction of Omni, a visual canvas builder that allows users to create multi-channel, multi-threaded campaigns.
The Project
The goal of this project was to simplify the complex. Through comprehensive research and a highly responsive front-end software solution, our team created a campaign builder with customizable UIs to help users maximize their use of the software and better understand their campaign effectiveness. Additionally, we created a design system that Infobip could use to standardize their product for all user personas.
The Research Phase
I joined the Omni project, right after the team had gone through the early stages of the UX design process. During my onboarding, I learned that the project had began with an extensive research phase that included a Design Sprint, a 3-week onsite with the client, and competitive research, just to mention a few practices. All of the information gathered during the research phase was gathered, synthesized, and later put to use as we continued to design the campaign builder.
Component Inventory
The goal of creating a product like Omni was for Infobip to consolidate a variety of solutions into one platform. In order to preserve the features that were important and de-prioritize the ones that weren’t relevant, we created a component inventory document. The component inventory, allowed us to prioritize and keep track of the status of each one of the components we designed. Additionally, the inventory provided detail on the location of the component within the platform, which allowed us to see relationships between components at a system level.
Whiteboard Wireframing
Followed by the component inventory, we started building user flows that helped us clearly mark the user journey and important touchpoints of the campaign building experience. We used high-fidelity whiteboard wireframes as a lightweight prototyping method that allowed us to keep an experience-first focus and quickly walk our clients through interactions and flows without adding visual design too early in the process.
Component Design
The whiteboard wireframes and the component inventory gave us a pretty solid understanding on how to approach the visual design of the component. The Omni visual design system was intended to elevate the utilitarian aesthetic of previous Infobip products, while leveraging well known material design patterns to increase familiarity and ease of use. The visual language introduced geometric patterns to represent different aspects of a campaign and a cool color palette that inspired efficiency, focus and clarity.
High-Fidelity User Flows
With the component library and high-fidelity whiteboard wireframes done, the next step was to add higher fidelity to the user interface of the entire user journey. The high-fidelity UX flows helped us map out specific areas of the campaign building experience, streamline the use of UX patterns and plan for potential error states.
Multi-Step Campaign Automation
Our UX efforts heavily focused on simplifying the logic and paths of building multi-channel, multi-step campaigns. After multiple weeks of UX strategy and planning, our next task was to design a UI that could make rich campaigns lightweight and more manageable for users.
The Visual Canvas Builder
In order to make the experience more intuitive, we introduced the visual canvas builder. The canvas allowed users to dynamically interact with different portions of a campaign, giving them the ability connect, drag and highlight components, as well as zoom in and out to see the campaign at varying levels of detail. The campaign cards also provided high-level information regarding the channels and methods of communication used at specific points of the campaign. Additionally, admins had the ability to display analytics on hover.
The Contextual Side Panel
In order to reduce cognitive load and give users the ability to edit components while keeping a track of how changes impacted the overarching campaign, we introduced the editing side panel. The tools and information displayed in the panel were contextual to the components that were selected on the canvas.
Channel Integration Custom Iconography
Shape and geometry played a big role in the visual design of the Omni platform. In order to elevate the design of the platform and help users quickly scan through options, we created custom iconography that was relevant to the types of workflows users were building. The icons in the system were designed to be used as shortcuts on the contextual side panel and to indicate channel integration on campaign cards.
Advanced Optimization
Omni’s built-in logic helps campaign-makers create events that trigger automated responses based on user responses. Our team collaborated with Infobip to better understand the use of the automated response feature and optimize the use of IF and THEN statements to help users get the best out of Omni.