DSGenie | UX Research, Development and Design

iPhone UI Test with Drupal UI Developed
iPhone UI Test with Drupal UI Developed
Client: 
DSGenie
Industry: 
Software
Service
Retail & wholesale
B2B
Build Type: 
AGILE
Axure RP
Bootstrap
Business Analysis
Drupal 7
GIT
Google analytics
Information Architecture
JavaScript
jQuery
Photoshop
SAAS
User Dashboards
User Experience UX
User Interface Design UI
User Interface Development - Front-end - Theming
User Journey's
User Personas
User Profiles
User Testing
CRM
Custom Theme - Brand ID
Desktop HD
Tablet
Mobile Web - Responsive UI
Date: 

October 2017

Jan 2018

About the Project
Commissioned to develop a new interface for a software tool, short but high impacting project. Through this article I to walk you through the AGILE and MVP processes to complete this. This has been designed and developed by myself except for collaboration on key stages such as UI testing and UAT.

 

Discovery – Requirements gathering
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.

There’s a definite art to drop shipping and can make users a great deal of money which it does or to have as an extra revenue.

The solution was built by a two people who have invested their idea and knowledge into getting the solution operating, with little investment. Revenue now though sees them shaping the solution to a more engaging user experience both front and back stage competing with larger applications.

DSGenie want to implement the UX revamp in iterations and wanted all of the issues brought to them to be dealt with, so an overall view of the tool with all its functionalities were mapped out.

Some foundation or rationalization needed to be undertaken to progress further and so the UX process began described later.

Project Scope - MVP

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. 

 

 

Existing UI Design

UX Research and Analysis
Persona’s -  demographics

We had a variety of users and could define them from housewives to travelers 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

UX – Quantitative and Qualitative
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 analyze 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.

Qualitatively questions to tool users were conducted in a FB group, for software support, identifying the main user pain points.

Many 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.

User pain points can be profoundly obvious to a seasoned UX researcher, but the main issues from user feedback were that users would feel happier generally with:
 

  • The UI layout unattractive
  • 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 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

 

Product Competitor analysis
DSGenie is a bit of a unique product in that it does more in the background for selling your product. Features that can’t be discussed openly as they are NDA protected.
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.

Product Market analysis,
Research revealed patterns but also added rationalisation to the company on the founding innovation DSGenie was built on. Some words from the DSGenie founder after-market results were presented:

“nice. this is what I wanted to see so success in Oberlo depends on the user just like Shopify you need to drive traffic AND you need an item that sells with EBay you put a variety of unrelated items in your eBay store and sell off of EBay traffic. That’s what makes DSGenie really good -- if you put in 1 hour of work in DSGenie and no money, you have an earning potential. Now imagine for this platform where you need to place ads to get traffic you have to spend money and you have to use time to generate the ad (or more money), the risk is bigger, and you get a really nice payoff if you win but not all users have the luck or skills….”

Summary
The UI based on the limited metrics from Google coupled the analysis bent more toward qualitative, as there is clear discomfort with the software functions themselves. At this juncture in the product development, focus should be 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 co.uk brand.

There was clear negative “pain points” with the navigation and not being able to view links by a clearly category 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, signaling 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.

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”.

 

Information architecture

The process that follows investigates and creates the solution for the UI components required for the UI design and its implementation with Drupal, Bootstrap framework which UI technologies used are HTML, CSS and jQuery, later the development phase, now the development of the main pain points of the UI, which is the navigation and content layout.

Schema, clustering and linking the User journey 

Target is navigation

 

Create a sitemap 

 

Project planning, mental modelling the build and timeline, or road map

First iteration and evaluation (skateboard product)

 

UX / Information Architecture - First UI layout iteration

Test and evaluation 1

 

The above conceptual interaction was presented as an interactive model using Axure RP it allowed the concept to be mocked-up and viewed on mobile and desktop. Having an interactive prototype allows the user to give us a more accurate appraisal of the main objectives from the test. Questions asked:

 

A. The Navigation, and Product engagement or logic

B. Usability, intuitive interaction

C. Ease of access to links through the various viewports

Feedback was positive with some features suggestions to be implemented.

New requirement on the scope of the UI to include fun features such as colour picking on the UI.
Technically achievable with jQuery or Vanilla JavaScript using not page caching but local storage.

 

Ideally this is a great result from a business perspective as more work was gained by delivering and presenting options to DSGenie that a flat graphic.

 

It’s nice and extremely rewarding to get it right first time, next stage is creating a low/high fidelity mock up with menu interaction flagged with graphical elements, icons again using Axure RP and Photoshop for some of the graphics required.

 

Developing the Visual UI
UI style guide

Colours
Fonts
The F Layout
Gestalt theory of perception Icon and content layouts

Mobile first, scale up to desktop

Using some custom created icons for the main menu. the main menu is a nice to have features 4 squares that can span across mobile width, fixing viewport to portrait only. For the same of demo the close menu arrow is quite prominent, and to some users this

Test and Evaluate 2

 

Feedback positive both for mobile and desktop, however another requirement a features emerged which is to additionally allow the UI display to have changeable backgrounds, for both mobile and desktop.

 

At this late stage the timeline was increased to allow another round final UI design iteration before production, code development stage.

 

 

UI Design Prototype

At this stage, development can start as key functions such as the navigation and UI widget can be easier worked on a working version as the style guide in PSD format can now be used. Play on colour for finalization can be worked through using production code.

As a Drupal theme the method the menu’s, user profile data and content is embedded into PHP in a method called hooks. These hooks are coded into the template and manipulated using HTML, CSS and jQuery for the front end styling in this case.

play on colours with UI option selector

Due to limitations in the budget adjustment is made with the navigation layout and a compromise solution instead is to be implemented with prebuilt module functionality and some use of the API’s that Drupal 7 allows coders to hook into. A Drupal mobile navigation menu module which can handle the navigation to acceptable levels for this first iteration in “revamp” for DSGenie app like responsive, touch and slide controls.
 

Design components not going to be implemented at this phase, due to budget. For example, avatars which needs support through back-end development. Solutions such user ease of logging out has been incorporated into the prototype model included Inside the UI widget dropdown

code GIT

Although some compromise was needed during the project the budget, restricted some of the UI designs to be implemented on a later phase. Importantly the solution has given users a more welcoming navigational experience, both on mobile and desktop.

 

Some of the icons were purchased, however some that were created using Photoshop.

 

The UI widget adds to a nice to have objective which was implemented using local storage mechanisms, jQuery, CSS3 (SASS) for different colours sections, fonts, icon and embedded with HTML. And PHP.

 

This was all uploaded to DSGenie GIT repository, code merged and Drupal configured for mobile menu navigation, views and theme implementation.  

Server Technologies: 
Apache
Linux
Memcached
MYSQL
PHP Hypertext Preprocessor
Compatible Browsers: 
Chrome
Mobile Devices: 
iPad
iPhone 5
Web consultancy
Research and development - R&D
Information Architecture - IA
Wireframes, User Experience - UX
User Interface Design - UI

designwebservices.com and webinmotion.co.uk © 2017