Collabs Shopify App
A free networking platform that helps brands cross-pollinate customers.
Company
Selfmade
Project
Desktop Application
Role
Product Designer
In early 2019 SelfMade launched their Collabs platform, a free networking platform that helps brands cross-pollinate customers. One of the main offers of the platform is the Instagram giveaway tool.
The tool allows the user to request an Instagram giveaway with another brand, and helps select dates, choose the gift and creates a caption for the post. The user also receives email reminders for different milestones throughout the process.
After 4 months of Collabs launching, visibility and reach were still low. During user interviews, a concern regarding shipping was discovered. Users expressed concern regarding the process of gathering necessary information from the winner to make the shipping of the product possible.
A SelfMade app that could live in the Shopify app store and allows user to choose the gift directly from their Shopify store’s catalog and automatically generate a discount code for the Instagram giveaways.
Research
Shopify is the number one tool for e-commerce businesses. 800+ stores are powered by Shopify with 87% of merchants using the Shopify app store and having an average of 6 apps installed. Having an app on the Shopify store means entering a market that thousands of brands navigate daily.
More than 70% of our current users host their sites with Shopify. The app would allow users to simplify the gift selection step by choosing a product directly from their store catalog. It will also allow us to create an automatic discount code which can be sent to the winner and replace the step for collecting shipping information.
After understanding our users' needs and narrowing down the specific problems to solve I was ready to define key tasks for the project.
After defining the user flows I did quick explorations to verify my understanding.
Exploration for giveaway dashboard, modal for gift selection, join Collabs ad banner.
I put the wireframes in front of coworkers and users and asked questions to find out if they encountered any issues, if it met their expectations and watched for points of friction. This helped me avoid relying on assumptions and design with the user needs as the core truth for the design.
Not clear enough that it’ll be an Instagram giveaway when going through the flow
On the get started screen: Collabs CTA at the bottom of the page feels like the next step for giveaway instead of different tasks
Once the giveaway is created is not obvious that there is an option to return to giveaway dashboard.
Collabs onboarding was confusing as there was no “What this is/How it works” page
Not clear enough about Giveaway posting or sending the discount code to the winner
Adding more copy through the flow mentioning “Instagram Giveaway” rather than just “Giveaway
Remove Collabs CTA from Giveaway Details page
Make “Back to dashboard” more prominent
Change copy on CTA, change main header, change “Browse Brands” to “Explore Collabs, Add “How it works” page before onboarding flow
Edit copy on “Discount code” to be more clear about user’s responsibility to send code to winner
I created high fidelity mockups for the three previously established tasks. The flow for new users coming from Shopify included:
Creating an account after installing the app on their Shopify store to get started.
A giveaway dashboard empty state with a clear explanation of steps to follow. I added more copy through the flow mentioning “Instagram Giveaway” rather than just “Giveaway” to make it more clear that this is an Instagram giveaway.
A modal displaying the user's Shopify Catalog were they are able to choose a product as a gift for the giveaway.
A review screen with details of the giveaway and auto populated caption which can be edited.
After exploring the Instagram Giveaway tool, new users can join the Collabs platform from their giveaway dashboard. This flow includes:
An Explore Collabs CTA on giveaway dashboard.
A screen with an option to get started on the platform as well as a guide to how the platform works. The user will then complete the onboarding process for Collabs.
Existing Collabs users have to manually enter the gift information including the gift name, value and an optional link to the gift to show how it looks on the post. Users now will see a banner with the option to install the Shopify App. Once the app is installed the gift page is replaced with the Shopify catalog Modal. The app also allow us to generate a discount code for the winner.
This project was the first product I worked on in which I was entirely in charge of researching, scoping, defining the product, designing, testing and iterating. I was able to sharpen my skills in all different areas with the support of my team.
Having a defined design system in place made the whole process easier. Since the app was meant to act as a supporting feature of the Collabs platform, being able to utilize concepts from previously designed screens not only allowed me to cut the design time significantly, but it also allowed me to dedicate more time and effort to research, testing and scoping. Since it was my responsibility to execute all parts of the process, being able to accelerate the design process was a big win for me.
.png)
GET IN TOUCH