A case study about designing a machine learning Shopify application.


Machine learning is helping eCommerce store owners to get their audience more engaged by personalized offers and content. Happier customers mean more income for the owners. In 2019 we have 'boxed' this scientific technology for the Shopify application store to make it available for even the smallest enterprises. 

The solution provides relevant recommendations based on user behavioral data in order to utilize upsell opportunities. 


UX Research
UX Design
UI Design


Product Designer


Gravity r&d. / 


Yusp, the mother company got globally recognized as a machine learning provider by winning the famous Netflix machine learning competition in 2008. However, it's solutions were only affordable for Enterprise sized clients until 2019.

But in 2019 they wanted to extend their solution to the small and medium-sized enterprises market segment to increase their market share. They come to that decision by a beta release in 2018.

'The small and medium-sized e-commerce stores are in need of an affordable self-service solution that can automate product recommendations'.

Competitive analysis

That statement has initiated a research and validation process. We started off with the competitive analysis in order to know more about this whole market segment. The Shopify app store was an insanely rich information source for or research - we were able to see through reviews what people like or dislike about these specific automation tools. Based on the ratings and install numbers we have gathered the most relevant direct competitors. 


As you may see on the graph there are three major branches - the market leaders, the midsize companies, and the starters or small companies. In order to avoid any analytical distortion, we have selected one of each group for further testing. By the end of the process of we were able the identify the common service traits of these providers. 


The key findings of the competitive analysis are: 

1. Nobody wants to use an application under four stars in that highly competitive market segment, users willing to use only the best application. 

2. All of the well-performing providers offering high-quality support, and endorsing their users to write reviews to get more exposure that way at the Shopify app store. 

Persona research

As a next step, we wanted to know more about the existing beta userbase about 30 - 40 companies. We had full access to primary information resources such as Hotjar recordings, Freshdesk tickets, and email conversations. As a tremendous effort, we were able to read them through and analyze them and create a proto persona. 

However, we had to extend our knowledge of those personas and also validate them through discovery interviews. We have initiated 5 personal interviews and many calls to the client companies. 

As a result, we have synthesized all those information into two final personas and also added some extensional job-to-be-done mapping to get a more detailed picture: 



When Colin wants to earn more commission fees he has to look for up-to-date solutions, such as automation tools, where he can find Yusp as a perfect match.

When Colin has to present the results of the recommendations to his clients then he is going to login to the Yusp dashboard so he can check the metrics.

When Colin doesn't find the right metrics he is going to ask for support/help so he can figure out which are the right numbers for his presentation.

When Colin’s clients ask for logic or design finetune he is going to ask for help from support so he can implement the changes himself, or let support do the job for him.

When Colin is stuck with the design of the recommendation box he is going to ask for help so he can learn it for the next time. 



Laszlo has a solid knowledge of the market so he does everything to develop his business so that he can keep up with competitors.

Before Laszlo starts to implement Yusp he consults a marketing specialist and Yusp support, so he can keep calm and do the right thing.

Laszlo starts the implementation in the development environment not on the live site when he wants his business to keep safe, so he won't miss any conversion.

When Laszlo delegates this task to a developer he is connecting the developer or his team to Yusp support so he can catalyze the process.

When Laszlo wants to see the results of the product he asks one of his team members to make a report so he can see only the main KPIs.


As a result of the mapping, we have identified the main problem sources of our potential users, therefore, we were able to focus on them and create a viable product. These are the main problem sources:


The majority of the subjects can't write a single line of code and they’re working with already overwhelmed developers. 

That is why we should streamline our process and make the solution implementable without coding.


More than two-thirds of the users polled never heard about machine learning algorithms, but they do know that recommendations are very useful for eCommerce stores.  

That is why we should focus on business needs first.


Almost every (85%) of the polled can't afford the same prices as an Enterprise sized client could. 

That is why we should come up with reasonable and affordable pricing.

As a first step of developing a solution around those problems, we have mapped the average journey of how people use the Shopify application to find the most crucial points of the journey where we should support them. 


As a result, we figured out that the most frustrating point of the journey is the installations where everything is new for them.

We also had to learn about the technical requirements of the recommendations system in order to offer a helpful solution. So I have initiated a workshop we the internal development team to find a way to make the interface viable through self-service. As a result, I was able to identify the four major steps that have to be done to start the service:

1. Add a tracking - to gather behavioral data for the engine. 
2. Sync item catalog - to know the list of available products.
3. Select an algorithm - calculation, or group of products. 
4. Insert widget to the site - design and go live with the end result. 

As the next step, we have created the most important user flow based on the journey map and technical requirements: 


This process led to add the 'integration wizard' to the journey which helps people through the initial process to start serving recommendations. 


The second most important journey is how people check the performance of the result - this is kind of the love it or leave it section. 


Obviously, these companies want to see profit so have to make them available to check the KPIs as quickly as possible: the main indicators of the ROI got placed to the top and most highlighted position. 


At the usability testing phase, we figured out that we missed an additional flow of how people modify the appearance of those recommendation widgets. That part went through several iteration which led to this final appearance and usability of the design: 


Now I’d like to talk about the 2nd problem - which is the scientific language. This field scientific field is unknown for our personas and made by data scientists for data scientists. We wanted to make sure to use the right terms and make them clear for our market segment. Thatswhy I initiated an open card sorting session with 3 marketers and 3 business owners. I told them what are the following terms mean and how are those applied in a live environment - I asked them to tell those terms with their word. Here are some examples of what has changed: 

algorithm ➜ logic, touchpoint ➜ placement, Item ➜ product, sync ➜ import. 

A beneficial side effect of the project was that based on that session we have developed an FAQ section that answering all the fundamentals people might know about the field of machine learning automation. 


The third problem that I mentioned earlier is the problem of the pricing - SME customers can't afford enterprise pricing. So we came up with a solution of ROI-based pricing which is become viable with the self-service integration and also offers a competitive advantage compared to the other companies. 


In order to get an appealing visual look for the application, we did several design sprints and many iterations. The most important thing was to create a design guide based on atomic design principles to keep the iterations on track. This methodology helped us through many ups and downs to find the final appearance from the simple to the most crowded screens. 


As an impact of our design the integration time reduced from 2 days of emailing and misunderstandings to 2 hours of self-service integration. That also threw out the ballast of the development team - and made the product affordable for even the smallest companies. We were able to find the right terms and business-related language for our personas. 


Check the Yuspify website if you want to learn more about personalizations or
feel free to check to the plugin in the Shopify app store! Thank you for watching!

Selected Works

YuspifyProduct Design

MotivitiProduct Design

PentaschoolProduct Design