The new WillowTree website part 1: strategy & design

blog-featured-image website design and strategy

First, Strategy.

A year ago, our strategy team kicked off a “turbo” engagement to assess our (old) website. Peter, our Director of Mobile Product Strategy, and the team set out to review our analytics, hold executive interviews and user interviews, and complete a competitive analysis.

The outcome of the turbo strategy work left us with a clear indication of who our users are, and some key takeaways as to what these people are looking for when they visit our site. You could probably guess our two core user groups, recruits and clients. As for recruits, we identified two primary personas: The young recruit, and the older recruit. website younger WT recruit website older WT recruit As for prospective clients, we identified four key personas: “the researcher,” “the product manager,” “the IT director,” and “the c-level.” Overall, we learned that potential clients want to be shown that we are partners, that we are trustworthy, and produce high caliber work. Through interviewing current and lost clients, we discovered that our site was simply not memorable.

“Don’t remember the website….don’t remember what it looks like. What’s the URL again? It isn’t stored in the long term memory.”

“Didn’t get the feel of the company - whether agency or smaller from looking at the site”

But based on conversations with the clients who did choose us, and new hires, we heard that the feel of being in our office and working with our teams was entirely missing from the website, which felt sterile by comparison.

We also learned that we weren’t addressing common questions potential clients had:

  1. “How well can you do a project like mine?”
  2. “Have you done projects in my space?”
  3. “Do we align culturally? Will this be a good fit” website client personas

Lastly, we weren’t getting across to our audience the level of design work we are capable of. We heard that users didn’t realize the caliber of designers we have from what was shown on the website, and instead of looking like the world-class mobile agency we are aiming to be, we looked more like a high-quality, regional company.

Second, Design.

Like every internal website design project since the beginning of time, there were a couple of bumps in the road. Strategy happened in early 2016, but we didn’t allocate any designers, developers, QAs, or project managers to the project for awhile. First, we tried to put in some “nights and weekends” efforts to redesign, which inevitably petered out due to the demands of ‘real’ client projects.

In the springtime of 2016, around June, our exec team committed to redesigning the WillowTree website, and a team was allocated. Full time.

This allowed us to approach the design phase the way we would approach a design phase for an external client. We held a formal kick-off, and got to work. The key activities in the design phase:

  1. Kick-off: Just like we do for client projects, we held an “internal” team kick-off, and then prepped for a full “external” kick-off with all of our stakeholders. We used this meeting to go over our timeline, the team, high level goals, and run a workshop (item #3).
  2. Stakeholder interviews: Ashley (Lead Developer) and I held meetings with our exec team and other stakeholders to understand success criteria in terms of implementation, design, and content.
  3. Experience workshop: an interactive, dot-voting activity to get stakeholders talking about how they wanted the visual experience to evolve. What did we want to look like? What principles and adjectives describe WillowTree best? website moodboards
  4. Moodboards: Based on the workshop above, we created four visual mood board directions based on key adjectives that could be used to anchor the brand. We landed on Smart, Focused and Intelligent as the words to strive for. website moodboard images
  5. Information Architecture & Product Map: For clients, we create product maps to define the applications we’re designing. For our site, we included an overview of content in the product map to help us distill where content would live. website content map
  6. Visual concepts to Completed Mock-ups: Based on the chosen moodboard, we created two visual directions. From there, we refined a single direction to move forward with for future screens, and mobile mockups. We also started to establish a framework for transition design.
  7. Style guide & documentation: We created a quick style guide to document our typography choices, color, grid, and other elements. We also created a design deck that documents all of the steps above, in further detail, that is used when new team members jump onto the project and need to quickly catch up on context.
  8. Prototype: While all this was happening, Ashley started prototyping early concepts to help us vet the design. We tested various navigation patterns and saw how things were coming together in the browser. Of course, we also had an InVision prototype to document all of our designs, and final mock-ups were exported to Zeplin.

Eventually, we ran out of budget for a full time designer to stay on the project. I stayed on a couple hours of week to assist with design reviews, help prioritize our MVP site from a design perspective, and conduct validation testing with current employees. We used validation testing results to refine copy and imagery, and to help prioritize upcoming features.

It feels great to have finally launched the site and see our work live, despite the fact there is so much more we want to enhance and finesse. Up next, we’ll be completing a thorough design review of the site to assess finer design details like link styles, button styles, and typography, and plan to roll out a transition framework for the site in the coming months. If you read the next piece in this series, you’ll learn how our talented developers created an environment that allows us to constantly make changes and push them to production, without it being a production.