On-going Project
WebApp / Mobile App
Research / UX design / Prototype / Testing

About the Product

Firefly is a e-commerce enablment platform based in Pakistan, where you can create your website, add products and start selling them. It has a automated order fulfillment process and is integrated with couriers as well as with different payment gateways.


The Challenge

The current product had some form of interface, which enabled the company to build the websites for their clients. But they wanted to make it a self-service product, where user could make a website and on-board products by themselves. In order make it a self-service it was imperative to design a customer on-boarding process.

Although there were similar products in the international market, but they were expensive and in accessible (problems with payment method) for the local market. There was a need to make the product that was simple to use, since, people in the country are not that tech savvy.

This product had been scrapped a while ago, so, there was already some back-end architecture in place. And it was up to me revive the product with the help of developers and product manager.

Target Audience

Since, Firefly is an e-commerce platform for people in Pakistan. I narrowed down the target audience to two types of group.

  1. Small merchants who are not so tech savy and are open to new channels to sell their product.
  2. People who use Instagram to sell their products.


Interview Questions

It was easy to empathize with the target audience since I had worked and observed the first demographic for two years, during my time as a associate manager in a off-set printing press . I used my contacts to help me get relevant people.

I interviewed 13 people from a small-time cobbler to people who sold export stuff in markets, with these questions:

  1. Do you know what is an e-commerce website?
  2. Do you think, an e-commerce website would be a good channel to sell your prducts?
  3. What would it take for you to try this channel?
  4. How much would you pay for this service?
  5. What features would you like in this product?

Key Insights from the interview

  1. Older generation would prefer their kids to be able use the product.
  2. People would prefer a session with the product desigers, to explain the design and benefits for the product.
  3. People would not like to pay with a debit card, since some of them don’t have a bank account.
  4. People need a lot of options for the templates, inspired by huge fashion brands.
  5. People are more likely to make a website if someone else made it, and is making a profit. Even then, they will not put much effort in making it.

Competitor Analysis

I started my research by studying user on-boarding for different platforms. I used the followed useronboard, which tear downs different steps and spots the areas that need improvements in the process. It really helped me learn the customer on-boarding process for Shopify. I took the same approch for squarespace, wix, big commerce, volusion & 3d cart.

Here are the similarities I found in the customer on-boarding:

  1. It starts with the home page which has an assertive heading and a sub-heading.
  2. Then there is some social proof on the home page.
  3. The call to action button leads a preliminary form where you have to register.
  4. Then the user is taken to web application where user does the following;
    • Selecting Theme & Customizing website
    • Manage categorires
    • Add your product.

Problem Solving & Wireframing

After Interviews and the research, I started designing the on-boarding process for the product. I considered all the tear downs from ‘useronboard’ while designing the process. Apart from that I made a list of practices, used by some of these platforms that could help me produce a easy customer on-boarding.

During wirframing I took these considerations into account:

  • The on-boarding should be divided in several steps, there should no long forms
  • There should be social proof along the way
  • Some visual cues that would help the user to understand the step
  • Highlight the pricing section as well as ‘Free Trial’
  • Minimal interface design

While coming up with solutions & wirframing I sat with the developers and confirmed each decision I made with them. I also constantly tested the flows and wireframes with the people in the office, since we were sixty people strong. There were a few of them who were already selling some products and would most likely use the platform, if it was available.

Hi-fi Mockups

Since the product already existed, I had a style guide to play with and design the interface around it. When the wire frames were completed, I started working on high fidelity mock-ups. I used Photoshop to come up with different illustrations for the web application and Sketch to make the user inferface for the application.

login screen
listing screen
dashboard screen
onboarding screen
Some screenshots of the application

New On-Boarding Process

The follwing was the new on-boarding process, along with it is the thought process of why I took certain decisions.

1. First, the user is taken from website to the signup page. After signing up, the user is asked two simple questions regarding your business, there is also social proof to keep him/her glued to the on-boarding. The “Move to personal details ” CTA responds by sliding the card off the screen, leaving the user with a sense of progression.
2. All data that could be fetched from Facebook is pre-filled, the user has the ability to change the text. The ‘Place holder’ for phone, to reduce the error for incorrect format. Again a different social proof to give the user some ambition.
3. Now the user is taken to the steps page, It has clearly mentioned the number of steps for him to create his web store. The cards get activated in the order shown. Each card has a concise description and clear CTA, so that user knows what to expect. Each time the user gets done with a task he returns to this page, to give the user a sense of rhythm. After the task completes the card flips over, stays for a few seconds and then slides off the screen to give user a sense of relieve.
4. It’s divided in two sub parts first the user selects theme, then customizes them. Simple tools and a preview area to see instant changes. After this the user to add a logo and a banner (not shown), but these tasks are optional, an attempt to get user more involved in the process.
5. This step deals with information architecture the website, by categorizing the products. You have the option to choose from given categories (if the user wants to put zero effort in it), which cover a diverse range of products. There is also the ability to create custom category for some creative users.
6. This step asks some basic product questions about the product and then on the basis of different colors make different variants with pre-filled product description with ability to add sizes. There also some help text in the inferface to help the user understand some of the information that is required.
7. A little congratulatory message to celebrate user’s accomplishment. A clear description of features, with tooltip on hover to simply technical terms. A clear CTA to skip the plan, since majority of users will be looking for this button.
8. Finally, the user enters his dashboard. There are big cards which guide the user to take some important decisions. Cards are arranged according to their importance, some can be dismissed with the cross button while others force the user to take action. Faded dashboard entices the user to click on the “Place a test order” button, which is the major action button on the page, in order to populate the dashboard.

User Testing

After the on-boarding process was added to the product, we conducted a user testing. The purpose of the test was:

  • To see if the onboarding process was adequate for our users
  • To identify pain points in the current on-boarding process
  • To observe and listen to their feedback, in order to come with addtional features to ease the process
  • To get feedback on the current templates, since it turned out to be a deciding factor in people
  • deciding to use this product, during my ‘unofficial interviews’
  • To check out bugs in the prodouct that might come up


People were asked to make there own website by visiting and make their own e-commerce website. Each of them were given laptop with a clean desktop except with a ‘Website assets’ folder, to help them with on-boarding.

After the test, they were asked to fill out a feedback form. The form included these questions:

  • What do you hope to achieve from this session & product?
  • What do they expect of the product?
  • What problems did you face?
  • What can be done to make it better?
  • What features are missing?
  • What is the likelihood of you using this product? On a scale of 1 - 10
  • How do you feel about the overall experience of this session
  • any improvement?


  • Completed webstore: ​90%
  • Understand payment plan: ​95%
  • Select courier service :​ 80% (did not have desired courier)
  • Select Shipping operations: ​60%
  • Try out different templates:​ 70%
  • Place test order and checkout their webstore:​ 90%


  • Theme preview experience should be improved.
  • Color seclection interaction needs improvement.
  • ‘Add Custom Category’ needs better interface.
  • Some bugs (mentioned in the report) need to be fixed.
  • The ‘Settings menu’ interface in webapp settings needs to be improved.
  • Some of the fields (mentioned in the report) need their copy to be re-iterated.

The problems were explained in detail in the user-tesing report. After the testing, sprint to improve the design was made on trello. We had a meeting to prioritze the problems and started our work on improving the product.


It was challenging to work on a product, which had it’s architecture laid out without keeping the design in mind. People with different cultures and different socio-economic background require different UI elements to help them understand the product.


I have worked on different parts of the product i.e user on-boarding, product on-boarding, website templates, dashboard, order management, expanding the product to services apart from physical products, but this article only describes the process behind the on-boarding.