Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Workflow

Making the Most of Style Tiles for Leaner Design

This post is part of a series called All About Style Guides.
Style Tiles: An Alternative to Full Design Comps

Style tiles, introduced to the mainstream by Samantha Warren, are a concept whereby the hi-fidelity comp is done away with, instead communicating design decisions in a more abstract way. Some designers have found great success in communicating with their clients in this way, but how can we leverage style tiles' power in small businesses to make our design process 'leaner'?

If you’ve ever worked in a startup, you know the reality - there aren’t many single well-organized, process-driven, systemized small startups out there. Often, people make stuff up as they go and rare are the founders who really know what they’re doing at all times. But that's the fun of the startup world.

The reason for this is that setting up rules and systems is a chore. Sure, it might save us time in the future, but we have to make progress now. And so, through a number of iterations and pivots, we end up with a tangled bunch of procedures.

This approach oftentimes creeps into the design process as well. We build an MVP in one weekend. And then, we don’t really have the time to re-design everything (customers are waiting!) so we build off of that. And in the end we have same-action buttons in our app that look different, or inconsistent typography in the newsletters.

Maybe, we need to pivot on our design process in startups. Delivering hi-fidelity mockups without any prior discussion often turns out to be a complete waste of time - after receiving feedback from the team, the entire process resets to zero. I recommend more of us start implementing the style tiles approach.

Benefits of Style Tiles for Startups

Lean - a production practice that considers the expenditure of resources for any goal other than the creation of value for the end customer to be wasteful, and thus a target for elimination.

Going along with Wikipedia's definition of Lean, style tiles reasonably form a part of ‘lean design’. Their use is aimed at better expenditure of resources, like time and money:

Style Tiles Save Time

It might seem counter-intuitive to add an action into a process that should be shortened, but we are in fact shortening it. Style tiles provide a way to facilitate getting feedback from clients. Replace the word ‘clients’ with ‘the team’ and you have the perfect solution for startups. Even for solopreneurs, style tiles make discussions about style direction and asking for customer feedback so much easier.

Style Tiles Save Money

This applies especially for bootstrappers, where it’s crucial to be extra-cautious about finances as self-funded businesses possess a very limited budget. And for non-designer entrepreneurs, paying for a designer can be one of the largest expenses. Especially when paying on per-hour basis, it's much cheaper to get a high-quality designer to develop style tiles which then a junior or executive designer turns into final designs.

Implementing Style Tiles Into the Workflow

Now that we've established just how beneficial style tiles can be in Startups' workflows, let's peek into how we can apply them.

These are the stages when style tiles can come in handy:

  • Developing a minimum viable product.
  • Asking for customer feedback.
  • Product/brand expansion.

Developing a Minimum Viable Product

Style tiles will speed up the MVP creation process as they separates style from layout. They can also come in handy when design is based on non-custom assets.

A real-life example of this could be a well-known occurrence of newly-founded startups grabbing an HTML/CMS template from the web, furnishing it with their logo, and trying to 'sort-of' get the colors right. Solid pre-developed style tiles will help  ensure that customized web templates look consistent with the rest of the branding.

Asking for Customer Feedback

The importance of getting early customer feedback is oftentimes discussed; but not so much when it comes to branding. Just like product, its design should be tailored to our target audience as well - so why not just ask them? Of course, it's not a particularly great idea to seek approval of each button, but performing a basic testing of a couple of versions can help you make better design decisions.

Just as you would for a freelance client, create two or three style tiles and have your customers (either social media followers or even random people on the street fitting into your target audience) decide between them.

Product or Brand Expansion

Style tiles are the ‘startup version’ of brand guidelines.

In the first stages of a fresh new business, time and money can oftentimes be better spent on style tiles than on an extensive brand guides. They are much more flexible, and allow changes in the future - for example when your business enters the Fortune 500.

Have your style tiles feature all the generic design elements - from typography, colours, to copywriting rules - develop a well-organised moodboard for your startup that sets rules for all communication of your company.

Lean Design vs. Classic Design

In the classic approach, the designer(s) in the team would discuss the goals and purposes of the product. Then, they would sketch up some wireframes, present those to the team, gather feedback, and dive into mockups. After numerous iterations of the hi-fidelity mockups, the PSDs get shipped to developers.

Lean design takes a couple of shortcuts. After getting wireframes approved by the rest of the team, they will create style tiles. Making changes to these is a lot quicker than on finished mockups, which saves at least as much time as introducing this additional step into the process. After getting a yes on style tiles, they can produce the final mockups by just following the guidelines set in the tiles. With enough manpower, it is even possible to prepare elements from style tiles in CSS before even finishing the final mockups.

Hey, work smarter, not harder, right?

Problems With the Lean Design Approach

The main problem with style tiles that I, as well as a number of other designers had faced, is its vagueness. Some clients simply need a concrete representation of their website or app and aren’t able to look through the simplicity of style tiles.

In small teams this issue fortunately rarely comes up if made up of tech or design professionals. In some cases though, especially when co-founding with some non-design folks, it would still make sense to take the tried-and-tested design approach of hi-fidelity mockups.

Wrapping Up

It’s your call. Your team and business will definitely benefit from shortening time, required for shipping a new product, not to mention implementing a better way of working as a team. Test-drive this process in your own company and see if it works for you!

Useful Resources

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.