How to Accelerate Your OutSystems Front-End Development: A Live Style Guide Story
A couple of days ago, I was cleaning some old boxes and found a Kodak camera roll probably from some old camera that I don’t even remember I had. A nostalgic feeling immediately hit me. Who would have thought that a multinational company like Kodak would have the fate that it had? I mean, kids today don’t even know what rewind a roll means, even less what it is like to only have 24 photos to take. You surely wouldn’t waste them on selfies.
Kodak is probably one of the best examples of a company that took a violent blow from digital transformation. It’s also a real eye-opener for companies; no matter how big and popular they are, they can never neglect the market trends. Customer habits change, new and disruptive players join the party, the pressure to come up with innovative products raises. Those are the times we live in.
But let’s face it. It’s not easy to launch a new and innovative product from scratch. First, you need to have the idea, then your development team has to build it when they’re already too busy dealing with their own backlog: probably a few internal apps to increase your business efficiency, or some customer-facing apps to get closer to your customers and ensure their loyalty.
If you have a business, or if you’re a developer, I don’t need to tell you the pressure that development teams are facing to deliver more apps faster. As a consequence, sometimes they have to sacrifice parts of an app to keep up with the increasing requests. And most times, the first thing put into the second plan is the front-end.
That’s front-end development.
Let’s Talk Front-End Development
I’ve talked about the importance of front-end development in another post, so I won’t dive too deep on the subject. But when a company neglects the front-end of their projects a lot of things might happen: your projects have a poor look and feel which may compromise the user adoption, your brand might be affected and your overall image can lead to your users’ mistrust. An example I like to use is netbanking apps. Would you trust your money with a bank whose mobile app looked like this:
Even if the back-end is out of this world, the first contact your user has with your app is through the front-end, and if that’s bad, it can mark the end of what it could have been a beautiful relationship.
But what can one do if the time is limited and the pressure is high? Well, I have three words for you: live style guide.
From Live Style Guide to Customer Love
You can find a lot of information about what is a live style guide in this article, but I’ll share with you a quick sum. A live style guide is a set of documents with ready-to-use brand theme colors and patterns. It is an essential element to ensure compliance with brand rules, user interface consistency and to foster usability. This way, your development team doesn’t waste time coding front-end elements because they’ve already been built following your brand’s rules; your team only has to drag-and-drop them to the app.
Since your development team doesn’t have to be worried about the front-end of the app, they can focus on the back-end and deliver an even more incredible app much faster. In fact, by using a live style guide, you’re able to increase your development speed by up to 300%. Here are some of the key benefits:
- Better visual quality
- Improved user experience
- Less need for front-end and expert skills
- Design consistency
- A future-friendly foundation that your organization can change, expand and evolve over time
- Elimination of most gaps between designers and developers
At Hi Interactive, we’ve been helping our customers increasing their development speed while ensuring brand consistency for a few years now. Our live style guide are delivered in an OutSystems app and our offer includes patterns, customized themes, and sample pages.
Patterns
After an in-depth UI and UX analysis to your business, we deliver dozens of reusable patterns from the Silk UI Framework, that your team can drag directly into the app’s screen, removing the CSS and JS complexity.
Customized themes
Our themes are customized according to our customer’s brand and visual consistency. This way, we’re able to optimize the development process and user experience.
Sample pages
Our sample pages are created based on the identification of the main tasks and pages performed by the UX analysis. We include up to three custom pages that your development team only has to copy and use.
These components are created using blocks, placeholders, input parameters, and expressions to provide flexibility. They are all tested across different browsers and devices, including mobile devices, to make sure they’re pixel-perfect.
Here’s how a live style guide works:
Are you ready to build a future-proof business? Let’s talk!
