I’ve finally found the time to tell the story of Segmentify’s new design, which had very nice feedbacks. It was a nice coincidence that I was in an ecole-in-product design country, Germany, as I was writing this article…

Not everyone can make a product, like I always say. I also shared an email with that title in new panel design process with my teammates. The whole team, who succeeded in redesigning the entire panel in 3 months, made me incredibly proud and reminded me how lucky I was to have the chance of working with such a team. Finally, before you read the whole story, it would not have been possible for such a work to emerge unless there was endless trust from our two founders who gave me a vision of their own ideas. I thank Murat Soysal and Ergin Eroğlu for that.

To: All Team

A journey of making good products is a distressing process. There is not enough intelligence or experience alone. Remember that I’ve written for the Chrome extension before, I’ve started to know that making good stuff is not just for everyone. Business, design and engineering processes burden on one hand, as evolving customer needs and growth burden on the other, no time to rest.

By its nature, a rope tears once strained. I don’t get upset to the broken threads because the personalities of the team members we work with allow for more robust connections. The rhythm of life flows precisely in that way. At the end of the day, you see that the making of the product is in the same direction with inquiring the purpose and continuity of your life. Keeping balance becomes vain, so you take a decision and keep going. Start-up journey, products, and life all very similar.

How was the old panel and what is the target in SaaS product design?

The old panel, Segmentify v1.0 as we call it, was a complete engineering design product. The main purpose of the design was to provide the user with every feature possible at the same time, to the finest detail. It was not designed to move the user from one place to the next in the shortest and most effective time, but to “just fit the screen” with every existing feature. It is difficult to name such a product as SaaS, because hundreds of products like Segmentify’s v1.0 version are waiting for customers to use them, but the founders also give a support / training service.

 

I am against product services under the name of “support” or “education”. Especially if this is a SaaS product, one shouldn’t mention support or training. Use it as you like it, get in touch with the documentation as you go into the details. That’s it. This is the SaaS product. Did you ever wonder why there is not a user guide within iPhones?

What was Segmentify’s Expectation from the New Panel?

To summarize what Segmentify does, we should mention 3 products. The recommendation, where you can make product recommendations in your e-commerce and content sites, Personalization that includes popups, push notifications, and so on and Trendify which offers real-time analytics service. These products had to be designed in such a way that they could all be easily used for Marketing, Product and E-commerce managers.

As I started to work with Segmentify, I saw that the frontend developer was needed even if we designed the experience so simple.

Because the main page needed coding information for the kind of the slider, JavaScript and CSS. But the most important point I noticed about the old panel was why you are bringing these to e-commerce or content manager. Marketing departments, e-commerce, or product managers do not have to master these coding details. What she needs is; where and how to show what she suggests and wants to do.

If these could be done, the coding section I mentioned above was no more than 10% of the work, and Segmentify had been given up from 90% of the mass for 10% in the old panel, which was designed by the very same engineer who designed it.

For examples that best describe the situation, I strongly recommend you to follow these two sections from Silicon Valley:
http://www.imdb.com/title/tt5218490/?ref_=ttep_ep7 and
http://www.imdb.com/title/tt5218498 /?Ref_ = ttep_ep9

 

You can also take a look at the “Better UX for ATM” presentation, which I have discussed with a similar approach:

 

Let’s start with the importance of asking the right questions.

Whom we addressed to: e-commerce managers, marketing managers, product managers.

Was coding information?: Yes, but only for the very last steps and 10% for unique product work.

These two questions showed us that the platform would appeal to e-commerce executives-from a different point of view, to the buyer, which is an important question whose budget will be taken. I started to work with the knowledge that I got from all the customer interviews I had done: how the SaaS product should not be. The e-commerce manager will register to the product, add a single line of JavaScript code to each page on its site, and create a product suggestion widget of the desired type on any page. Once they fill in the content according to the type of campaign they want, it will be tested quickly and easily to see if it works the way wanted. Everything goes as planned? They will contact the Segmentify Success team for the required encoding settings, or their own frontend developer. That’s all. We want to achieve this and move on to becoming a true SaaS product.

Closer Look to Segmentify Oslofjord v2.0

Between you and me and the gatepost, it was a product that did not go through a real UX (User Experience) design process. In the research part, I only had the old panel notes that I got from existing customers, my new aim mentioned above, and how a SaaS product should not be. And definitely, engineers would not design, they would voice their suggestions and be listened carefully.

Reaching point B from the point A can be evaluated within a general product design objective, but here my main goal was to take person to point B as fast as possible. That’s because the product works in a way that yields very fast results and you should show it to a customer that started the 14 day trial as soon as possible. All you need to do is to put the first line of .js code on every page on your site. As you do this, you can use the Segmentify panel to post your product suggestions on your site. This is a great power and the user should notice it.

So I tried to make the user find the most basic features fastest and easiest, and get the next step fast. On which page do you want to make suggestions? Keep choosing, what kind of design; Continue to choose, what you want to include; Select, continue. Finish.

I think it is correct to describe the movement from point A to point B in a horizontal plane. So on the far left is the main navigation, next to it are the secondary navigation buttons. We can also evaluate it as a horizontal tabbed structure, which is already offered in the secondary navigation tabbed structure in mobile. Hidden subject or subject, complement and predicate. The most valuable but difficult step, the predicate is at the end. It goes out on the right and it needs make you feel like you are starting another process.

And engineers or developers. We made a great place for you guys. Whatever you want to do exactly, do it here. When you press the Advanced Config button, your favorite black screen opens up, do not worry ?

Reporting screens or as we can call the display screens that show me what I want to see without gibbering. In the page-based hierarchical structure that we build, we designed screens that you can see the performance of your products on that page.

All pages except Dashboard have been redesigned. Despite a completely different design work on this page, we are hindered by the engineers’ “We need to write xyz for it,” and have not been able to publish yet. But I will ensure that the last missing piece of the new design is also completed. That “Funnel View” button was not placed there in vain ?

 

 

You want to send push notifications? Define your segment, write content, select which pages you want to send or when to send, press send. It was supposed to be simple and I think that we designed it that way.

So how well did the UI (Interface Design)?

No matter how good the experience is, if the interface is awful, you should be ready for the mean comments . The interface is your showcase and without it the wireframes can leave you alone with the question “why are we using this color here?”. Here I did not interfere – maybe a little – and I think Omer Fatih Ceviz has done a good job. He handled it well alone. Meanwhile, while I was using Sketch for Wireframes, Ömer used Photoshop. We will listen if he tells his own UI story…

The Technology behind Oslofjord v2.0?

One of the most important decisions we have to make in the interface code was in which language to write. From the nature of the product it is a bit tricky to do responsive. But for executive summaries, reports and emergency actions mobile has extreme necessity . We also needed to make a mobile app for products like Trendify and Bannerify. When we considered all of these, we started to evaluate Angular or React options. Of course we had to find an engineer first and I thought of no one but Bilal Çınarlı for this precious product. In the light of his suggestions we decided to go with React on and our new panel that you use runs on React. As the details are quite interesting, we can read all together when he writes about them…

What will happen in the next versions?

In our roadmap for new releases, we have more advanced personalization fashions,  enhanced Trendify with decision support system modules and more third party integration. All these will be developed in accordance with the UI Kit / Guideline – as far as possible – with the “User Experience” approach we now have in Segmentify, and no manual will be needed. Your product will grow and as much as you can pass it to everyone in the company.

In addition to all the other elements, the product design and development process can be sustained to the extent that you can bring together hundreds of distant parts around modular rule sets. The good thing is, I believe that we achieved this in Segmentify.