Introduction

What Appbrew Does

The company makes mobile apps for D2C Brands using Shopify. Appbrew has built & currently running apps for 200+ D2C Brands.

Appbrew opens another sales channel for Brands using Shopify

Who are the Users

Appbrew targets Shopify Brands looking for another channel to improve revenue, retention, conversion etc.

inside a Shopify Brand

brand goals

more revenue & loyalty

brand identity & web parity

integration management

decision-making users

founders

brand owners

growth marketers

execution-only users

brand designers

shopify developers

What I worked on

My job was to understand the product priorities & problem space well enough from the user insights gathered by the team, to design the most effective workflow for Brands and their desired outcomes.

Team Members

Co-Founder (CTO)

Product Manager

Engineers

The Product

How the App connects to the Product

Every Brand on Shopify goes through an onboarding process to setup their App and go live, after which Brands manage their App directly on the Product – a web-based low-code app builder.

2 stages to build & manage apps

What's relevant for this project

As soon as the customer lands on the product, Help & Updates is available at the bottom-right across all pages, except on the AI-Assisstant Milo.

Landing Page

Milo

Always accessible from the same corner, in line with common practice

AI-assistant MIILO offers knowledge & guidance for all product actions.

Always accessible from the same corner, in line with common practice

AI-assistant MIILO offers knowledge & guidance for all product actions.

The Problem

How Appbrew & Brands maintain their apps

After going live, Appbrew & Brand are constantly in touch to resolve bugs & improve the app's shopping experience with new features.

issues Brands want to solve

bugs & tech glitches

custom design updates

integration setup & maintain

manage app store submissions

feature requests

updates & alerts by Appbrew

new features or integrations

critical compliance alerts

proactive fixes & improvements

best practices & strategies

operational status

How communication worked before design

Docs & newsletters were the most reliable methods to reach Brands. But, Brands still have to troubleshoot themselves, only when not reaching out via chat groups & regular calls for manual resolution.

Reliable channels are slow, while fast channels are unreliable.

What problems Brands were facing

Problem

Manual issue management is prone to human errors.

Problem

Context parity requires a lot of communication and is slow.

Problem

Generic newsletters don't always reach the right users.

Problem

No way to scale personalised alerts, updates & insights.

The Solution

PHASE I

How problems were addressed

The main goal is to streamline all communication on one channel for both – issues Brands report & updates Appbrew delivers.

The fastest possible ways prioritised to cover all necessary use cases.

Solution

One portal for Brands to connect with Appbrew for all types of problems.

Solution

One portal to send all central updates & critical alerts to all Brands using the product.

PHASE II

How problems were addressed again

The main goal was to use AI for a proactive & contextual help & news portals, bypassing complex logic or human support.

Portals built on the product are the most compatible with Brand context.

Solution

Chat to troubleshoot problems before raising support request.

Solution

Add Brand context for tailored response-resolution & alerts.

What constraints exist

Constraint

Low bandwidth for a custom solution, leading to delayed AI context integration.

Constraint

Human support has to be connected, as a necessity for complex problems.

Constraint

Project went live with old design system (showcasing new UI on this page).

Final Design

PHASE I

Portal Access

Given the global nature of help & news, a product-wide placement is used, following the common web-app practice.

Portal Positioning :

ITR-1

ITR-2

ITR-3

ITR-Final

Help is above all functions, making top nav placement break the hierarchy

Placement near Publish mixes two important action-types in one area

Positioning both separately scatters attention to global action-types.

A common & distinct position on the bottom-right is best for timely visibility.

Iterations visible on larger devices only.

A common & distinct position on the bottom-right is best for timely visibility.

Help & Updates Portals

A similar popup design used for both portals, despite the difference in approach & content.

Help Popup

Updates Popup

Timely Alerts

The Help portal was powered by Pylon & organised as per known issues.

Updates controlled by Appbrew, with complete control over the content.

Critical alerts appear when needed & still remain accessible under Updates.

The Help portal was powered by Pylon & organised as per known issues.

Updates controlled by Appbrew, with complete control over the content.

Critical alerts appear when needed & still remain accessible under Updates.

PHASE II

Access to AI

With Milo active, placement of AI-led Help is rethought to better integrate with Milo & signal a familiar functionality.

Portal Positioning :

ITR-1

ITR-2

ITR-Final

At first, Help's visibility can be absorbed entirely under Milo, as the function is ultimately powered by Milo.

To more prominence to Help, it can be shown as one of the actions Milo can perform, boosting its utility.

Help functions need upfront visibility, which can be managed & completed by Milo anyway.

Iterations visible on larger devices only.

Help functions need upfront visibility, which can be managed & completed by Milo anyway.

Help with Milo

With complete control over the experience, the capability of the portal can be highlighted better.

Milo Help :

ITR-1

ITR-Final

Milo-branded view sets the expectations, but loses focus.

A dedicated view doesn't emphasise Milo much, but focuses on actions.

Iterations visible on larger devices only.

A dedicated view doesn't emphasise Milo much, but focuses on actions.

Solving Issues

The internal workflows setup during Phase I are used by Milo to address all problems that may arise appropriately.

Guiding Users on Chat

Raising Support Request

Trained with product docs, Milo can address & guide all general queries.

For issues that need manual inputs, Milo can draft & raise a formal request.

Trained with product docs, Milo can address & guide all general queries.

For issues that need manual inputs, Milo can draft & raise a formal request.

Outcome

PHASE I

What Changed

Outcome

No missed issues raised by Brands with Pylon's built in management

Outcome

Reduced compliance or system issues, with proactive alerts right next to help

Outcome

Higher reported discovery & usage of new features highlighted via Updates

Outcome

Support team's workload reduced drastically, allowing faster & higher resolutions

PHASE II

What Changed

Outcome

Milo addresses 75% of routine queries, replacing manual support for those cases

Outcome

Issues resolved for Brands within an hour, instead of days by raising support requests

Outcome

Milo helps not only understand issues, but also plan & strategise solutions

What to Improve

Up Next

Milo-led proactive insights, strategies or automated actions

Up Next

Personalised industry-relevant recommendations

Up Next

Maintain memory across all past chat threads

Up Next

Milo "humanised" like an Appbrew member.