Creating new user experience and interface for drop shipping platform

6 years 8 months ago
Industry Sector



DSGenie is a SaaS tool for drop shipping. It’s a start-up with a small team of support staff and engineers.
What is drop shipping? In a nutshell the software tracks products being sold on e-bay and amazon. They are DSGenie software subscribers. The software enables a user to create their own products listing and then submit them to both either E-bay or Amazon. Sales, invoicing, product tracking all supported features.
DSGenie want to implement the UX targeting a better UI which is mobile friendly, revamp in iterations and wanted all the issues brought to them to be dealt with, so an overall view of the tool with all its functionalities were mapped out

Product Competitor analysis


DSGenie is a bit of a unique product in that it does more in the background for selling your product.
The drop shipping market is apparent however and DSGenie does not intend to compete with those, limiting their subscription base, allowing subscribed users the benefit of the software in a family business type orientation, recognizing loyalty is key to their business ethos, and wanting to be prominent in one field, not just another in many, losing their integrity some may say along the way.
All competitors meet described user personas main pain points, allowing complete flexibility or control of your solution, through highly polished UI’s with modern technology driving this, such as JS frameworks with React, Vue and Angular for example, allowing for real time notifications and updating.

UX Research and Analysis

Persona’s - ethnographic and demographic results.
We had a variety of users and could define them from housewives to travellers on the beach in Thailand. The subscribers included students, full and part time workers, professors, financial experts in fact right across the board. The solution aims at everyone needing to earn money either taking up a small amount of time or full-time.
Many subscribers offer newbies help in the FB group
On the onset DSGenie had not setup analytics, using Google tools for page view, sessions, bounce rates, and under advisement quickly implemented this so we could start some metrical analysis.
There was no data long term, to analyse so further steps were taken with qualitative investigation although we did find immediately that 70% of user were using a mobile device and that 30% of them were using iOS’s in the USA. Most users were USA based, but also logged in from country locations in South America and SE Asia.

Customer Insights

Any users had initial complaints with software not working correctly, crashing or timing out.
Questions asked about the UI were more focused on the interface and what could be done to enhance the user’s time with the user waiting for a series tools humming in the background.
Issues from user feedback were that users would feel happier generally with:

  • The UI layout unattractive - legacy
  • They could view the navigation on their phone without the need to scroll down the page to find a link
  • Support tickets were hard to find
  • Content on the phone could be viewed but only using X and Y scrolling bars to read the page
  • Colour and font is not very attractive and boring
  • Tables could not be viewed properly on phone
  • More help information, support assistance, guidance, instead of referring to YouTube videos


User research Summary

User research show that there is clear discomfort with the software functions themselves. At this juncture in the product development, focus is on making those key product functions work as they should. Development has started on making the software usable in the UK market not just USA with a brand.

There was clear negative “pain points” with the navigation and not being able to view links by a clear category hierarchical formatted layout and there were too many on display at the same time, both mobile and desktop. Content, is simply a returned list of user searches, requested of data crunching, items were not visible and could not be scrolled correctly, or on some devices the content was unable to zoom in properly, where the touch, tap or pinch and zoom device functions could differentiate a table scroll on its Y-axis.

A main user goal, signalling disruption, is where the user / subscriber is required to enter information on the various API keys needed when setting up the account, for E-Bay and for Amazon, the navigation was not concise enough for users as well as not an easy or simple process to do for a non-seasoned drop shipper, involving setting up developer accounts with both.

User research recommendations

Touch points of brand identity, producing native apps, or using progressive web apps, merging content with support, and having this value “in-house” were taken in to account, but ruled out on this project scope, to be considered for future development phases.

Brand would be recognized with a stunning and captivating UI, native app could not work due to the huge amount of data that would need to be stored and this transgressed to PWA, caching that huge amount of data would surely make the app unusable even on a browser, but functions such as sales notifications could be used “push notifications”.

Project Scope – MVP minimum viable product

This phase of the “revamp” project would encompass the UI and the user experience addressing primarily the pain points issues of the navigation. It would allow ease of use on both mobile and desktop, a responsive solution. Live notifications with use of React for example would not be applied in this product iteration as this would need massive amount of development time decoupling the Drupal framework and considered at present an expensive resource which was not required for this phase. The MVP would instead use a framework that can allow the product speed to market, leaning on design rather than development. With these limitations the decision is to use Bootstrap or Google Material framework for the front-end / UI to implement the new UI design.



  • User Research, Analysis and Recommendations
  • Heuristic UX Design, - IA information architecture – affinity mapping – navigation hierarchy
  • Product Strategy
  • Mobile prototyping AxureRP
  • Viability, Costing - MVP
  • Graphics- Icons
  • Typography - Sans-serif, character sizes, letter spacing, line heights, weights
  • Colour scheme
  • Infographics - Iconography –
  • UI Design, UI brand, Handheld – Desktop
  • UI Engineering - bootstrap UI framework
  • TWIG, HTML, SASS/CSS, jQuery


Existing UI mapped into sitemap - AxureRP

UI Layout Guide

Navigational hierarchy – complex then simplified

UI Layout Guide

First lo-fidelity UI designs

UI Layout Guide
UI Layout Guide
UI Layout Guide

First lo-fidelity UI designs – with colour, typography, iconography

UI Layout Guide
UI Layout Guide
UI Layout Guide

First UI design iteration presentation mock-up

UI Layout Guide

New UI design implemented on decoupled testing UI user styling

UI Layout Guide
UI Layout Guide

New UI design with UI navigation background image play

UI Layout Guide
UI Layout Guide

Completed new UI Designs

UI Layout Guide
UI Layout Guide