At OutSystems, we aim to make our developers’ lives easier, allowing them to save time while increasing their productivity with a great experience. To reach their goals, we’re continually reducing complexity in developing great applications.

And decreasing complexity in our product is exactly what we’re doing with our new inbuilt feature in Service Studio, Theme Editor. You won’t need to go through multiple CSS guides and tutorials to find out how to style your app anymore; now everything’s at the distance of a click!

CSS For Everyone

With Theme Editor, we’re addressing a pain that we had already identified in several use cases. OutSystems developers with no CSS knowledge were spending a lot of time customizing their applications to their company’s look and feel. This led, primarily, to loss of time, and secondly, to increased frustration.

To address this issue, we’ve analyzed product usage metrics and carried out a series of interviews. We learned that the apparently “simple task” of defining the basis of an applications’ styling, such as colors, spacing, and font-sizes, took about a week’s worth of work!

This was a problem, but also an excellent opportunity for us to improve, so we defined our vision:

“Allow everyone to easily and quickly style their app with no previous CSS knowledge.”

With Theme Editor, we wanted OutSystems developers to go through basic application styling in just a few minutes. You can check our documentation page to find out how to get started with the new feature, but what you’re probably wondering is what you can achieve with it.

Main Features

With Theme Editor, you can customize the primary, background, and header colors of your applications by choosing several palettes with pre-defined and engaging color combinations, or by uploading your company or business logo. In the latter option, the feature will automatically use the main identifiable colors in the uploaded file.

 

 

But that’s not all! You can also change the font type and size, the spacing between elements, and the header size. Additionally, the background color and image used in the splash screen is also easily customized.

For mobile applications, Theme Editor also enables developers to choose if they want to have a native view, which allows visual enhancements specific to either Android or iOS apps.

The Process That Led to Theme Editor

We started by interviewing a group of OutSystems developers. We wanted to understand what were their most common application-wide customization scenarios. To maximize the impact and up our game, we also looked at how others were solving this problem.

We took advantage of the existent Theme Customizer, a feature that was created a couple of years ago that ended up being the key to accelerate this initiative. This proved to be a valuable input when building Theme Editor in Service Studio, as the use cases of both tools are similar.

Mobile version of Theme Customizer
Mobile version of Theme Customizer.

At this point, we had enough information to make a few decisions and define what we would support in this feature. It was time to roll up our sleeves and get to work. But wasn’t this looking very much like a waterfall approach? Aren’t we supposedly working in an Agile way?

Yes, we are!

That’s why, during the implementation, every time we had a new capability, we handed it over to be used and tested by our colleagues who are using the OutSystems platform in their daily work. This allowed us to react to feedback and deliver a much better alternative at the end of each iteration.

With every round of feedback, we made the feature’s window smaller, dropping a few features that ended up not being that useful. We tweaked and improved the overall user experience to make it more intuitive.

We ended up with:

Theme Editor for Mobile, Web and Reactive

Here you can see how much you can customize your web, reactive, and mobile apps. There are a set of common variables for every app, such as the Login background color and typography preferences, and other options that are specific to each type. For instance, for web and reactive apps you can edit the page structure, while in mobile apps you can choose to have a native look and feel. In any case, there are countless ways of styling your app with Theme Editor.

Lessons Learned

The whole process of building Theme Editor highlighted the importance of two key aspects of software development:

  1. Work with small incremental deliverables. This ended up being crucial to have a simple and clear result.
  2. Gather feedback that supports your assumptions. Do not assume what developers need. In the end, we didn’t implement everything we had considered since we found out that some of the features weren’t adding any value.

Developing Theme Editor was very challenging, and we had some setbacks and unexpected roadblocks along the way, but the team was able to overcome everything. In the end, we were able to deliver what we believe developers need.

Theme Editor is now available in Service Studio 11.6.11 and Platform Server 11.0.600+, so now it’s your turn! Download Service Studio now, start using Theme Editor, and give us feedback so that we can improve it even further!

Don’t have Service Studio OutSystems yet? Sign up for the personal environment and get started today. It’s free.