Eli Review v3 Logo

The process by which our team searched for a contractor to develop a new logo according to very specific requirements.

Client/Project: Eli Review
Timeline: August 2018
Objectives: Develop a new logo and color palette that are responsive, accessible, and work better in a variety of formats.
Team:
  • Jord Riekwel, Logo Developer
  • Mike McLeod, Head of Product, Eli Review
My Role: Requirements, talent hiring, feedback facilitation, iterative development
Categories: , , ,

Overview

This is a case where I got to start things from scratch. Our original logo was designed without much consideration for applications beyond the screen, or even for responsive screens, which has complicated my life as a designer ever since. This is how I developed the requirements for a new logo, hired a designer, and shepherded our team to select and agree upon a final logo for the new version of our app.

Backstory

The logo for Phase 2 of Eli Review turned eight years old in 2018. I’ve used it for a wide variety of purposes, from websites to stickers to lanyards. For the latter two examples, though, this logo does not function particularly well – the skinny letters do not respond well to a smaller scale, and on something as small as a lanyard, practically disappear.

The variations of the Eli Review Phase 2 logo with the tiny, tiny letters and the frustrating multiple circles.

Likewise, the multiple circles of the main logo make it difficult to use the full logo for almost any purpose where there isn’t abundant space. It works great on a banner, but not so much on a pencil.

The odd shape and size of the logo also keep it from working in a variety of modern contexts. Its odd shape does not respond well to variable screen sizes, for example, making utilizing it in a fully responsive web design challenging. Likewise, the color palette for the logo and the app in general were never designed to be #a11y (an accessibility framework) compliant, meaning that we were not doing the best we could to design a fully accessible product.

In the summer of 2018, with the commencement of our work on Eli Review Phase 3, we took our first step beyond requirements gathering and started work on a new logo and color scheme.

Scope

I worked with our team to prepare a full set of requirements for our new logo. I ended up turning those requirements into a full Job Description (Google Doc) that I used when we began recruiting designers.

The most important components of the requirements for both the logo and the color palette were responsiveness and accessibility. The logo absolutely had to be able to respond to different contexts and uses, meaning that it needed to transform as needed. Likewise, when a final color palette was selected, it needed to be fully #a11y compliant and provide strong contrast for low-vision users.

From the job ad:

Logo Requirements

  • Responsive – must have independent text and iconography
    • Capable of displaying independently or together
    • Capable of responding to different resolutions (examples of responsive logos)
    • Must be easy to read on small screens (particularly mobile)
    • Possibility: name “Eli” as logo
  • Must be usable for a variety of contexts
    • Print – business cards, flyers, letterhead, etc
    • Web – website, app, social media, etc
    • Swag  – patches, stickers, magnets, lanyards, etc
  • Colors must be complementary of or directly used for marketing site and app
    • Either in similarity or sufficient contrast
    • Must work in grayscale and in color
    • Ideal: accent colors from app signifying student or instructor roles should play a role, signifying that both are critical components

Color Palette

  • Must stand apart from standard educational technology (e.g. drab, clinical)
  • Retain color profiles for user roles
    • Colors differentiate app by user type (blue for instructors, green for students)
    • Introduce third, distinct color for administrators
    • New app will have consistent colors for standardized elements (e.g. toolbars) but will use primary colors as accents to visually signify different roles)
  • All color palettes and combinations must be accessible
    • No critical meaning conveyed through color

#a11y-compliant contrast, particular focus on accessibility of data visualizations

With the scope of the project set, I set about recruiting designers. Over the course of two weeks and several interviews, we chose logo designer Jord Riekwel to design the new logo for us.

Process

With the requirements in place and a designer hired, we began an iterative design process. Jord would get back to us with two rounds of sketches for feedback, then a first digital draft based on what we chose from the sketches, and then a final version with a complete style guide for the new logo and colors. My job would be to shepherd his work through our organization, distill everyone’s feedback, and then work with Jord to move to the next iteration.

The first round of sketches from our designer, Jord Riekwel, prepared based on the requirements and my mood board.

Jord’s first round of sketches were based on a Pinterest mood board of logo designs that I’d been assembling for a couple of years in anticipation of this design work. These examples were meant to give some aesthetic direction to the practical requirements, and he took those examples and came up with a wide range of possibilities.

Our team, however, ended up preferring the route of a creative text treatment. They responded well to several of the examples where Jord worked on the name of the product, including monograms that might be useful for a small version of the logo in a responsive website or icon.

The second round of sketches, this time focusing on type variations based on feedback from our group to the first round.

Jord’s second round of design focused heavily on the text treatments. He provided the team with several examples of type that he found interesting and complimentary to our design aesthetics, and our team responded very positively to one specific selection.

Round three, where Jord took the typeface our team identified from round two and developed it out into a full logo.

In the next to last round, Jord took the type chosen in round two and prepare full mockups of a responsive logo. I was very encouraged at this stage, until someone on our team realized that our monogram “ER” is also the abbreviation for “Emergency Room”, so it was decided to use the short name of the product “Eli” rather than the monogram.

A screenshot from the final brand guidelines Jord prepared based on all of our feedback to that point.

In the final version of Jord’s iterative work, he presented a fully developed brand guide based on his work, including logo treatments and a beautiful color presentation (download the complete brand guide).

Outcomes / Takeaways

This is the first time where we’ve worked with an outside contractor and had clear expectations outlined in the requirements, used those for hiring purposes, and then used them for completion benchmarks as well. The result is a very nicely designed logo and a relationship with a talented designer (you should hire Jord). For all future work with contractors, we will have equally detailed requirements that lay out exactly what we need and what we expect from the deliverables.