My role in this project is Lead Designer and Front-end developer. I designed the user flow and high fidelity mock, then went on to implement my design into Ember components.
TradeGecko is an inventory management app that allows user to manage inventory and stock across multiple locations and stores. In order to achieve this, TradeGecko integrates with various e-commerce and accounting apps - such as Shopify, WooCommerce and Amazon stores - and saves our customer's time by syncing information across all stores. TradeGecko users are able to self-serve by installing these integrations themselves through an app store.
Over the past years, TradeGecko partnership team has done a great job acquiring new partners to integrate with TradeGecko, and we now have many apps from different developers and ways to integrate with TradeGecko. Some integrations were not true integrations - instead, they are achieved through an IFTTT (If This Then That) workflow via connector apps, which may incur extra fees.
However, our existing app store design did not scale with the growth. Despite having multiple types of apps, they all looked the same.
Problem arises when there are bugs or feature requests and users are not sure where they can get help from, because it was not immediately clear which apps were built by TradeGecko, which apps were built by partners and which integration are done via connector apps.
Furthermore, certain apps can only be installed once (such accounting apps) and certain apps allows multiple installations (we are able to integrate with multiple e-commerce stores). This was not immediately clear from the previous design.
We first went through the apps listing with our sales, partnership and marketing team to learn which apps we will be endorsing as a company, which integrations did not work well and thus will be sunsetting, and which integrations were done through IFTTT workflow.
We needed to maintain the delicate balance of setting the correct expectations when it comes to the integration experience for product experience purposes, yet still maintaining our position of the flexibility of TradeGecko being able to integrate with multiple other apps for marketing and sales purposes.
Next, we optimized the app store navigation so that users know which apps are endorsed by TradeGecko, which apps are true integrations and which apps are IFTTT workflow.
We also took a look at the existing "cards" design of the app store and refreshed it to something that looks simpler, more app-store-like and easier to scan through.
As this is meant to be a 4-week project with limited resources, I also got to put on two hats - as a Product Designer, I designed the new navigation and app store listing. As a front end developer, I implemented the design changes into our live production.
To achieve a cleaner and easier to navigate app store, I came up with a very simple app listing component. Users should feel familiar with the new app store, so I refrained from deviating from the normal app store elements. In order for users to be able to differentiate which apps were built by TradeGecko (and thus endorsed), I created a simple badge to indicate such apps. If an app is released on Beta, we also reserve a badge to indicate this in order to maintain expectation of the performance of such apps.
For integrations that are achieved through an IFTTT workflow, I created a dedicated section for them so that they can be differentiated from a true integration.
Installing each apps also became more clear with one simple call-to-action.
If an app had been installed before and only one instance of the app is allowed, this is clearly and a call-to-action is changed to view the app installation setting.
Similarly, if an app had been installed before and allows multiple installations, I marked how many instances of the app had been installed before, and a CTA to install another instance.