CRE ToolboxNEW APP ICON DESIGN

Why Change?

■ To Make a Splash

■ To Correct Errors in Branding of the Existing Icon

■ To Fulfill Our Branding Goals with a New Design

Making a Splash

■ The app icon is the “face” of the app.

■ We are making a significant upgrade of the mobile app and want to draw attention to this fact.

■ The Reply Messaging functionality has huge potential to improve drivers’ jobs; we want to take to full advantage of this opportunity to be recognized for responding to drivers’ wants and needs.

■ We want to encourage drivers to update their app.

■ A new look, along with a major version increment - “V2.0” - will give this event the attention it deserves.

Correcting Errors in Branding of the Existing Icon

■ Let’s consider the value of the existing app icon—What were they thinking? How did they get...

■ They retained the red from our logo.

■ They used one of our heading fonts.

■ They used a version of the crest.

from this to this?

Correcting Errors in Branding of the Existing Icon (cont.)

■ The font is a poor choice.

■ The crest is a poor choice.

■ It does not fulfill the intended role of a logo.

■ It lacks continuity with its other uses.

Correcting Errors in Branding of Existing Icon (cont.)

■ The font is a poor choice.

● As a product of C.R. England that is unique, distributed, and publicized, the CRE Toolbox mobile app functions as a branded product of C.R. England.

● While Geared Slab is an approved typeface in the Additional Display Typefaces category, this does not make it appropriate for use as a logo font for a C.R. England product.

● For a logo to have a unique and recognizable character, it should not use a font that is commonplace in the organization’s materials. We are diluting our own brand.

Geared Slababcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890

Geared Slababcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890

Geared Slababcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890

Regular

Bold

Extra Bold

Correcting Errors in Branding of Existing Icon (cont.)

■ The crest is a poor choice.

● It is an unorthodox usage.

● It does not read well at this size.

● It is below the specified minimum size.

● If it is intended as a substitute for the entire C.R. England logo, it violates the branding rule that we are not to use the crest by itself.

● If it is intended as a brand mark for the CRE Toolbox logo, it fails by any measure of a brand mark—It does not communicate anything.

From Our Corporate Branding Guidelines The crest, alone and at a small size, does not communicate anything. It looks like an indistinguishable blob.

Correcting Errors in Branding of Existing Icon (cont.)

■ The crest is a poor choice (cont.).

From our Corporate Brand Guidelines:

Web UsageWhen using the logo for online applications please use the JPG or PNG version of

the logo. The mimimum height of the crest is 75 pixels at a resolution of 72 pixels

per inch (commonly abbreviated as PPI or DPI). The same spacing conventions

shown above should be observed.

62 px H

iPhone Small Icon

iPhone Large Icon

Correcting Errors in Branding of Existing Icon (cont.)

■ It does not fulfill the intended role of a logo.

● The font and crest are not recognizable as C.R. England.

● It is not memorable.

● It does not convey our character, values, and strengths.

● It feels outdated. ◆ We are proud of our long history, but we are on the cutting edge of technology for our sector.

◆ From the About Us page on our web site: “As a family-owned, customer and employee focused corporation since 1920, we are driven to maintain our leadership role through time-tested services, technology and processes.”

● It is a bad fit for its context: ◆ Its intended use is entirely within a bleeding-edge tech field, that is, as an app icon.

◆ When seen in the context of other app icons, as it will be every time it is seen - either in the app store or on a device home screen - it appears very unsophisticated and as a relic of the past.

Correcting Errors in Branding of the Existing Icon (cont.)

■ It lacks continuity with its other uses.

Embrace simplicity. Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can be hard to discern, especially at smaller sizes. Failed

Provide a single focus point. Design an icon with a single, centered point that immediately cap-tures attention and clearly identifies your app. Failed

Design a recognizable icon. People shouldn’t have to analyze the icon to figure out what it rep-resents. For example, the Mail app icon uses an envelope, which is universally associated with mail. Take time to design a beautiful and engaging abstract icon that artistically represents your app’s purpose. Failed

Use words only when they’re essential or part of a logo. An app’s name appears below its icon on the Home screen. Don’t include nonessential words that repeat the name or tell people what to do with your app, like "Watch" or "Play." If your design includes any text, emphasize words that relate to the actual content your app offers. Failed

Test your icon against different wallpapers. You can’t predict which wallpaper people will choose for their Home screen, so don’t just test your app against a light or dark color. See how it looks over different photos. Try it on an actual device with a dynamic background that changes perspective as the device moves. We could do better.

Good App Icon Design Principles(From the iOS Human Interface Guidelines)

Fulfilling Our Branding Goals with a New Design

Fulfilling Our Branding Goals with a New Design (cont.)

Fulfilling Our Branding Goals with a New Design (cont.)

Fulfilling Our Branding Goals with a New Design (cont.)

And C.R. England Green, to ground it.

Red: Passion — sacrifice for greater good

Blue: Integrity — loyalty, truth

Gold: Prosperity — generosity, reward

Green: A Garden — provision, hope, joy

Silver: Peace and Sincerity

Toolbox

Toolbox

Toolbox Toolbox

Toolbox

New App Icon—Design Rationale

■ C.R.E.

● Instantly recognizable as C.R. England.

● Maintains its integrity even at a small size.

■ Color

● Uses the crest colors in a fresh way.

● Also uses green, from the approved secondary color palette.

● Gradations appear to be lights shining.

● Symbolic Roles: ◆ Green (bottom): A Garden — provision, hope, joy

◆ Blue (top): Integrity — loyalty, truth

◆ Red (left): Passion — sacrifice for greater good

◆ Gold (right): Prosperity — generosity, reward

● Functional aspects of color: ◆ Achieves outstanding separation from all backgrounds, from light to dark, in any hue.

◆ Provides a more complex color profile for quicker recognition and greater memorability.

New App Icon—Design Rationale (cont.)

■ Toolbox Handle

● Enables usage of mark without the word “Toolbox”.

New App Icon—Design Rationale (cont.)

■ Text Version

● An explicit, literal rendering.

● “Toolbox” uses Gotham Thin.

Toolbox

New App Icon—Design Rationale (cont.)

■ Solutions for All Current Uses

Toolbox

Backgrounds Test

Context Test

Toolbox