Case Study: Re-designing RetailTower

A product design deep dive of a popular app for online merchants.

Re-designing the RetailTower web app was a fun, multi-month project that represented numerous firsts for me. The first few sections of this deep dive cover some foundational info about the project, but if you’re impatient to get to the designs, feel free to skip to The New RetailTower.com section below.

Why I Wrote This

At a little over 4,000 words, this deep dive isn’t easy reading.

I wrote it because I’d like to read more obsessively detailed writing by African product designers about what we’re working on. This is an attempt to lead by example. #showyourwork

It feels like the role of product design as an independent discipline is still relatively new within African tech startups. I’ve even seen it argued that for African tech companies, product design is unnecessary. I respectfully disagree. Even if they don’t have the formal title “product designer,” I believe there’re hundred of incredible people across our technology community toiling in thankless obscurity to ensure that the solution their team ships is appropriate, effective, and yes, even beautiful.

I suspect we’re a few years away from broad recognition of the value of product design. In the meantime, I’d desperately like to connect with the kindred spirits who care about this stuff. Who are you? What’re you working on? How did you make it, and what did you learn while you did so?

I believe there’re lots of us who want to grow in our craft, but before this can happen, we need to take the time to share with each other. It could be a long essay, a 6 second video of your process, or something as simple as a screenshot of a work in progress.

It is my sincere hope that this write-up inspires someone to also share their own work. And if you find yourself in a situation where your team doesn’t get it, and if you’d like someone with whom to learn and geek out about product design, please feel free to connect on Twitter at @equartey.

My Role and the Scope of the Project

I was the sole designer on this project, reporting mainly to the CEO of RetailTower, with frequent input from the rest of the team.

I re-designed the entirety of the web app, but didn’t touch the marketing website (retailtower.com).

This was a project I did outside of my full-time work hours.

Beyond simply designing the look of the new product, I also made recommendations regarding the product roadmap, customer support strategy, and other non-visual parts of the product that contribute towards creating an incredible experience for customers.

What I Wanted to Learn from the Project

1. I wanted to learn how to use Sketch: Sketch is tool for designing digital user interfaces. It’s arguably the tool of choice for product designers everywhere, including at companies like Facebook, Google, and Apple, and I had been looking for an opportunity to learn how to use it. The RetailTower project was my first project I designed entirely in Sketch.
2. I wanted to learn how to design a cohesive visual language that others could take and evolve with ease: Most of my other projects have been one-offs, but one of the requirements of the RetailTower re-design was that the RetailTower team needed to be able to extend the system by themselves, without my input, for a long time after the re-design. This was a type of design problem I hadn’t worked on before.
3. I wanted to learn more about the world of e-commerce SaaS solutions: Did you know that online merchants on Shopify, Etsy, Amazon, etc pay hundreds of thousands of dollars to third party app makers to provide value added tools and services? Despite the fact that the MEST Incubator, where I work, is home to 4 companies building tools and services to serve online merchants, I knew relatively little about this space. By working intimately with RetailTower, I hoped to gain a deeper understanding of this fascinating niche of software-as-a-service solutions.

About RetailTower

RetailTower is a web application that allows online merchants to publish store inventory from Shopify, Magento, and BigCommerce to over 10 other channels, including Google Merchant and Bing.

To fully appreciate the value RetailTower provides to online merchants, it’s important to understand how most people currently publish their products from one store to another. In order to publish their products to a destination, merchants must submit a file called a “feed” to that destination. For example, if a merchant wanted the products on their Shopify store to show up in Google search results, they’d need to create a feed of their Shopify inventory and submit that feed to Google.

Creating this feed by hand is time-consuming and can be extremely confusing, which is why thousands of merchants from all over the world use RetailTower to quickly create, manage, and submit feeds. The team is headquartered in Accra, Ghana, at the MEST Incubator.

The Goals of the Re-design

The goals of the new design were as follows:

• Make it easier for new users to create their first feed: The RetailTower team noticed that users who create feeds are a lot more likely to become paying users. The re-design needed to make it a lot easier for new users to create their first feed, and experience the value of RetailTower.
• Create a simple visual language that the team could easily apply by themselves to future pages: The first version of RetailTower was designed over half a decade ago. Multiple design freelancers added new elements over time, but the all-engineering team struggled to integrate those changes gracefully into a cohesive user experience. As the product evolved, the absence of a unified visual language resulted in clashing styles that could frustrate new users. The new design needed to introduce a simple visual language that non-designers could easily implement and extend.
• Increase the number of paying users: RetailTower makes money in two ways — monthly subscriptions (after a trial period, merchants can pay a recurring subscription to continue enjoying access to RetailTower’s suite of tools) and Assisted Setup (this is when the merchant pays the RetailTower team a one-time fee to handle the process of publishing their inventory to other channels). The new design needed to increase the number of merchants who pay for either benefit.

The New RetailTower.com

The re-design project included a large visual overhaul as well as numerous smaller, less noticeable, but no less important product updates.

Making it easier to create a new account

The old design of RetailTower (see below) required new users to jump through 6 pages to create their account, and some users were dropping off before finishing the process.

OLD RETAILTOWER: First page of the 6-step “Create Account” flow.

By identifying areas where non-critical steps could be removed or condensed, I reduced the account creation process into to 3 breezy steps. Our hypothesis was that by reducing the time it takes to create an account, fewer users will drop off in this part of the funnel.

NEW RETAILTOWER: First page of the new “Create Account” flow

An example of a “greeter” designed by Al Hertz for Gumroad.

I introduced a new repeating element at the very top of every page showing a profile photo of a staff member, and some explanatory text.

This element was inspired by the “greeter” element that Al Hertz introduced when designing Gumroad. In fact, Al’s simple, approachable visual language for Gumroad heavily influenced my work on RetailTower. The “greeters” at the top of each RetaiTower page do multiple things:

• Greeters literally give a human face to the product: Showing the name and face of a RetailTower team member creates a sense of familiarity and helps the user feel as if there’s a friendly guide throughout the product.
• Greeters provide real estate to display explainer text: Publishing products between stores is a surprisingly complex process, and it’s not usual for merchants to get stuck. Greeters provide a consistent way to explain what the merchant needs to do on the page.

A smarter “Import Products” flow

After creating an account, the merchant must now import their products into RetailTower. This process can be a little stressful for the merchant — their inventory is being piped somewhere, and they have little idea how long it’s going to take or if it’s going to throw any errors.

The new Import Products page includes multiple elements to improve the “import products” user experience.

• Import time estimate: Based on the number of products in the merchants inventory and the rate at which the products are uploaded, the page is able to provide a helpful time estimate, giving the merchant a sense of how long this will take.
• Import progress bar: The time estimate is reinforced by a visual progress bar that shows how much longer the import process with take.
• “Feel free to close this page”: In the previous version of RetailTower, closing the page before the import was finished would silently stop the import process. With the update, the import process continues even when the page is closed, and sends a helpful update email alert to the merchant. This is an example of a non-visual enhancement that improves the user experience.

NEW RETAILTOWER: The progress bar in action on the Import Products page as the merchant’s inventory is uploaded.

Improving the “Map Headers” flow

One of the most confusing parts of the onboarding experience for new merchants was the Product Mapping step. The copy on this page wasn’t doing a great job of explaining what this process was, and why it was important. Additionally, there were two seemingly redundant Calls-To-Action at the bottom of the page — “Save and Continue” and “Continue.”

OLD RETAILTOWER: Product Mapping page.

The new Map Headers page attempts to improve the experience of this page in a number of ways:

• Clearer copy: I updated the copy to make it clearer to new users what they’re supposed to do on this page.
• Video explainer: Since this topic is a little involved, I recommended that the team use a short video explainer to go into greater detail about why this step is important. An engaging video is a better solution than a long wall of text that people are unlikely to read closely. Note how the length of the video is explicitly stated (30 seconds) to increase the likelihood that people will watch it.
• Simple Call-To-Action: the two calls-to-action were replaced with a simple, single “Create Account” button to explain what happens when the button is clicked.

NEW RETAILTOWER: Refreshed, easier-to-understand Product Mapping page.

Better Onboarding: Helping a New User Create their First Feed

In the old RetailTower, new users were thrust into the RetailTower dashboard right after creating an account.

OLD RETAILTOWER: Users are sent to the RetailTower dashboard after they create their account.

This old dashboard had an overwhelming number of options, and it wasn’t immediately clear what a new user should do next.

With the new RetailTower, users who create an account are taken through an onboarding process with a single goal: help them create their first feed.

The onboarding flow begins with an overview of the feed creation/submission process. This is because many merchants come to RetailTower with little understanding of exactly what they need to do to have their products appear on other channels.

Here’re two designs of the page that educates the new user about the process — the team intends to A/B test each page to see which does a better job of convincing the user to create their first feed.

The first design uses a short video explainer to get the message across.

NEW RETAILTOWER: Version A of a page that explains how to publish your products onto other channels.

The alternate version of the same page uses text instead.

NEW RETAILTOWER: Version B of a page that explains how to publish your products onto other channels.

Upselling RetailTower Subscriptions

RetailTower makes money in two ways — monthly subscriptions (after a trial period, merchants can pay a recurring subscription to continue enjoying access to RetailTower’s suite of tools) and Assisted Setup (this is when the merchant pays the RetailTower team a one-time fee to take over the process of publishing their inventory to other channels).

The new onboarding flow does a much better job upselling new merchants on the Assisted Setup option.

Choosing the “Let us take care of it for you” option brings the user to this page.

There’re multiple elements here geared towards helping RetailTower make more money per customer:

1. Add multiple channels to cart: Before, merchants could only select one channel at a time for Assisted Setup. Now, merchants can select as many channels as they’d like to publish their inventory to, and the page updates the price boxes beneath.
2. Upselling tooltip beneath each channel: There’s a tooltip text beneath each channel to explain to the merchant why they want to publish their products to that channel. Why is this important? The more channels a merchants selects, the more money RetailTower makes, so the page needs to work hard to explain the value of each channel (eg. the tool tip for Amazon could say something like “Publish your products to Amazon and get in front of the millions of people who shop on one of the world’s largest market places every day.”)
3. Standard Assisted Setup vs. Lite Assisted Setup: In the past, there’ve been issues with merchants not understanding that there’s a difference between the Assisted Setup service (where RetailTower simply sets up the accounts on other channels) and the core RetailTower product (which requires a subscription to tools that help the merchant manage their feeds). I recommended that the Assisted Setup service should be split into Lite and Standard. The former option is the original no-frills service, while Standard provides the added value of a discounted subscription to the RetailTower product. This way, there’ll be be no confusion about exactly what merchants are signing up for.
4. Social proof: The page includes social proof in the form of real reviews from RetailTower’s page on the Shopify app store. Reviews such as this increase the likelihood that the user will go ahead and make a purchase on this page.

After selecting one of the two options on this page, the user is taken to a page where they must declare if they already have an account set up. This is because the RetailTower team needs to know in advance if they’ll need to set up new accounts from scratch, or simply connect existing accounts.

NEW RETAILTOWER: After choosing the channels to which they’d like to publish their products, the merchant declares whether they already have accounts set up for those channels.

It is only after this step that the user is sent to the dashboard.

Creating a new feed

So what happens if the merchant decides to create a feed by themselves? The new RetailTower makes the process as simple as possible. First, the merchant must select one channel to which they’d like to publish their products.

After they select the channel, RetailTower confirms if they already have a account on that channel. In this example, the user selected Google:

NEW RETAILTOWER: Modal asks merchant to confirm if they already have an account for the selected channel.

If the merchant doesn’t already have an account, RetailTower quickly explains how to create one.

NEW RETAILTOWER: This page explains how to create an account on the desired channel.

See that outline button that says “I want RetailTower to take care of this for me”? That’s yet another upsell. It leads to the page below where the merchant can pay RetailTower to take care of this headache for them.

Let’s imagine the merchant already has accounts set up and still wants to create the feed by themselves. After they confirm that they have an account, they must select which products will be in the feed file.

NEW RETAILTOWER: Merchant specifies which products should go into the feed file.

When they decide to proceed, we hit them with one of the most compelling upsell moments yet:

NEW RETAILTOWER: Upsell modal when merchant is about to create a feed.

The modal uses multiple tactics to compel the user to make a purchase decision:

• “Upgrade to continue enjoy access to this feature”: The modal explains that this is a premium feature, and that the merchant is currently on a free trial. If they’d like to continue having access to this benefit — publishing their products to another channel — they should consider joining a free plan, otherwise they’ll lose access to this benefit. Since the user has already invested in setting up everything, they’re a little more likely to pay to maintain their settings than abandon the process.
• Simple pricing: For context, this is what the old pricing page looked like:

OLD RETAILTOWER: Pricing page.

Rather than showing all these numerous options, the modal instead looks at the number of items in the merchant’s inventory, and recommends the first price plan for which they quality. Providing one single price point prevents choice paralysis and increases the likelihood that the merchant will upgrade to a paid plan.

• One-time deal: The modal mentions a one-time special discount to sweeten the deal and convince the merchant to upgrade.
• Social proof: If the merchant would like details about everything covered in the plan, clicking “What’re all the benefits of the X plan?” replaces the social proof box on the left with those details:

NEW RETAILTOWER: Social proof on the upsell modal.

Submitting your feed

This is what the feed submission page looked like on the old ReatilTower.

OLD RETAILTOWER: Feed submission page.

There was little context to explain exactly what to do. The new page takes care to explain exactly what the merchant needs to do to submit the feed and ensure that their products get published the the different channels.

NEW RETAILTOWER: How to submit a feed with a link

NEW RETAILTOWER: How to submit a feed with FTP

NEW RETAILTOWER: How to submit a feed with web upload

Making advanced features easier to understand

RetailTower comes with advanced settings to help veteran merchants make very fine-tuned updates to their inventory. In the old RetailTower, these advanced features were under a section with the vague name Addons, and the page’s interface was extremely difficult to understand, resulting in multiple conversations with the RetailTower support team.

Considering that the advanced features were paid upgrades, it was important to make their value propositions very easy to understand. Every merchant who left the advanced feature section in confusion was one less source of additional revenue for the team.

I recommended that the team rename the section Product Rules, and that we put a ton more effort into helping merchants understand how to unlock the massive value hidden within these previously obscure features.

The Product Rules features are honestly best explained with a demo video, but here’s a snippet of the kinds of design decisions I made.

NEW RETAILTOWER: First step of the Inventory Rules feature.

The image above shows the first step of the Inventory Rules feature, which allows merchants to automatically update product details of their inventory when they import them. (A merchant might want to do this to optimize their likelihood of their product showing up in the search results of different marketplaces.)

Before, the Inventory Rules section was a confusing barrage of unlabelled text field and checkboxes. I completely re-organized the logic of the feature to mimic a sentence: If [starting condition], then [make a certain change to the product description]. This implementation was highly influenced by the “recipes” idea popularized by IFTTT as well as Intercom, which I genuinely consider to be one of the best designed products on the internet.

Tapping the “+” allows the merchant to add more clarifying AND/OR statements to the Rule. Again, this interface execution comes straight from Intercom.

Once the rule is live, a LIVE pill shows up to clearly signal that it’s active. You’ll realize that at each stage of the process, the buttons at the base of the rule card change to reflect relevant actions. When creating the rule, the options are Cancel, Save as draft, and Save and set live. When editing a LIVE or active rule, the buttons become Cancel, Deactivate, and Save.

Again, there’re lots of moving parts to the advanced features UI, but I’ll just show one more solution:

This is the interface for the Title Optimization advanced feature, which lets merchants automate the process of mass-updating product titles.

The previous implementation of this involved lots of text fields and dropdowns. Instead, I advocated for a complete re-thinking of the flow. The new implementation now uses a drag-and-drop system that allows merchants to simply assemble the new title structure almost like lego blocks. The merchant simply grabs the title attribute (eg. Brand) and drags it into the grey workspace. Below the workspace, a sample title section displays what the new titles will look like.

Stuff I struggled with, and would do differently

Like I mentioned at the beginning of this deep dive, this project represented lots of firsts for me — there was a lot I struggled with.

1. Sketch symbols and text styles: In hindsight, I should have taken the time to properly learn how to use Sketch symbols. Using Sketch symbols and text files properly would have saved me a ton of time and helped me experiment with more explorations.
2. Sizing, spacing, and alignment: I’m embarrassed to write this because it feels like such a basic thing I should know, but I really struggled with figuring out how to keep visual elements the correct distance apart. I eyeballed more than a few elements :/. I tried looking up how to use grids, but all the resources I found simply introduced the concept of a grid and nothing else. If you’re a designer who knows how to use a grid for product design/knows how to keep everything aligned on the artboard and you wouldn’t mind sparing some time to walk me through it over Skype or video chat, I’d be so grateful! My email is equartey at gmail and I’m on Twitter at @equartey.
3. Talking to actual users: The RetailTower team gave me access to their customer feedback system, and the written responses there heavily informed my work, but I never did a proper user interview, and this continues to haunt me. The entire team was pressed for time, but I sincerely wish we had had the room to interview users, and even test a prototype with some of them before implementing the new design.
4. Multiple iterations: I wish I had had the time and bandwidth to do multiple explorations of every page. Again, I was working on this project off the clock so there was limited time I could spend on it, but whenever I went back and re-did a page after feedback from the team, the resulting solution was always stronger.

What was the impact of the design?

The RetailTower team is actually implementing the design right now, so we currently don’t have data about how the re-design influenced the company’s metrics. I’ll update this section when we have some numbers!

Thank you

I’d like to end with a few than yous.

Thank you to Meng To, author of Design + Code, the Sketch tutorial I used to learn the basics of Sketch.

Shout out to Al Hertz, as well as the team at Intercom; their respective product design work helped me solve some of the knottiest interface issues for this project.

And finally, a HUGE and sincere thank you to my former colleague Averi and the RetailTower team for the opportunity to work on this! Thank you so much for putting up with my Sunday afternoon calls, for patiently walking me through things that were painfully obvious, and most of all, for trusting me with this project. It was an honour and a privilege :)

Do you have questions about the design process for this project? Have tips for how I can be better at Sketch or product design? Please get in touch via email at equartey at gmail and via Twitter at @equartey.