SAMBA.AI

CASE STUDY
PRODUCT DESIGNER, 02/2019 - Present
Full-time cooperation on-site

Product

Web app helping marketing teams of midsize e-commerce digital platforms to automate personalization with help of AI. Algorithms automatically identify relationships between audience segments and product offering.

Interface offers management of campaign lifecycle, from identification of audience segment, through creating assets and multistep workflows to evaluation of performance and diagnosis of the purchase data.

Company and the team

Company background: Funded startup with strong local presence in a sector of e-commerce digital marketing. Single UX designer with a full-time dedication to work on user interface of a web app.

Team: Multidisciplinary small team (10-20 people). Product team management adopted agile methodology to project management with 2 week sprint cycles. I was in close cooperation (almost daily) with Frontend engineers and Head of Product to iterate over prototypes and solutions. 

Role

The intention behind hiring the Product designer was to refactor the UI to improve navigability and discoverability of options, reduce friction in task accomplishment and match the UI to mental models and use cases of the users.

As a self organized Individual Contributor, I proactively proposed solutions with the next projects based on cost/benefit analysis and agreement with PdM (before we started with roadmap).

I carried the Usability risk - my primary concern was to be sure that the users expectations from the output of the features are met.

By evangelizing Jobs To Be Done approach, I helped to reframe the perception of how to look for a real demand when building features 

PROJECT EXAMPLE

Flow Campaigns
Flagship feature designed with flexibility in mind. Visual workflow editor for automating series of actions in a form of oriented graph. Graph represented the chain of nodes with conditions and actions for multichannel messaging.





Problem: Scale of the campaigns quickly outgrew the tool's capacity to comfortably manage the moving parts. Verbose representation prevented from seeing the big picture. Redesign of the interaction with the editor was essential to give users a confidence that campaign set up with complex structure is correct.

Samba.ai blog published interview with me, which takes a deep dive into problems and benefits for a user. 

Mobirise

Preview of data snapshot created in Google DataStudio

Data-Informed Decisions

Process: I fetched usage data from all accounts through internal API using Postman to understand the scale, the distribution of campaign elements and potential errors in campaign settings.

To create useful perspectives on usage data I used Javascript library (specifically JMESPath.org query language) and fed Google Datastudio to visually represent the prepared data.

Usage: Detected user accounts with potentially incorrect campaign settings were contacted by our consultants to fix the issues or clarify the intentions with campaign settings. Details from interviews were good source of usability feedback.

Revealed outliers, such as campaigns with 25+ nodes were perfect testament of the degree of complexity that users handled with the feature.

Distribution data pointed on excessive usage of certain type of nodes. This pointed us on specific campaigns to investigate applied patterns and understand the campaign concepts in the context of particular e-commerce sector.

Results: 
- Improved navigation in the structure of a campaign through compression of the graph elements, introducing colors and drag and drop panel with canvas

- Incorporating an interaction pattern that was not present brought a new value to an end user - campaign "prototyping". Consultants can now outline the entire structure without the need of ground-level details, iterate over campaign concept with Marketing Directors. 


This interaction transformed and extended implementation tool into collaboration and prototyping one. As a result the rate of risky alterations (after the campaign was activated) was reduced. Editing activated campaign requires delicate handling and is usually a source of irreversible consequences.

Before 
At each step, user would have to fill all the details before moving on to the next step in the chain. Also complex graphs could not fit into the viewport and invisible IDs of nodes hindered system readability therefore causing time consuming doublecheck.

After
"Prototyping mode" was introduced. Users can now outline the whole structure effortlessly. Drag&drop side panel represented affordance where to start with. 

Process (applied to Flow Campaigns and in general)

Various visual thing tools enable me to move through levels of abstraction to understand, develop and communicate design implications. Below is my standard multistep process to safely progress down these levels. Some steps might be omitted if the decisions on that level are deterministic.

Below you can see preview of assets gathered from multiple projects.

  1. Research
    Usability Testing, Surveys and Data analysis to 
  2. Concept Maps.
    Exploring and understanding interdependences and essential parts of the system 
  3. Flow Maps and Information Architecture
    To structure the end-to-end user flow and touchpoints architecture

  4. Wireframes
    To further develop the interaction using UI components and to discuss the trade-offs
  5. Interface Design
    Application of design system and documenting desired behavior

Design System

System was constructed with scalability and autonomy in mind. Ideally Frontend developer should be able to build the screens almost from wireframes/quickly baked UI prototype and designer course correcting visual aspects if necessary. So both can devote full attention to logic when creating interface together for 90% of their time. This was crucial for a team of 2-3 (1xDesign, 2 FE dev) people owning the Frontend layer.

Design system definitely increased the speed in front end development by reusing library components and through formulated interaction patterns (explicitly and implicitly).

Mobirise

Build your own website - Get now