AMA: Help Scout Design Team
š This is the short and sweet version of the full AMA š
We are Jared McDaniel, Sean Halpin and Stephen Murrill, the visual design and brand team behind Help Scout, the customer support solution that helps companies deliver outstanding customer service. Together with the product team, we create what you see on our marketing site and blog, and the experience in the web and iOS apps (Android coming soon!). From brand architecture and landing pages to UI design, product icons and illustrations, our focus is developing and maintaining consistency across all touchpoints.
Recently we announced a major update to our brand, including a new logo and an overhaul of our product UI. See our process, including early sketches and tossed designs here.
Jared McDaniel is the Co-founder + Design Director. As creator of Help Scoutās visual style, Jared remains hands-on in charge of brand and customer experience.
SeƔn Halpin is a Designer specializing in UI design and front end code, but works on a little bit of everything from visual design to implementation.
Stephen Murrill is the Visual Designer and Illustrator, focusing on marketing content, blog and product illustrations, and icon design.
Hey guys! Thanks for joining us.
- What did the process look like internally to ensure the new branding/logo was replaced accordingly across all mediums? (Related, what tools does your remote team use to manage projects of this scale?)
- You mention presenting the progress of the logo at your company retreat, was it more or less finished at that point?ā¦ or did you continually get feedback and make revisions?
- What was the process like working with Focus Labs to take the logo from a static visual to custom animations?
- With the new branding, do you envision the product design will evolve next?
- The blog detailing the process is really, really greatā¦ did you also create a brand guidelines for internal or external use? (maxlind)
1. Trello all the things! Initially we just created a huge checklist of what needed updating internally (marketing, app, mobile, etc) as well as offsite logos that would need to be refreshed on launch day. From there it was just a matter of getting it all organized in Trello and making sure everything was queued up and ready. Either on separate github branches or clearly marked dropbox files. Hereās a quick rundown of how it went:
- Day before launch: assigned each checklist item to their individual āownersā in each department (marketing, product, customer support, etc)
- We created an asset folder in Dropbox with all the versions of the logo/mark for each platform or service
- On launch day, we used Slack to notify everyone on the Trello card when they could start updating, and from there it was just about checking boxes.
2. The exploratory work was behind us, so we came to the retreat with 2ā3 directions we liked; we felt like the most valuable discussions would happen if we focused on 2ā3 versions vs 50ā100. We knew which direction we wanted to go in by then, but it was important to us not to advocate for any specific direction before we got a response from the team. Most everyone resonated with the same mark we did, so that set us on the path to refinements and polish from there.
3. Iāve been a huge fan of FocusLab for years, and had a blast working with them. In terms of process, we had to condense it into a little more than two weeks, so it was a lot of rapid back and forth and they were extremely collaborative throughout. We appreciated that they were open to hearing our ideas, while also coaching us on areas where we werenāt familiar. Custom animation isnāt something we have a ton of experience with in-house, so we werenāt familiar with that design process. They did a great job of walking us through the early concepts (I love this clip they shared of their process behind the scenes), and were open to all of our feedback. As an example, we took one of their mocks and slowed it down to dissect it and fine-tune the details. All of this back-and-forth led to where we are now, and we couldnāt be more pleased with the results.
4. The product is always evolving, sometimes in more noticeable ways than others (like our recent rebrand). With the brand update, we introduced standards around illustrations, icons, color palettes which helped bridge the gap between our products, our marketing site and content. The visual update was something the entire design team rallied around, creatively speaking, so I think weāre all excited to see where it takes the product next!
5. Thatās a big project for us right now, getting not only the brand guidelines refined, but also marketing and app patterns, mobile, voice and tone, located into one place for everyone to access. Weāre working on a new css framework, which has updated our code structure and standards. Some of the critical thinking behind the framework has worked its way into how we approach and maintain our design files, so itās been a major refinement across the board. Itās been exciting to put it all together!
Your use of illustration on the site is great. Iām curious as to how you decided on the fixed stroke width, no gradient style that youāre using. Were there any other styles that you explored? (Matt Baxter)
Shortly before we began the rebrand process, we did consider various styles for our illustrations. At the time, most of the illustration was happening on our blog, so when I joined the team, I used the twice-weekly posts as an experiment to see what felt right. (I wrote about that process here) After trying flat styles, thicker strokes, thinner strokes, the four pixel stroke felt the most versatile. When we began adding icons to the site, we created all of them with the same fixed stroke width for visual consistency. This quickly evolved into a visual standard for our illustrations. Four became a magic number, it allowed everything it touched to scale beautifully on both retina and non-retina displays. Now we use multiples of four, to the point of obsession, for spacing, stroke width, and shape size for all of it.
We experimented with gradients earlier on, but ultimately decided to utilize the colors in our brand palette to create depth. This kind of creative constraint is a fun challenge for me.
You have a very slick rebranding story here but quite often these sorts of rebrands are criticized for lacking originality. The iconography, logo and colour palettes all fall into a very āsafeā and ādigitalā framework.
Were you concerned that you had stripped too much personality away? What were the arguments for and against? (Dan Sherrat)
I really appreciate this question, Dan, because we thought a lot about this throughout the rebrand process. But ultimately we realized that a logo cannot be solely responsible for āpersonalityā ā a brand gets its reputation from everything it does. So we streamlined the logo and came up with something that allowed for flexibility + a little homage to our roots/values.
What were, for each of you, the click moments? Where a change of direction (design or otherwise) made you go āaha!ā and made things just fall into place? (Dirk)
It was more a series of incremental āahaāsā throughout the different phases of the project. I canāt say that a specific shift or decision suddenly provided us all the right answers for getting to the finish line. Overall the design culture at Help Scout is really iterative; we prefer to live with something, and test/learn/react as we go. But hereās a couple of the smaller āahaā moments that come to mind:
- The mark: Mentally, punting on the laurel direction was a big help. After a certain point it became clear we were spinning our wheels and a more refined and unique version of our existing mark just wasnāt going to happen. Wiping the slate not only allowed us to start thinking outside the box, but also rejuvenated us creatively. On the surface the final mark we settled on felt like a simple, organic form, and we liked that. But getting back to our process of living with it first, we spent a lot of time thinking about how it connected back to our brand and values. In the end, I think we were all pleased with just how much it embodied Help Scout.
- Scouticons: I couldnāt be more proud of the work Stephen did on these icons. We love them and wanted them showcased throughout the app as much as possible. But you have to be really careful with such a dense application that customers are using everyday. As superficial as it can sound, point sizes and spacing really do matter and play a key role in their experience. We ended up having to reign it in on the icons to find the right balance.
