Project
Templates
Introduction
Based in San Francisco – USA, Octane AI is the leading quiz platform on Shopify and acts on two major pillars by recommending products to customers by their preferences and also helps merchants on building up their contact list and boosting their marketing campaigns, all of that in a no-code platform where all types of users can use the builder to create quizzes and organize their contact list through app integrations.
Challenge
A builder gives users a lot of flexibility and control so they can leverage the platform in the way they want it, but it is also a two edged sword, if users are not tech savy or don’t exactly know what they want/need, it can be overwhelming for them to identify their best path towards a good quiz.

That problem gets exacerbated because Octane AI doesn’t have a wizard or quick setup that could kick-start their journey into quiz building, which was among one of the top complaints the Customer Success team was receiving at the time.

With that, the number of new users with an active quiz was underwhelmingly low, so we defined a few problem statements:
Problem statements
- Users spend too much time building and launching a quiz
- Excessive user friction that affects quiz adoption rate
- Steep learning curve concerning quiz functionality and optimization
- Lack of features that inspire quiz ideas and invoke visuals of what users’ quizzes can look like
The process
We set off to talk with all contact points on this problem, in and out of the company, first with Account Managers to understand their struggles with the editor themselves, then Customer Success to learn more about user voiced complaints, and then finally user interviews with selected users (current customers).

We’ve learned that the editor itself isn’t that hard to master once you have something to start with, or users at least know what they’re going for as their goal with the quiz. It’s especially hard to create a quiz when you have a full blank canvas in front of you.

So after discussions and evaluation, we set out to create a Template feature for users, where they can browse through a catalog of different options, read through their characteristics and choose the one that best suits their needs. They would also be able to manage their own templates, creating their own through the editor, so every time they would start a new quiz, they could do so from their own designs, this is powerful mainly because customer tend to create different versions of their quiz for multiple reasons, like specific campaigns, A/B tests or experimental variations, to name a few.

Due to the fact that the project is big and the team size and resources are limited, we’ve set the project to roll out in two stages:
Stage 1 (MVP) and post-launch
Users can browse through a catalog of different templates to choose which one they want to start with. Once launched, collect data and learn from the users’ experience with the feature.
Stage 2
Users can manage and save their quizzes as their templates or browse through basic and featured templates to further explore more ways to customize their quizzes.
User flows
On Stage 2, merchants can explore basic and featured templates to increase their options on creating quizzes.

The featured templates can work as both an upgrade leverage or a space for guests and partners to come in and create amazing quizzes from their know-how on creating quizzes for their customers.
Full map shows all the structure combined into the user journey and its branches.

This last map can be divided into two different user types: Merchants and Admins and it shows all possible scenarios where their journey can happen, depending on their needs around templates.

Merchants can create new quizzes from scratch, from a basic template, a featured one or from their own templates. They can also navigate to their templates list and manage it all there.
User Interface
Coming to the user interface, our main goal was to keep it as consistent as possible with our existing design system (using Shopify's Polaris) to make sure the user experience would not be hurt, development would be optimal and the feature efficient.
From the quiz dashboard, when users click on “New quiz”, it prompts the new templates feature.

When users start a new quiz, they’re now prompted with a page that they can browse through the templates, use filters to find what they’re looking for, switch tabs to use their own (previously) created templates, or just start from scratch. All from a single page, organized to give users the control and not overwhelm them.
Filters, sorting, search bar, gallery. All controls in users’ hands.

On the template details page users can see more details on that template, look at bigger images of the quiz’s pages and its mobile version, before committing to a specific one.
Results and takeaways
Working on this project was a great experience from start to end due to it being a highly anticipated feature within the company, partners and users. In every interaction, interview or discussion there were a lot of energy, team work and collaboration.

Stage 2 is on standby for now due to Stage 1 being highly successful on its own and the template library being a huge factor in user experience alone. And considering I’m no longer working at Octane AI, I won’t be able to follow up on its impact once it launches, but will definitely be watching and rooting for its success!
Let’s talk
If you're seeking a dedicated designer with a knack for problem-solving and a friendly demeanor, let's connect! I'm always open to a chat and enjoying a cup of coffee.
+1 672 999 7371 (SMS, WhatsApp and calls)
murillo.perecinotto@gmail.com