brandmanual a 2014 Guide to the company and travel app
brandmanual | 1
table of contents
2 | brandmanual
4 5 6 8 10 12 14 16 18
what is the LEGO group mission & brand values logo & logotype our travel app user interface colors typefaces travel app logo my contribution
brandmanual | 3
what is the LEGO group?
4 | brandmanual
The LEGO brick is a construction toy geared toward inspiring one’s creativity through playing and learning. Whoa, wait a minute - a toy that teaches a lesson? “Fun is all I want in a toy” is all a 10-year-old could care about at that age. As a company, we value the amount of fun one has. At the same time, we strive to foster imagination, creativity, learning, caring, and quality. The creator of the LEGO company Ole Kirk Kristiansen intended on creating a toy that children would “play well” with. Which goes around full circle since the name ‘LEGO’ is an abbreviation of the two Danish words “leg godt,” which translates into “play well.” Oh, and why Danish words? It’s because the family-owned LEGO company was founded and based in Billund, Denmark.
Imagination Imagination is the answer to one’s curiosity and the ability to think of new things.
the mission
Creativity Creativity is being innovative, with the ability to create things that are new and surprising.
Fun Fun is the experience of happiness we have when we are engaged in an activity.
photo taken by Kenny Louie www.flickr.com/kwl
“inspire & develop the builders of tomorrow�
Learning Learning happens every day. The willingness to discover, experiment, and apply yourself is the opportunity to expand your own knowledge.
Caring Caring is what we as humans do onto other humans. To care is not a forced habit - rather, caring is done because it just feels right.
brand values Quality The branding behind the LEGO company ensures the world a product with originality and quality. A few tips to help protect our branding: the LEGO brand name should always be written in capital letters and must never be used as a plural (i.e. LEGOs), possessive pronoun, or as a genetic term.
Quality is assuring the best product is consistently produced every time.
brandmanual | 5
photo taken by Lee LeFever www.flickr.com/leelefever
6 | brandmanual
logo & logotype
The LEGO logo consists of a red square encompassing the word “LEGO.� The most current version of the logo is displayed on the right and was created in 1998. The squareness of the logo attempts to standardize on a single global logo and remains to be the most recognizable version of the brand. The logo and logotype must never be tampered with. This upholds the integrity of the trademark. It is important to always display the logo as shown in this manual. The logo must always be surrounded be a minimum border 1/5th size of the logo. The smallest the logo may go is 8 x 8 mm.
The official LEGO logo
The color version of the logo (Pantone Red 485 C and Pantone Yellow 109 C) is the preferred logo and should be used wherever possible. A black and white version of the logo is also acceptable for printing purposes.
1934
1940
1950
1955
1956
1960
1973
brandmanual | 7
our travel app
LEGO Checkpoint Checkpoint provides users with the most important travel information at-hand.
For the LEGO Travel app, our team’s goal was to lay out a journey for employees’ to follow with ease. The app was created in a span of four weeks (Fall 2014) by a team of graphic designers at California State Polytechnic University, Pomona. Provided below are the graphic designers listed in alphabetical order: Paige Gutierrez Andrew Hassan Kevin Higashida Sophia Zhuo Li Jeremy Wong
why the name? When we were brainstorming the various features of Checkpoint, our team liked the idea of having a homepage divided into three sections: a navigation, a current activity widget, and a profile of the employee. Focusing just on the Current Activity/Stage of the trip (which is the center section,) employees are provided with step-by-step information. For example, when the user is at the airport, he/she needs their flight information and boarding pass.
Checkpoint
8 | brandmanual
Checkpoint gives exactly what is needed at the time it is needed. Once the task is done, it is like that “check point” has been accomplished. That’s when our app automatically moves on to the next important step, or as we like to call it - checkpoint.
Checkpoint
brandmanual | 9
user interface
The Checkpoint App is designed to focus on the current trip’s checkpoint at-hand, so that the traveler does not feel overwhelmed with an abundance of information. When LEGO Employees open the app, the splash page opens to load the contents of the app. Once loaded, a sign-in screen is provided for employees to enter their LEGO Identification Number. After the I.D. is entered, the employee will no longer need to re-sign in before each use. For their convienence, users can add custom checkpoints to their itinerary, however the Checkpoint app plans pre-existing checkpoints in accordance to the current trip.
Checkpoint
Design credit goes to Jeremy Wong.
Splash page
Flight
Design credit goes to Jeremy Wong & Sophia Li.
Design credit goes to Jeremy Wong & Kevin Higashida.
Flight Home Page
Transportation
Hotel
Add a New Checkpoint
Meeting
Custom
Note: To the right are examples of checkpoints and how the boarding pass, Hotel, and Meeting widgets would look. The icons above are all the checkpoints within the app: Flight, Transportation, Hotel, Meeting, Custom, which were created by Jeremy Wong & Kevin Higashida.
10 | brandmanual
The main page consists of the navigation bar, current activity widget, and employees’ profile. On the screen above, the activity widget is currently focusing on Flight information. After the employee boards the plane, the app will automatically move itself to the next checkpoint. Next checkpoints consist of: Transportation, Hotel, Meeting, or Custom option.
The Tools layout above was designed by Paige Gutierrez.
Below are the available tabs: Tools, Maps, and Security. The tools has a translator, currency exchanger, and receipt archiver. Employees can type in text, speak, or photograph any unknown language and have it translated into a preferred language. The currency exchange will convert any monetary value into another countries’ currency. The receipt archive has a camera to take a photograph of business expenses. Once the photo is taken, the receipt is sent to the LEGO headquarters.
The Maps layout above was designed by Andrew Hassan.
The maps can be used to locate fellow LEGO employees in the same country, find a place to eat, direct one to the local hospital, and more. Basically, the maps will give realtime directions with duration for the employee on their trip. The security provides LEGO employees with important contacts (i.e. LEGO Executives, Hospitals, and police stations and their insurance information.
The Security layout above was designed by Paige Gutierrez.
Navigation Bar: Maps, Security, Tools
brandmanual | 11
Checkpoint Yellow R G B
255 204 0
Checkpoint colors The Checkpoint app sticks to a simple white interface with the use of primary colors Blue, Red, and Yellow.
Checkpoint Red R 255 G 59 B 48
As a team, we did not want to stray far from the corportate LEGO colors. The colors used in Checkpoint are less saturated compared to primary LEGO colors. This decision was made so that the colors were easier on the eyes. We didn’t want LEGO employees to feel irritated when they’re traveling. Rather, we intended for a calm and comfortable journey with the use of our Checkpoint Blue, Checkpoint Red, and Checkpoint Yellow. If you didn’t notice, we designed our navigation to resemble the profile of a LEGO brick.
Checkpoint Blue R G B
12 | brandmanual
0 122 255
colors
Pantone 485 C
LEGO corporate colors help convey our brand personality. Please use the color palettes as specified on this document when displaying the LEGO logo.
Pantone 109 C
Primary Corporate Colors
Pantone 1505 C
Pantone 444 C
Pantone 299 C
Secondary Corporate Colors
Pantone 390 C
Pantone 219 C
Pantone 300 C
Pantone 347 C
brandmanual | 13
typefaces
The typefaces used for the LEGO company are key elements of the brand. The LEGO company has created three typfaces that are used throughout their products: LEGO CHALET 60, LEGO CHALET 70, and LEGO CHALET 80. For more descriptive text, the LEGO company uses Arial and Veranda.
LEGO® CHALET 60
LEGO® CHALET 70
Bold
Bold
Bold Italic
Regular
Regular
Light
Regular Italic
ARIAL Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789!@#$%&*(){}[]+=_?<> Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789!@#$%&*(){}[]+=_?<> Light
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789!@#$%&*(){}[]+=_?<>
14 | brandmanual
VERANDA Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789!@#$%&*(){}[]+=_?<> Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789!@#$%&*(){}[]+=_?<> Light
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 0123456789!@#$%&*(){}[]+=_?<>
Checkpoint
Gill Sans Helvetica Neue
The official name of our LEGO travel app
Checkpoint typefaces We decided to use two typfaces for the LEGO Checkpoint travel app: Gill Sans and Helvetica Neue. The introduction of the typeface Gill Sans happened when team member Jeremy Wong used it in iRise. After the team agreed that Gill Sans worked for our app, we decided to stick with it. For our travel app, we wanted LEGO employees to feel the app was profession yet comfortable. Since the app was intended for the LEGO company, we felt the typeface should not lack playfulness. Gill Sans is a sans serif, typically noticable because its weight is slightly bolder than most normal body typeface. Throughout Checkpoint, Gill Sans is used for the logotype, main titles, and the homescreen activity widget.
Checkpoint
o
An influence to use Helvetica Neue came from its standardized use among iPhone apps. We loved the readability of the typeface. Helvetica Neue is used throughout Checkpoint for listed items or more informative details.
Checkpoint
brandmanual | 15
16 | brandmanual
Checkpoint logo and logotype
A lot of thought went into creating the logo for our app. A team member was responsible for sparking the use of the LEGO brick side. We loved the visual look of a checkpoint while still upholding the integrity of a LEGO brick. During our sketching process, we all sketcked out how we as designers thought the checkpoint logo should look. Originally, the team considered using one point to sit on top of the brick. This would emphasize only one literal point. As more sketches were made, team member Jeremy Wong suggested the use of one full-circle point, but then keeping the rest of the connective surfaces on top. He said it would convey the logo as more of a brick, relating it back to the LEGO company. As you can see, the team decided to follow Wongâ&#x20AC;&#x2122;s idea. The final logo consists of 5 partial circles and 1 full point. The partial circles add depth to the top of the brick surface. The circles sit on top of a black v-like shape. This sharp shape is the LEGO brick representing a checkmark.
Checkpoint
Checkpoint
Checkpoint
Checkpoint
50% smaller
75% smaller
brandmanual | 17
my contribution
When we started designing the travel app, each of us did our own sketches of hopeful icons, logos, and layouts that would be used for the final app. The following icons are my versions of the icon, however may or may not have been used in the final app. Tools The LEGO cog is an existing piece in any child’s LEGO box. As our group was researching what would be the most indexical for Tool Navigation, team member Andrew Hassen suggested the cog: a cylindrical wheel or bar with a series of projections on its edge that transfers motion by engaging with another cog.
Map When our team was considering the map icon, we wanted to stray away from a simple arrow pointer and common usage on exisitng apps (such as Google Maps.) Team member Sophia Li’s sketching process revealed the usage of the globe. I really liked it the idea, so here is what I did as an icon.
Camera Under the tools feature, a translator can be used to translate words into a preferred language. If a LEGO employee comes across a sign they would like to translate, one could simply press the camera icon to photograph the sign. With the photo, the tool will do it’s thing. I made the icon look it was build by LEGO bricks.
18 | brandmanual
Team tasks The team split up into laying out a certain group of pages. While team member Andrew was responsible for the Maps feature and team member Sophia experimented with the Home Page layout, I was in charge of completing the Tools and Security feature. The first three layouts are examples of how the Translator, Receipt Archive, and Currency Exchange would function. The last layout is how the Security list will be displayed for LEGO employees. The Security features contacts the LEGO Executives, local Hospitals, local Police Stations, and files the employeesâ&#x20AC;&#x2122; insurance information.
brandmanual | 19
LEGO brandmanual | a 2014 guide to the company and travel app designed by Paige Gutierrez