Style Guides with Lincoln Mongillo

Lincoln How are you?

Lincoln I'm doing well, thank you Brad, thank you Anna.

Lincoln Sure. Well, for the past eight years I was working at Starbucks as the Web and API Category Manager, which is kind of weird title but it really was a product management role, responsible for facilitating the strategy, vision and road-map for our company's websites and as part of that I helped re-launch starbucks.com as a responsive website and built an open and public style guide and then just recently in December I switched over to a product company called Simple which is an online application and website that basically helps customers manage their financial lives a little bit more effectively through a banking application.

Lincoln My role there is Product Lead, so I work on a very small team of a couple of product managers helping the engineering organisation with their vision, strategy and road-map.

Lincoln Yes and no: when I did it at Starbucks, it was something that was completely new to us at the time. We developed it based on a need that we had internally to align our organisation around the design patterns that we saw in our website and have a common document to describe exactly what the mark-up was, what the visual design was and all the elements that powered our website. At Simple, they already had a head-start for that, given the pace in which they operate, so they were already well tuned in to what the industry was doing, and they have a pretty extensive style guide already; it's just not publicly available. It's all located within their internal GitHub repo and so they've been iterating on that for I'd say the past year and a half, and we've got some pretty big plans to further evolve that and who knows what will happen in the future with that.

Lincoln Maybe!

Lincoln Inasmuch as it's a bank, it's really just a website and an application that sits on top of a bank and so a lot of the challenges that other companies have is the same challenges that we have when it comes to building applications that are hard to build and harder to maintain and so a style guide really helps to ease some of the challenges with making design decisions in a way that is equally yoked to what the interests are of the designers and the developers.

Lincoln No; the origin story of that is, we developed it when we were doing our responsive design project and it was done by a single developer at the time. We had a front-end development team who came together and decided that we needed to have that as an artefact for us when we went about doing the responsive design effort and there was a couple of developers on the team who had done that at previous companies when it was just getting off the ground as a concept, and they found it very fruitful for them and their design process and development processes.

So they ended up building the Starbucks responsive style guide and we've launched it publicly inside of a static directory; it just wasn't linked out externally from any part on our website, nor was it publicly mentioned, and then I was at SXSW a few years ago and I think it was Andy Hume was giving a great talk on style guides and particularly he was commenting on the BBC GEL style guide which at the time was a fascinating insight into how the BBC thought of their design thinking and after that I went up and talked with him and lo and behold Jeremy Keith came up and started asking me about it and I mentioned that it was publicly available, so I just brought it up on my phone and he was like: this is great, you have to show this to the world!

Lincoln It was, once he started to talk a little bit more about it, that's when it really gained a lot of interest within the development community; other people started to comment on it and the sheer fact that it was already publicly available was, to go back to your original question, it wasn't a conscientious decision, it was always out there in the open.

Lincoln All the credit really goes to the developer that put that together. It was a gentleman by the name of Curtis Jurgensen, who was a front-end developer on the Starbucks team at the time, who really had the opportunity to step back from the day to day project work, and as we were thinking about the design challenges that were in front of us with taking the site and re-flowing it through because it was a desktop site.

He had the opportunity to re-think what he needed at the time, based on our team's needs, and born out of that was the style guide, so I think a lot of the credit goes to that front-end development team at Starbucks at the time.

Lincoln Oh yeah.

Lincoln Honestly it was born out of, I think Anna, you did a 24 Ways article on Style Guides at the time, and I think that was also a tipping point for us when we were talking about it that it was an important enough talking point in the industry that we had to really consider doing that as part of our own work and so I think these sort of things fold on each other over time where the importance of it and the significance of it are based on what other people are doing.

Lincoln Yeah. I think it really comes down to design leadership and giving the team the room and capacity to do what they need to do to be successful in whatever project that they're involved in and so if the team is really responding to a need where they have common interests and common goals and objectives where they need to have a style guide to work more effectively together, then it's probably up to the leadership of the company or the team to give them the ample time and room to focus their energy on that and a lot of times there's such great talent out there, you just have to get out of the way and let them do what they need to do.

Lincoln Yeah, I think that's certainly been one of the biggest challenges in that everybody needed to rationalise what the style guide means for them, be it a designer, a developer and I think there's different interests with that with respect to those parties and where it came down for us is that we needed something that was a living document of the site at the time, and we needed something that could change and morph as our design decisions were changing and the style guide really represented a way for us to all rally around different design decisions that were being made and understand how it's making an impact at what you would call the atomic level, to use some of your language, Brad, and I think that if you're looking at something as simple as a carousel or a button, you can see those things in context of where they sit in situ on the page, but when you see it at the atomic level, you're able to really interrogate the mark-up: what does that mean from a semantic point of view? What does it mean from a style point of view?

And then you can start to put these pieces together as components that make up your larger website, and I think the goal of a style guide for us at the time was to make it a living style guide; something that would change and evolve as our design decisions were changing and I think that's a worthy and noble mission, but it's also extremely challenging to continue to use that as the crucible in which you look at all your design thinking through. And this is something that I think that Simple as doing a great job at, that they're really focusing on all of their design decisions based on what is the impact to the style guide.

Lincoln Absolutely, yeah. I think that's certainly one of the key benefits is that from a rapid iteration perspective, you're able to take concepts pretty rapidly with a living style guide and take those modular parts of that component library and then build something new out of that and then do whatever you need to do to decorate it or change it in a way so you can make it something new.

Lincoln Yeah. And you're doing it with real code too. You're not doing it just in a blank white Photoshop canvas; you can start with something that's tangible and demonstrateable, so other interested parties, be it designers, developers or even senior management can take a look at something in the context of what is appropriate to the web, which is the browser itself.

Lincoln Exactly.

Lincoln Yeah, that's certainly one of the biggest challenges is maintainability, and at Simple I can certainly testify to the fact that they've had some pretty significant challenges to that where their style guide is a completely separate code base from their actual living website and I think that's part of the work that's being done right now is to start to bridge the gap between these two eco-systems, so what you'll see in the future is a fully functional website that's built on and powered by the style guide itself, and that process is under way right now.

Lincoln It is, yeah, but the benefit, the risk reward for that or the cost benefit for it is that we'll have at least one way in which we can talk about and look at semantic mark-up and style sheets to define how our site looks.

Lincoln Well, right now, there's a creative department which consists of…

Lincoln Well it's not a bad thing!

Lincoln I know! Well, this was an evolutionary process for Simple. It sounds like what they had previously was a completely cohesive front-end development UX and design team, all within one group and they sort of branched off as needs started to get a little bit more specific and so, recently they've had a creative lead that's been managing the evolution of the brand and the style guide and they've been working to connect that with the marketing website, so the marketing organisation has a reference to it and then also the application development teams who are responsible for what you see as the banking application itself and so we're working to make these things all connect one against the other. And we're also trying to look at how mobile, particularly native apps, play a part in what a style guide might look like for those applications.

Lincoln Exactly.

Lincoln Well, I think that's what we're really wrestling with right now; that's a great question that deserves a lot of care and attention when it comes to addressing how we answer that, because it has significant impacts to the various teams that are working on that code base and so we're working with the teams to come up with a game-plan that will give them what they need to do their job in the most effective way possible but gives us a common way in which we can look at code and mark-up and the overall brand of the company.

Lincoln At Simple, I haven't had enough experience to know what it was like for them as their design processes evolved, but at Starbucks, I can tell you that it's been significantly challenging, because different projects are operating at different timescales and so what we've found is that we were always using the style guide as a reference point but we were iterating in our live code first, in the production site and I found that to be very, very challenging for us because you'd get almost versioning happening within your codebase where it's like you'd have a module that was Version 2 whereas the style guide version was Version 1 and it became a challenge to stay consistent when it comes to a definition of what an atomic element is as things evolve rapidly.

Lincoln Yeah, and I think the answer to that, or at least one of the answers to that, that we were trying to really vet was, how do we use the style guide as the definitive landmark or touchstone when it comes to the changes that we're going to make to the codebase and so when we make changes to that, it cascades and ripples across the entire site, so that becomes the single artefact for us when it comes to the look and feel and also the mark-up of the site.

Lincoln Yeah, exactly. They've used the term style guide driven development, and I think that is definitely the desired end state for a lot of development teams where they can basically all land at one place because if you can do that, it makes what you change in production a lot more easy to manage over the long term; you're able to debug things more effectively. You're able to have a view into how your code base is looking across a site versus having various artefacts show up across hundreds of pages.

Lincoln That's the promise of style sheets, isn't it?

Lincoln I believe there's a little bit of back and forth at Simple where they're trying things out in raster-based image programme like Sketch or Photoshop, just to get a concept done, but they'll quickly move that into working code and iterate pretty rapidly on something.

Their ability to produce work in a rapid pace has been absolutely mind-blowing, how fast they're able to put things together and so typically, what you'd see is a quick Photoshop comp of how something will look and then a rapid iterative process where we're coding and designing and making changes in the browser from that.

A good example of that is that we just launched this New Year's Resolution project which is a fully responsive, beautiful resolution-maker that ties directly into the banking application, so you can set up a goal based on your resolution.

Lincoln It was cleverly put together and the team was able to take that concept and given the interactivity of it, it didn't obviously apply itself too well to a Photoshop mock-up and so our design team was able to quickly, rapidly prototype that in the browser and continued to iterate on the design from then on out.

Lincoln Yeah, I imagine so; honestly, I'm too new to the company to know how effective that was at that particular project, but I can imagine that it must have had some benefit.

Lincoln Well, I think importantly it's the checks and balances that come when you're working with different design teams and different development teams; when they're working together in harmony, it's when they're able to talk and collaborate around design decisions that ultimately are reflective of where the end product is going to be, which is going to be a website; it's going to be shown in the browser, and so the work that the designer is doing within a comp-based environment like Photoshop or Sketch; that's in support of the work that the front-end developer is doing and so inasmuch as possible where I've seen Starbucks be successful is when you have a designer sitting with the front-end development team, running through their ideas and then seeing how that parlays out into code as quickly as possible, and back in the day when it was I would say a little less successful was when you'd have a fully realised comp presented, approved and then thrown over the wall to a developer who then had to somehow miraculously pull off all the effects of what the design was…

Lincoln And I think, I don't know if it's just time within the industry and where we're at as an industry, but those days seem to have gone by the wayside, at least from my experience, where the benefit of collaboration between a designer and developer is becoming the key differentiator to a project's success overall; you're able to move faster, you're able to make smarter decisions, you're able to be a little bit more realistic about what is changing in your design, and to that end you're able to I think work on the artefact that you're creating, the website itself, and ship something that's a little bit more meaningful than just a straight Photoshop comp.

Lincoln Oh yeah.

Lincoln Exactly, and if the two parties can have empathy towards the others' needs, I think that's where you find a real impactful project where a developer who has a keen eye for design sensibilities and a designer who can maybe look at or interrogate some code and make some changes so it's not a burden on the developer, I think that's where I've found a strong, cohesive experience when it comes to the design process.

Lincoln Isn't that just it Brad? It's really all about getting real and nothing is more real than what the actual interface is going to look like in the browser and from that point you're able to, I think, both realise that your work is contributing to a larger, greater good where the mark-up itself, the style sheets, are all the end product and I think it is the common ground that designers and developers are all seeking and it's just that they have different tools to express themselves when it comes to that, but they're all trying to build the same thing ultimately and I find that that's when a style guide is really effective at providing a common ground; I've referred to it as a lingua franca before, between designers and developers where they're able to use their own language when explaining something, like how a button should look or animate and they can have their common interest reflected in the style guide itself where they can see the mark-up, they can see the style, and then can start to interact with it in a way that they couldn't do previously before in any kind of design-based tool.

Lincoln Oh absolutely, and it's a really exciting time to be in this field because the web is changing so rapidly with mobile first design thinking and style guides really help parlay what designers and developers have been working with the medium of the desktop-based interface design and now with responsive design and a style guide sitting on top of that, overlooking the entire landscape, is really such an exciting time to be in this field.

Lincoln No, thank you guys for all the work that you've put into sharing your thoughts and aspirations with the rest of the industry. I think it's because of your work that we're able to do the work for the companies that we work for.

Lincoln You're welcome.