Jacob Chan

Back to work

Jacob Chan

Shopify

Educating the people through cards.

Role

In the Winter of 2017, I had the amazing opportunity to act as a designer on Shopify's Home team, the team in charge of the landing page of the admin app. Merchants using Shopify is faced with this page once they log in, every time.

On Shopify's Home page, a feed of cards is used to deliver information to the merchant, whether that be insights from their store happenings, drawn from the data, or announcements of new features. These cards are useful tools to deliver utility in a non-intrusive manner.

Problem

With such a great opportunity to teach merchants, one of Home's goals is to utilize opportunities to be a coach for the merchants.

Current Solution

Shopify Home

Shopify Home

The current solution is a relatively simple Home card that surfaces a random blog from a list of blog cards. There are two aspects with how this card behaves currently:

Why are these problems?

Random qualification is likely to serve an irrelevant blog post to the merchant.

A distinct design separates these "blog cards" from the rest of the feed.

Other Content

Shopify, apart from the Shopify Blog, creates other extremely valuable content for merchants, specifically in ecommerce, in the form of Free Guides. Along with this, Shopify's documentation is extremely helpful in learning about new features that may push you to start using the platform to it's full potential. Currently, none of these are being served.

Developing a Solution

Content

Content-wise, we took a look at the different content pieces available. Blog posts, Free Guides, and Help Documentation serve very different roles and purposes on various levels.

Shopify Content

Different Content, Different Purposes

Inside Shopify vs. Outside Shopify

When starting an ecommerce business on Shopify, there are different levels where people could use help. I've broken it down to a spectrum.

On one hand, there's the operational side. This side deals with how to use the Shopify app, and how to get to where you need to go to do what you need to do.

On the other hand, there's the more abstract and higher level side, more to do with outside of the Shopify platform, like how to market your products, and how to gain a large Instagram following.

Call to action

Documentation has a concrete action - to do the actions outlined in the article.

In blog posts and free guides, the point is moreso for learning.

Tone

The tone of documentation is very formal and objective, whereas blogs and free guides aim moreso to be marketable and appealing to customers, as well as leads.

Opportunity

One often overlooked feature of Home cards is the qualifications of the card. In essence, card qualifications answer the question: "Who will see this card? When will they see it?"

This, combined with Shopify's powerful backend, shops are targetable to a very granular level.

A set of cards - called introduction cards - target users when something new happens to them, and use that opportunity to teach them about that event. For example, the "abandoned checkout introduction card" swoops in when the user is encountering their first abandoned checkout.

Shopify Introduction

Abandoned Checkout Introduction Card

On these cards, the qualifications are perfect for this "teaching moment". Along with this, there are tons of content pieces specifically for how to recover abandoned checkouts, how to set up abandoned checkout emails within Shopify, etc.. What a great opportunity!

Do / Learn Paradigm

On cards like these, there are distinct calls to action, where a user can do an action immediately from the card. If we were to surface these pieces of content, we're giving the merchant options: read about the action first? or do the action first?

Visual Design - Proximity vs. Weight

According to Gesalt, elements that are close together are perceived as a group. Therefore, we'd want our "learning" portion of the card close to the "doing" portion of the card.

But how close is too close?

While being close is good at linking elements, by having too much in a group, users may feel bombarded by information and options, causing analysis paralysis.

From this, I've experimented with different levels of proximity:

Shopify Separate

Least proximate, least complicated

Shopify Floating

In the middle

Shopify Together

Most proximate, most complicated