Portfolio_oct05/2015

JOJO MARIA GEORGE

D

P

O

E

R

S

T

I

F

G

O

N

L

I

O

UX/UI BRANDING TYPOGRAPHY PHOTOGRAPHY MOTION GRAPHICS PUBLICATION DESIGNS PROMOTIONAL CAMPAIGNS

Current : UI/UX Designer at Snapdeal 2013 - 2015 : Post Graduation Masters in Design DoD, IIT Guwahati 2010 - 2013 : Complicated 2006 - 2010 : Graduation B. Tech in Mechanical Govt. Engg. College Kozhikkode

JOJO MARIA GEORGE

S WA D E S H BOARD GAME Swadesh is a board game designed for learning the history of Indian freedom struggle for school students. Providing an interactive way for learning difficult topics will help the students in their studies and will create more interest to the subject.

The main elements of the game are the board, the cards, dice and the tokens. The game can be played with minimum 2 and maximum 4 players. Since the duration of the game is fixed from 30min. to 1hr, it is suitable to play during the lecture period.

Event Cards These cards are designed on the basis of the major incidents happened during the freedom struggle. This will help the players to score points.

Personality Cards These cards are meant for creating interest in the players by putting the luck factor in the game

Chance Cards These cards are designed on the basis of the important personalities involved in the freedom struggle. This will help the players to multiply their points.

S A R A H PERSONAL ASSISTANT Sarah is an exclusive fashion assistant for an e-commerce fashion portal. She behaves according to the user’s particular situations and preference. The main attraction is, she will help the user to filter the content visually.

Home Screen Everything (including product thumbnails, banners etc) will have more information button.

The assistant will be there to help when ever the user need information.

Home Screen When the user tap on the assistant it will show personalized stuffs including categories, products, banners etc.

Home Screen When the user tap on more information button, the assistant will show more detailed story about the particular thing without loosing the screen

Home Screen For products it’s shows basic details and the user can add the product to cart without going to PDP

Listing Page In listing hover tap will add the product to hand picked items.

Listing Page The user can access to the hand picked item by swiping up the assistant. He can see few more details about the product in this list. He can add the item to wish list or directly add the cart from there.

He can remove the items or taping on this will take him to the PDP.

Listing Page The user can filter the listing by combing the similar products.

Listing Page The user can remove unwanted items here. Or hover tap will take him to the listing of particular category

Listing Page The filters will added to the listing according to the preference of the user.

Product Detail Page The user can access the hand picked items in PDP as well.

Product Detail Page While taping on the assist will try to give more options regarding the preference of the user.

Product Detail Page If there is any problem regarding the size, the user can go for getting notification when it is available.

Or the assistant will show similar products in the particular size.

Product Detail Page Problem with the price rage, will also serve in the same way as the size.

HIPPIE CONVOY

BRANDING Hippie convoy is a company that deals with colorful apparels. Inspired from the hippie culture that existed in the United States in 1960’s. They believed that, “you are cool as long as you are colorful and comfortable in your apparel”, and stood for freedom, spirituality, change, cultural diversity and of course celebration

Identity The van designed and manufactured by Volkswagen became the identity of peace convoy led by hippies.

The cartoonist representation of the van will directly communicate the message of hippie as well as peace convoy.

C07 M35 Y97 K00

C00 M00 Y00 K19

C01 M20 Y73 K00

C00 M00 Y00 K31

C01 M99 Y00 K00 C06 M82 Y00 K00

C00 M00 Y00 K66 C00 M00 Y00 K47

C78 M11 Y36 K00

C00 M00 Y00 K53

C64 M00 Y25 K00

C00 M00 Y00 K42

C75 M68 Y67 K90 C00 M12 Y29 K00

C75 M68 Y67 K90 C00 M00 Y00 K10

C75 M68 Y67 K90

Typography Galapogos BRK FISHfingers

Packaging The whole package is covered with illustrations and stories about hippies and the lifestyle. The typography color selection and the over all form of the package is inspired from this culture and art.

Hippo Boxer The pattern is developed around different incidence happened around a funny character called hippo.

Beetles Boxers Pattern made out of the band members of the popular rock band Beetles

Hippie Life Boxers The illustrations are different story which can happen in the life of an hippie

THEOBROMA BRANDING Theobroma is a chocolate brand which produces and markets Luxury chocolates.

It is known for its unique taste and its elegance.

The brand name is derived from the Greek words ‘THEO’ and ‘BROMA’.

‘Theo’ is Greek mean s God, and ‘broma’ means food, all together the meaning will become ‘food of God’.

The visual Identity is designed in a way that it carries an ancient language of symbolization. Since it represents and ancient illustrative style as per the positioning of the brand in the market, it communicates the classiness of it.

C 41 M37 Y0 K0

C00 M00 Y00 K100

C80 M36 Y98 K28

C00 M00 Y00 K10

C 42 M30 Y70 K4

C00 M00 Y00 K85

C 33 M57 Y100 K18 C 38 M75 Y100 K48 C 3 M0 Y49 K0

Typography Centaur Regular Meta Cont. Book

Advertising Campaign Advertisement campaign n through print and digital media

Packaging Campaign Multicolor illustrated packages. Limited edition

Packaging Design Attractive multi colored illustrations of seven wonders of the world, makes the package unique and welcoming.

D R O P S WEATHER APP. Designing an weather information application in ios platform for i phone 6plus.

i phone 6plus Basic display specification • Retina HD display • 5.5-inch (diagonal) LED-backlit wide screen Multi‑Touch display with IPS technology • 1920x1080-pixel resolution at 401 ppi • 1300:1 contrast ratio (typical) • 500 cd/m2 max brightness (typical) • Full sRGB standard • Dual-domain pixels for wide-angle viewing • Fingerprint-resistant oleophobic coating on front • Support for display of multiple languages and characters simultaneously • Display Zoom • Reachability

Reachability Reachability brings things at the very top of the screen down closer to the bottom of the screen.

If you have trouble reaching all the way to the top – for example when using the phone with one hand – Reachability can make things a lot easier to reach.

To activate reachability, you touch the home button twice without pressing it down. The reachability mode will stay active until you touch something on the screen, then it will go back to normal display mode.

If you want to cancel the reachability mode, you can either double-touch the home button again or just wait a few seconds and things will reset.

Design Consideration •

•

•

•

Sine it is difficult to reach on the top portion of the screen the main functions should located at the bottom of the screen But putting all the function on the tab bar can create clutter and other functional issues, sampling is required. Mostly used function can be placed in the Bottom other functions such as reach, notification etc can be placed on the top of screen.

Adding more gesture based interface will make the app easy to use.

Main Functions and usage Home Location Map Settings Pictures Search Add location

Mostly in use Use often Use often Barely in use but important Use often Barely in use (mainly for adding new locations) Barely in use

Home Screen Home screen contains a background picture of the current location according to the weather condition. There is a group of icons for pictures, locations, list of places and settings in the tab bar.

Information Panel contains • Name of the current location • Date • Time • Icon represents current weather status • Current temperature • Maximum and minimum temperature

Weather forecast This feature gives the informations about the weather in the coming hours.

The user has to swirl his finger in the analogue clock appears when he ouch and hold the screen. The time and date will change accordingly and will show the information corresponding to that time. The background image will also change according to the time and weather. Thus user can experience the condition visually and it will make the application little interactive.

More weather Information When the user swipe in the left direction another screen will appear with more details. This screen shows informations about wind precipitation and the duration of day.

Forecast and Post cast Screen This screen will show the details about the weather condition in coming 7days and also included a line graph showing the average temperature of the past 7days.

Map View The icon in the tab bar will leads the user to another screen consists of a map. He can search and explore weather information of different places.

Hover tap on the map will register that particular and save the location in your location list. The user can access to these location anytime without searching.

Map View The location list will shows the information about the places already saved by the user. Taping on the screen will leads to the detailed information screen as in the current location details (ie. home, more weather information, whether forecast and post cast). To add more location, search on the search and press + button. Hover tap on a location will register the location as the current location

More weather Information User can access to different pictures of locations uploaded by other users. This will give him an understanding about real situation of the place. This feature will be mainly beneficial for travelers. By pressing on the camera icon, user can upload pictures of his location.

The drop down menu on the top will leads the user to other locations from his list

Gestures •

•

• •

Since there is no home button, double tapping on any screen will leads to the home screen.

Swirling on the home screen or the main information screen of the other location will bring the information about the coming hours and days along with the visual experience happening on the background picture of the location Swipe will leads to more information about the location Hover taping on empty space of any screen will set that particular page as home. User can easily access those information directly opening the application.

ERAKKONIC BRANDING Erakkonic is a service industry which supplies chemicals and glasswares, and undertakes automation of plants.

Identity The basic form of the identity is derived from benzene structure. The blue color symbolizes chemicals and forms a shape of E, depicts Erakkonics. The negative space inside forms a structure of a spanner symbolizes automation.

C 00 M 00 Y 00 K 100

C 74 M 05 Y26 K00

C 00 M 00 Y 00 K10

C 82 M 21 Y 43 K 00

C 00 M 00 Y 00 K 35

C 01 M 11 Y 60 K 00

C 00 M 00 Y 00 K 70

Typography

C 19 M 27 Y 71 K48

C 00 M 00 Y 00 K 90

AvantGrade IT

Brochure

Visiting Card

Folder

Letter Head

Booklet

E M O T SOCIAL APP

Emot. is a mobile application in which people can customize their mobile according to their emotion and share the settings with their friends. If their friends are also sharing the same sort of feeling with them they can also be a part of their emotion by customizing the personal settings of the phone

Yashodhan opens his emot. in his phone.

Emot. will ask him to write about his feeling

He wrote ‘I’m feelng amazng 2day’ in the provided text box in the app

He shares his words in his circle by pressing ‘sharing in circle’ button

Emot. will ask to change his wallpaper, lock screen, color scheme, ring-tone and even he can add a music track to his play list according to his emotion.

Emot. shows a preview of his customized settings and ask for confirmation.

He shares his emotion in his circle and the notification will send to the people in his circle

Emot. shows the confirmation message that he successfully shared his emotion with in his circle

Wanrisa got the notification from Yashodhan telling that he is feeling amazing. Emot. asks Wanrisa that whether she is also feeling the same or not. She press yes since she want share the amazing experience with Yashodhan

Emot. will show what all changes it is going to make in her phone according to Yashodhan’s preference. She accept to change the settings with Yashodhan. If she press no, emot will ask for her feeling and the cycle continues.

MINOR NOTE PACKAGING ‘The Minor Note’ is a luxury perfume brand for men.

The over all theme and positioning of the brand is very exotic and minimal.

The color of the perfume is rich cyan, which is very attractive and elegant. By keeping a transparent part in the bottle gives more idea about the perfume.

Top Cover

Inside Panel

Bottom Panel

Top

Inside

Bottom

FUNSHOP SOCIAL APP Experience on line shopping and by sharing with your friends

Online Shopping Experience Getting a friend’s advice on a new piece of clothing, or even a new car, is all part of the shopping experience. But this is harder to do when shopping online or through a mobile. Yes, you can send a link via e-mail, but it’s not quite the same.

Social Commerce Social commerce is a subset of electronic commerce that involves using social media, online media that supports social interaction, and user contributions to assist in the online buying and selling of products and services.

•

•

Problem Analysis Investigate the possibility to create a unique social shopping environment for shoppers.

Design an application that merges shopping functionalities of online marketplace with the social networking capability of social network community.

Social Shopping Social shopping is a method of e-commerce where shoppers’ friends become involved in the shopping experience.

Social shopping attempts to use technology to mimic the social interactions found in physical malls and stores.

Social Media

E- Commerce

Share ideas with friends

Purchase products

Discuss about topics

Get discount

Comment or like friend’s opinion

Choose items according to the comments and ratings

Meet new people and interact Explore new topics through your friends

Know about new products through recommendation

Work Flow

Main Features • • • •

Users will able to see the shopping related activity done by their friends User can suggest or ask opinion to their friends about a particular product Comment or appreciate friend’s activity Explore new products through the recommended items Design Consideration

• • • •

The interface is designed for 10” display tablets The screen resolution is 1920x1200 pixels As the navigation panel is hidden it wont disturb the browsing experience Search bar is included in the header bar so anytime user can search for their keyword regarding products or friends

Login Page This page will navigate the user to his profile. There is a link for registering new account for new user.

Home Page Home page shows activities of friends like shopping, comments or their suggestions etc. It also shows some recommended product to the user. There will be links for friends, favorite brands and recent items.

Navigation Panel There is a panel hidden in the right side of the screen. There is tap button on the right side and if the user tap on that the panel will appear and leads to another links

Activity Panel It shows the details of the activity of friends and the particular product.

Home Page It shows the details of about the product and there are link for ‘add to favorite, add to cart’ etc

MAGIC FOODS BRANDING ‘Magic foods’ is a particular brand of food based on the traditional Malabar delicacy. There is also a chain of cafeterias to sell this taste varies from traditional snacks to beverages

The basic form of the logo is inspired from a half eaten bread. The typeface and other graphical elements are chosen to reflect the traditional feeling and cultural richness of Malabar.

The basic color of the logo is orange which reflects spiciness and the delicacy of the culture.

Color of the Logo Malabar is well known for its delicious sea foods especially Malabar fish curry.

The color formate of the logo is inspired from this delicious dish.

C00 M55 Y100 K00 Typography

Museo Slab 500

Brand Caption Typeface: Kristen ITC Regular

C00 M00 Y00 K100

Visiting Card

Cup

T shirt & Cup

Panel 1 : Size : 10’ x 20’

Panel 2 : Size : 4’ x 20’

Panel 3 : Size : 2’ x 20’

Panel 4 : Size : 4’ x 10’

Size : 8’ x 10’

Size : 4’ x 30’

Love and everything else Poster series

moneybook

moneybook Moneybook is a social App. which allows users to keep and share their daily financial record. Mostly the financial settlements between friends or other people who close to. It helps to keep a record of all money transaction and settlements and by connecting it socially will benefits on the transparency of the particular transaction.

A simple solution to complex issues Everybody is having lot of money transactions among friends everyday.

Most of the time it is difficult to keep a record of all these transaction, and much more difficult to manage this account among friends.

Moneybook is providing a simple solution against this problem by connecting the friends through the platform and shares the particular account among the connected people.

Main Features •

• •

•

Social connection will allow the people to connect and share the transaction details between them.

Easy to make an account of split fare By minimizing the loop of money translation among mutual friends will simplify the complex deals Keep a record of all transation happened among friends.

Moneybook connects with the native mobile phone and its contact to activate the social connections.

In order to register the App will ask for the mobile mumber which need to be registered

For the confirmation an OTP will be send to the particular number.

The App will link with contact which stoered in the mobile

The home screen will provide an information about how much money the user should get from friends and how much he need to give back. It will provide details about five recent transaction as well.

Money list is the screen where the user can see all his active transactions.

The navigation will have all other links to particular screens.

When ever the user make a transation with a friend a notification will send to the concerned person for confirmation. Once it is confirmed it will added to both the account.

B R I C K BY B R I C K The day was passed before the stairway.

The sea was floating in the melancholic cliff, About to fall to the sky.

Suddenly the rock fell down.

Trying to figure out the creepiness witnessed, Seems like a way to paradise.

Seems like the heaven floats beneath the sky.

Down and deep to the master’s place, Who built this world brick by brick.

I LOST MY E AR S When I crossed the sea, found a green field.

Nothing to worry about my past, But my heart was trembling.

I saw flying fishes, and swimming birds.

Trying, come back to reality, I lost my ears.

I saw trees dropping down violently, Trying to figure out a place to stay.

T shirt Design

COFFEE AND EVERYTHING ELSE iOS icons bassed on the theme of coffee. Eacth icons illustrated to tell a coffe story.

Coffee and

Calculator

Coffee and

Calendar

Coffee and

Camera

Coffee and

Messages

Coffee and

Notes

Coffee and

Contacts

Coffee and

Game Center

Coffee and

Maps

Coffee and

Mails

Coffee and

Videos

Coffee and

Music

Coffee and

Photos

Coffee and

Reminder

Coffee and

Cock

Coffee and

Tips

VOIZD LOGO & EMOTICONS Voizd is a social network applications, which enables users to post their comments and opinion in voice formate.

VOIZD The logo is a direct illustration of the iconic photograph of Eisenstein with the tongue out. It expresses the rebelist phycology of human behaviour who wants to raise their voice against the unlikely events happening in society.

VOIZD

VOIZD

C 00 M22 Y42 K00

C26 M20 Y20 K00

C13 M100 Y85 K4

C05 M03 Y03 K00

C 69 M63 Y62 K58

C35 M28 Y28 K00

C 33 M57 Y100 K18

C68 M62 Y58 K46

C 38 M75 Y100 K48

C49 M40 Y41 K04

C 3 M0 Y49 K0 C 3 M0 Y49 K0 C 3 M0 Y49 K0

VOIZD C00 M00 Y00 K100

Typography Bebas Neue

EINSTEIN EMOTICONS FOR VOIZD

Anger

Happy

Love it

OMG

HiFi

Hug

VECTOR ILLUSTRATIONS

Photography