Design Methodology P
L
A
Y
B
O
O
K
CONTENT: Branding Case Study ............................................. 1 Methodology .......................................................... 5 Empathize & Gather ............................................. 6 Ideation ................................................................. 10 Rapid Prototyping ............................................... 14 Design Delivery ................................................... 16 Scanability ............................................................. 18 Design Principles ................................................. 20
Branding Proccess The Happy Eight is a hotel chain from Malaysia, the overall design is inspired by bold and vibrant colors of the Nanyang culture – giving their patrons a mixture of culture and art. Strategy: Re-interpreted national culture in an unique way, adding advantage beyond the other local hotels. (1) Collecting Data: After talking with selected sample of 300 local traditional citicents, it`s made list of words that symbolize the city since 1983 to present. Later, the word list is translated into photos, to be easier to understand and translate into Photos, Colors and Design.
Image 1: Moodboard, Culture
The brand identity system has achieved a very strong coherent brand experience while giving uniqueness to every touch-point. Customers can experience the fabulous Nanyang culture and art. The design provides vibrant colors in combination with mysterious asian symbols. This colorful hotel brand identity looks unique and very appealing.
01
Image 2: Local Textile Patterns After Interviewing representative sample of oldest tailors, textile factory designers and old local wemen, (2) Generated Pattern that mark this antient city spirit.
Image 3: Adding Feeling of Royal service (3) Ideation In order to add competitive advantage, and lift the impression for the hotel on higher level, Royal blue was established as a basic color. And added details of gold Nanyang royal crown.
02
ROYAL Gold cover represent luxury service
01 02
DEEP CULTURE Mono-chromatic Image with hystoric content
Brand Layers
ATTENTIVE COLOR Catches Viewers Eye
03
YASON MASCOTE Is a seed from the Looking Glass Tree (scientific name Heritiera Littoralis). For The Happy 8, Yasoh is our family mascot. It represents life long happiness and good luck. Establishing a cult.
CHARCOAL Most of the populations uses charcoal with fire; to heat or to burn and produce oils. Happy 8 hotel is heating the place with Stone Age Dry Wood Charcoal Briquettes. Natural enviroment.
WOODEN INTERIOR The woods that we have in The Happy 8 Retreat are all adopted 20+ years ago. None piece is made of living tree. Here they show their Social responsability.
Enjoy a cup of joe or freshly squeezed juice from the bar. Indulge yourself with a meal in Happy 8 Cafe and let your senses explain the delighting experience; food for the mouth, pleasure for the ears and aestheticism for the eyes. With parted space, lanes and corridors in our Old Town branch, to some it’s like a maze but to those who appreciate arts and culture, it’s not a maze, it’s amazing.
03
Image 4: Simple Versioning (4) Rapid Prototyping - applying 4 different vivid colors following the same design concept. Giving more options to the client, leaves impression of higher value offer. The business can be divided on segments or types of services, then each color links to different product group. All versions should contain the brand DNA. Story can be different to achieve variety and sence of many choises.
Image 5: Testing color preferences and technical application
04
Design Release (1) Collecting Data: After deep personal interviews with their best quests, the hotel inspects there is a trend of social isolation and people feel lonely. (6) Market Operation: They decided to offer them offline experiences by grouping guests with similar profile & interest and friending them throw organized tours/private parties. Event photos are beautified by professional photographer who makes scenarious and documents the best moments to be published and spread viraly.
Image 6: Omni-Channel Consistency LOCAL MITH
To arraice people`s interest, Hotel 8 invented a mith for the place: Queens private Affair room which they keep it locked. People are curious to see how queens private arrea looked like. Coocking courses dives guests into the local culture and connect them with the place.
BLOGGERS
“Emty room is most expensive room”- they say. In times when the hotel is in bad season, they invite bloggers for free or makes special packages for big groups 15+. To increase the value of ther offer, they integrated private organic farm where quests can enjoy authentic rural life.
ORGANIC FARM
The farm has a garden where you can pick and prepare your own breakfast and many small goats for the guests to play with. On their website 24h camera, anytime you can check the kitchen, the loby or what happenes on the farm, to show their transparent working.
CLIENTS BOOK- The hotel opens a personal record of their quests and follows their birthdays, interes, personal lifestyle and preferences, to treat them follow-up gifts after they leave and invite them on next events.
05
Design Methods (1) Empatize & gather . (2) DEFINE LANDSCAPE . (3) IDEATION . (4) RAPID PROTOTYPING . (5) TESTING . (6) PROPOSAL . (7) DESIGN RELEASE
Empathize & Gather
Trust Markers: find and add new
CHECK PRODUCT OWNERSHIP- Operating with Corporate product (Example: franchize) has already predefined general strategy and legal limitations for branding and market operatioons. Often they provide Extranet and Brand Book.
®
denotes a registered trademark, and may only be used when marks have been federally registered.
™
is used to alert the public and does not require filling federal applications. It means trademark, which is dairn of ownership for goods and packaging.
SM
means service mark and refers to a unique service. This appears on any form of advertizing and promotionalliterature. It does not require filling federal registration.
PRODUCT FAMILY - Brand Family (Umbrella Branding) is a group of different products belonging to a single brand that are marketed under their parent brand. Requires high quality control of the design, because every single item is considered representative of the entire line. A lower quality design may hurt sales of the better quality products and reverse. The kid logo, should go together with the mother logo, especially when the brand is new and still unfamiliar to costumers, to enherit the familiarity of the mother brand. Be cautious to mother brand not be overshadowed by the new brand. It should always stay “the root”.
FedEx
®
Express
FedEx
FedEx
®
Ground
®
Corporation
FedEx Freight
FedEx Office
FedEx
®
Extended logo
Contrast enhancing lenses are available in six tints, each suited to specific weather conditions.
®
Trade Networks
06
SPECTRUM SPHERE
®
Colorful People wear Colorful Lenses Corporate logo
NEW USE
Image 8: Adding New Functionality
To find new ways of using the product, we need to dig deeper into the advance users lifestyle, accessories you can add to your product, and the competition offer. Add attractive new ingreedients, make the product “healthy”, “Easy” to use, “Multifunctional” or better looking. Offer improved product/ service.
EXAMINE USER PATH - To be able to “Get into the shoes of the clients” and understand how he will behave, we need to define the Profile of the Buying Persona. Good design ideas can come from inspiring customers stories and customer compaints.
07
We start from companys promise, our buying persona human needs, it`s stereotypes, and ways he can be convinced, shocked, become curious and remember easy. Right timing is really important. Reactvertizing is a message that offers solution is the right time when the problem shows. As this example on the photo below:
Image 9: Reactvertizing - (NFD) Near Future Design
Image 10: Personalisation
08
RESOURSES - Innitial search for resourses starts from company Web sites, corporate Brand Book and company Extranet (online library with pre-prepared images, text and guidelines in line with the general strategy).
If we design from scratch, initially should be created mood board (Stylescape) to show the general feeling and the voice of the brand before we strart designing.
Image 11: Global Extranet
SEARCH
Example: If we upload image on pinterest, under this image shows other similar images. With hashtag (#) keyword, we can search progressive ideas on instagram.
Subscribing to modern design channels for e-mail Newsletters, following News in Design Blogs Feed, Design Books and Advices Exchange with creatives is a great sourse od fresh ideas. In case of a creative block, a walk in a supermarket can wake up the creative pottential. Search by image: Search engines provide finding images by similarity (content, style, color palette). The cleaner the area, the better results will output (no logos, text or details over it). If their is watermarks over the image, it will search images with watermark. If the photo is blue, the result will be blue palette images.
09
Ideation A mood board is a type of collage that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use moodboards to develop their design concepts and to communicate to other members of the design team.
Image 12: Moodboard
S = Substitute C = Combine A = Adapt M = Magnify P = Put to Other Uses E = Eliminate (alternative is Minify) R = Rearrange (alternative is Reverse)
10
Inverse Thinking
SCAMPER is an idea generation technique that utilizes action verbs as stimuli.
Step 1: Show the enviroment
STORYTELLING IMAGES You know in this modern age viewers are cluttered in sea of information everyday, it`s hard for them to remember informations and they have short atterntion span. What to do when words don`t work? Tell a story with an image!
Step 2: Introduce Characters/s
Step 4: An action shoot
Step 3: Capture the details
Step 5: Show the result
If you feel that the background is too messy or cluttered, you can simply use a shallow depth of field to get that blurry background. For dramatic impression, get perspective from: up, down, eye level photos, and rule of thirds. Show an action, and the result of that action. Period of time you can show with composition of few related images. This final photo should add a full stop at the end of the story, and ideally, leave the viewer with some kind of emotion. We need serial set of images, to show consistent branding on different platforms and visuals, and not be boring to the viewer.
11
12
Visual Clues
Brand identity should attracts new customers, while making existing customers feel at home.
MIND MAPS
We use this technique to pour out all our ideas into an organized fashion. There’s no good or bad, all ideas are put down as soon as they pop into our heads, and we can worry about organizing them afterward.
BRAND ECO SYSTEM
Connect the new design with the brand`s Eco System: (1) Font (2) Colour Palette (3) Pattern/ Texture (4) Photography (5) Animation (6) Sound (7) Layout (8) Tone od voice
Brand DNA: Mother - Daughter similarity
Frankenstein Method: Reconstructing old logo
13
Rapid Prototyping
Logo Design: Sketching and Refining
14
TRAME DI LUNIGIANA Logo for a small Italian mountain Village famous by castles and sea tourism.
+
mountain
+
castle
+
sea
=
badge
logo
?
Pattern: Developing elements
TOWEL
SOLD WORLD
TOWEL
SOLD
Same Shape, Different Message
6A GOOD
6A GOOD
WORLD
WIDE WIDE FOR FOR 20 YEARS 20 YEARS
15
Design Delivery
VERSION Itterations - (1) Deliver low fidelity skethes with reference humber and side notes for each version. (2) Adjust the tickness, size and still don`t apply color (to choose strong shape not base on color). Refine proportions, tracking, kerning and adjust optical balance. (3) Choose the exact Color Palette. (4) Next produce inexpensive downsized versions of the packages, trying options of materials and prints.
16
DESIGN Kit Delivery - Visuals Pack we deliver in next format: ai, pdf, eps, svg, png. Additionally we prepare Guidelines manual: Design variations, Design Construction, Color Codes, Typography (and font links or .ttf files). When multimedia is included we add: Code files, high resolutions videos and web optimized videos. Handover Document.
Timeline image: Showing the time from getting pregnant to the moment baby starts walking (multiple exposure technique).
Scanability Scannability is the way to present the content and navigation elements as the layout that can be scanned easily. Scanability can be improved with: Visual hierarchy (size, color, contrast, proximity, negative space and repetition), Easy reading of the CTAs (Call to Action Text), changing words with numbers, using bulleted list, Highting the key information in the text, use images instead of text.
EYES IN CAMERA
Eye looking straight ahead Only 6% of 200 usability test participants looked at the product.
EYES IN PRODUCT
Eyes looking towards product 84% of usability test participants now looked at the product.
Show difference
18
Break Pattern
Movement
Focus: Decluttering noise of the main object
19
Design PRINCIPLES (1) SIZE & SCALE . (2) COLOR & CONTRAST . (3) TYPOGRAPHIC CHIERARCHY . (4) SPACING . (5) PROXIMITY . (6) NEGATIVE SPACE . (7) ALIGNMENT . (8) RULE OF ODDS . (9) REPETITION . (10) LEADING LINES . (11) ROOL OF THIRDS . (12) PERSPECTIVE
Size & Scale
Before
After
Color & Contrast
Before
After
Typographic Chierarchy
JANE JANE SMITH www.namewebsite.com (000) 123 456 789 info@namemail.com
SMITH
www.namewebsite.com (000) 123 456 789 info@namemail.com
Before
After After
Before
After After
Spacing
21
Proximity
Before
After
Negative Space
Before
After
Alignment
BEST RECIPIES
Before
BEST RECIPIES After After
Rule of Odds
Before
22
After After
Repetition
After
Before
Leading Lines
Before
After
Rule of Thirds
Before
After After
Perspective Eye Level
Eye Level
Before
After After
23
OSENS.CN
