Project
Global properties
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
Octane AI is a really powerful quiz builder tool, it empowers users not only to create breathtaking quiz experiences that increase conversion, but it also provides a major pipeline of zero party data.
What is Zero Party Data?
Unlike third party data, where you buy it (or in better words, rent it) from other companies (like Facebook and Google), ZPD is when your customer freely and willingly shares their personal information with your company. Collecting ZPD in a quiz is especially valuable because you not only collect their contact information or personal name, but also their personal preferences.
The problem
Octane AI is integrated with the industry’s go-to marketing platforms so merchants can connect their quizzes directly into them and start managing their campaigns. Once your quiz is connected and your data properly set up, it’s all automatic and in real time, the more people take your quiz, the wider and better is your campaign audience. But that’s not an easy task.In the realm of data and integrations within Octane AI, top user complaints are always regarding how you manage your data properties into the editor. It’s time consuming because there’s a vertical navigation that users need to go through. That means that for every answer in every question a user has, it’s a lot of clicking in, and backing out. This can be a bearable experience on short quizzes but the trouble gets exacerbated with longer and complex quizzes. To further complicate, this UX problem also makes it hard for users to have a greater view of their set of properties and data, because they can only view it individually per answer.
Prototype showcasing the multiple clicks to find a single property, only to have to back it out and go again for other properties. Click to enlarge.
Problem statement
So as a problem statement, we’ve defined it as:
"How might we provide users with a clear overview of their properties, while also enabling them to effortly manage and modify items seaminglessly?"
In this simple example of 3 questions with 3 answers, users would need to navigate 9 times just to check their properties.
The process
This was a key project because it’s related to both technically and strategically a key part of Octane AI and was already iterated on different projects in the past.With the knowledge of past iterations we’ve come to the conclusion that we should keep the solution simple and nimble, something that could fall into users’ hands as soon as possible without taking too much of internal revamping and development.We first had rounds of discussions with key stakeholders (Account Managers, Customer Success and selected customers) and after all that information was gathered, we started converging that knowledge into a general direction.
Iteration and learning
This was possibly the most demanding project that I’ve worked on Octane AI due to its relevance and impact both for users and the business, so we set an iteration process where we would work on iterations and rounds of evaluation to discuss the impacts of that version, and work on improving it.Throughout the iterations, we’ve learned two main important things we wanted to have in the final version:A new place dedicated to manage all propertiesPreserve the ability to manage the properties individually as it wasA new dedicated place to all properties is desired because it gives the overview and efficiency needed for users to manage their data, while preserving the current behavior would be important to reduce friction for current users that are used to their methods of managing properties, but keeping both dynamically connected, so if one place changed, the other would follow.
User interface
The final version was a result of all the learnings from the iteration process.
On the global settings panel, users now have a button to go to the new properties page, where they can manage all their properties set up.
Highlighting the properties page access from settings.
When inside an answer, users can also navigate to the properties page and have access to the same properties page. This ensures that users can easily access the properties page both from the top of the menu, or deep into navigation.
Highlighting the properties page access from inside an answer.
This is the new properties page, in here users can manage all their properties in a single place, no longer needing to go back and forth between menus and pages. It also provides a good overview of all of their set up, so identifying mistakes and overall managing is a lot easier.
All in one, the new global properties page makes users’ lives a lot easier.
This new page has a few interesting perks that help users even more. First, it has direct link access to individual answers, so they can always go to the answer they want and manage things there, and click back to the properties page, so a two-way access between deep-level navigation and the properties page is provided.
A two-way access between answers and the global properties gives users great efficiency and speed.
Secondly, for every property value, there is a property name, and usually a single property name covers multiple property values (this may be confusing for people outside of the context, but it’s greatly relevant for users managing their data). The issue is that before, users could wrongly have different property names for property values that they would want to keep the same, the new global properties page help mitigate that quite a lot, but we’ve also created a new field called “Default property name” in which automatically applies that label to all answers in that question. Every answer’s property name is linked to the main default property name, so whatever change you make, it applies to all others. Meanwhile, if users want to make it different, they can individually change that, overriding the property they want.
The default property name rules the properties for every answer inside a question.
When hovering on an individual property, it highlights that it can be individually edited.
Once overwritten, the input field is no longer blocked and enabled to be edited.
Hovering on the reset button highlights the option to reset the property to default, reverting it back to its link to the default property.
Results and takeaways
This was one of the most complex and demanding projects that I’ve worked on in my career. Mostly because it had major impacts on:

- This is the heart of the data pipeline for users and it can make or break their ability to grow their database.

- Due to its relevance for users, it’s also a key part of Octane AI business, and executives were often involved in discussions and presentations during the iterations.

-High impact on technical structure, we had to make sure whatever solution we would come up with would not significantly cost a lot of development time before it reached users’ hands.

I’ve grown as a designer and a professional working on this project, especially seeing the impact it has now that it’s launched.
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)
hello@murilloperecinotto.com