Designing A Shopify For Dummies

Some users need to be led by the hand, all the way.

The Nigerian economy is a vibrant, dynamic, and highly competitive system. Teeming with ambitious and resilient individuals who neither know how to give up nor slow down, it is the entropy of survival, and it’s not easy.

It is also characterized by inefficiency across the board.

This inefficiency was experienced in five critical areas of their business operations:

1. Inventory
2. Market visibility
3. POS processing
4. Payments
5. Purchase

Disclaimer

This article will not deal with the details of how we went about solving this problem. Rather, we will be looking at a secondary problem that I, the designer, had to deal with — users who would ditch Shopify in the first two to three minutes of trying to use it for the first time.

Before I continue, I’ll like to point out that I was one year and a few months in product design and UI/UX design when I took on this project, and there are many things I would do differently four years later. However, I felt like sharing my thinking back then.

So, here was the problem

Multiple-process apps like Shopify require a level of technological exposure that over 80% of the Nigerian market we were building for did not have. Most of them were great business people who know the ropes when it came down to simply buying and selling, but who had neither the motivation nor the experience to use platforms like Shopify — even though they needed it.

As far as components and UI go, Shopify is fine, if, for instance, you know what the term “variant” means, and more importantly if you are used to filling forms online or on your mobile phone.

We had to overcome two precise problems:

Problem 1

Most of our users only know the basic use of the mobile phone, like making calls, sending SMS, Whatsapp, and maybe Facebook and IG. Even the Banks are still struggling to get customers to download their mobile apps, to reduce the crowds at the ATM stands and in their banking halls. And yes, many people here still order yellow cabs rather than Uber or Bolts even though the latter are way cheaper as well as more convenient and comfortable options, simply because to them, it feels easier than working the apps. I know a friend who has been the CEO of a successful haulage firm of over 250 employees with over ten trucks, who, up till this moment, needs 100% help with creating a Gmail account.

Problem 2

Even though they were conducting business very well for years, most of them were not familiar with formal business and transaction terminologies like “variants”, “reorder levels” etc.

We had an uphill battle to win against these two challenges.

The solution

We will have to take our users by the hand and lead them one field at a time, from signup to their first sales.

To do this, we will have to do three things:

1. Break the process down into small bits
   These sorts of users will run if they suddenly found themselves on a page full of input fields, options, and CTAs. If we want them to keep moving, we will have to serve to them one question at a time.
2. Clearly explain what each step will mean to them and their business
   Reduce confusion and discouragement by clarifying each step so that not only will they not be required to carry out actions they do not understand, they will be motivated to carry out the ones we require them to carry out.
3. Maintain an emotional connection with them as they go along
   Get as personal as possible. Let it be clear to them that you are both focused on, and with them every step of the way. Avoid technical-sounding field labels like “payment methods” and just ask simple questions like “how is she paying?”. Also, reward their effort wherever possible.

1 — Break the process down into small bits

Divide the form flow into stages to reduce cognitive overload

Signup flow screens are split between 3 types of information: Identity > Contact > Security

2 — Clearly explain what each step will mean to them and their business

Page titles and fields must have clear descriptions to clarify the purpose of the data they are requesting from the user. They should not only know why they should fill that field but also how doing so will profit them and their business.

Features:

• Each stage has a description of what it is about and where it leads into.
• Page titles are clear about intentions and a promised value.
• Field labels are direct questions rather than passive single-word labels.
• Examples are used in placeholders rather than no specific phrases like “Type here” or even using the field labels as the placeholder.

Sign-up screen showing description from landing page through User personal Identification page to their security information page. (I skipped the contact screen)

More features:

• Where needed, data fields have a description element under them to further clarify the meaning and the reason behind that field.

Business Id page (Fields have both labels and descriptions)

The second stage of Signup — business registration screens showing the landing page through the Business identification page to the transaction page. (skipped contact screen)

Product inventory screens describing variants in different contexts — 1) When a product is to be added to the inventory. — 2) When “New product” was selected in the previous screen and the name was given as “Leather Shoe”. — 3) When “Variant of existing product” was selected and “leather shoe” was selected from the inventory register

3 —Maintain emotional connection with them as they go along, reward their effort where possible

The interaction should be as human and smart as possible. Use their name and personal pronoun when asking questions. Reward their efforts with checkmarks or nice words where possible.

• Data from previous pages are used to construct page titles and field labels that connect more personally with the user. The name “Ayo”, for instance, has been collected on the ID page and used on the contact page.
• Customer data is also used to reference them. This cultivates a personal connection between the user, their customer — and the app.
• Instead of using dead words like “first name”, “country” or “payment method”, simple questions are asked, like “what is your first name”, or “how is she paying?”
• A checkmark is used to reward the user’s efforts in getting through stages. This will encourage them to get to the next stage with a positive attitude and a determination to see it through.

During signup, the user name has been collected and instantly used to personally connect with them

User progress is rewarded with a check or congratulatory statement to encourage them further

Not only is the user addressed by their name, but their customers are also referenced by their names and personal pronouns — Chito here, for instance, has been stored in contacts as a female

Conclusion

When the beta version of this app was released, the feedback from our users was both positive and specific. One of the main highlights was the fact that they did not call us to ask for directions on how to proceed.

As I recall, one of them called me on Whatsapp and said: “Wow! I love the description for everything, it makes it very easy to understand”. You can imagine my excitement then, my first product design to reach the beta stage was getting a few thumbs up. LOL!

Fast forward to five years later

I have grown in product and UX design, consequently, there are a couple of things I would do differently if I had to deal with the same problem all over again. And I will be writing about that in part two of this same title.

I would love to hear from other designers out there, what do you think?

You can find the other screens here