Contactable website lookfeels v2

All work ŠElectrik 2014

Contactable Website presentation 21-10-2014

Look and feels for style, colours and layouts.

Images/Video / graphics / content still to be refined in next design phase of all secondary pages once a direction has been decided on.

Option 1 Look and Feel overview

Navigation 1. Direct login ability when landing on the page 2. Direct ability to Clink with Contactable - The top grey strip (1 & 2) will disappear when the user begins to scroll, it is only there for when they land on the page 3. Smaller nav buttons with some of them indicating further drop downs. White navbar will stick to top of browser when user scrolls.

4. Static image or video of someone using the app, possibly cut with lifestyle scenes of individual or organisation use, similar style to the landing area of: We need to shoot professional, styled images/video for these areas, time must be taken to choose images to tell the story a user can relate to in a Contactable style. http://www.nickmurphy.org/#one 5. User selects Individual or organisation experience, site adjusts accordingly below 6. Direct links to various stores for users to get the app immediately.

First fill screen area 1. Graphics updated with slicker, less juvenile feel than the help wizards. Techier feel. Phone stays static, as a user scrolls, lines and GFX begin to animate on top of image.

2. Short punchy info. ‘Learn more’ button links to Help page.

Second fill screen area 1. Graphics updated with slicker, less juvenile feel than the help wizards. Techier feel. Phone stays static, as a user scrolls, lines and GFX begin to animate on top of image. This this will feature at least 5 of the key features.

2. While this happens, new content text slides in from below as phone appears to slide in from above.

3 As user scrolls, different text appears, new GFX appears, phone stays static, screen on phone changes to match it’s relevant description on the right.

This is hard to conceive from our flat visuals - but very easy, smooth and rewarding for the user.

Another key user benefit 1. Graphics updated with slicker, less juvenile feel than the help wizards. Techier feel. GFX begin to animate as user scrolls, coming up from broken phone, linking with new phone as new phone comes in from the top as user scrolls down: Have a look at the ‘Find a retailer’ call to action we did on our http://www.mongoosecricket.com/ site we designed and built Lots of negative space everywhere, improves user comprehension by 20% Bear in mind these are all views for a big screen (1920px) and layout will adjust to smaller screens. Mobile would have the image stacked on top of an orange box for example

C-Tag area 1. Graphics updated with slicker, less juvenile feel than the help wizards. Techier feel. Phone stays static, as a user scrolls, lines and GFX begin to animate on top of image.

2. Very important to begin to educate the user to C-Tags on the landing (about) page.

3. Direct link to buy custom C-Tag from the get go.

Footer 1. Quick links - directing people visually quickly to areas of interest. Scrolls in a cycle.

2. Footer links as per main navigation, button to take them to the top of the landing (about) page.

The Brain processes images 60,000 times faster than text.

Option 2a Look and Feel overview

Landing page 1. Login ability when landing on the page 2. Menu hidden to force users to select their experience with big bold areas. Having this landing page will allow the users site experience to load while they make a selection.

3. Static image or video of someone using the app, in different environments, outside braai, in the office, at the beach, playing with dog - Contactable is always there looking after you - Strong emotional hook from the get go.

We need to shoot professional, styled images/video for these areas, time must be taken to choose images to tell the story a user can relate to in a Contactable style.

4. Direct links to various stores for users to get the app immediately.

Option 2b Look and Feel overview

User Selected Individuals page 1. Login ability when landing on the page 2. Users now have access to the menu, a full dropdown of navigation items are available as well as ability to switch to organisational view.

3. Static image or video of someone using the app, in different environments, outside braai, in the office, at the beach, playing with dog - Contactable is always there looking after you - Strong emotional hook from the get go.

We need to shoot professional, styled images/video for these areas, time must be taken to choose images to tell the story a user can relate to in a Contactable style.

4. Users can now begin scrolling to access their individual experience

Example of Drop Down Navigation 1. Big bold areas of navigation fill the users screen, making it very clear and easy to navigate.

2. Menu is accessible at any time anywhere on the site, it will stick to the top of the screen in a opaque grey strip and will ‘block out’ any info underneath it unless closed.

First fill screen area 1. Entire landing (about) page has been condensed into 5 main areas, for maximum impact these sections have been given full screen real estate.

This option features a different and larger font, with even more negative space offering a more indulgent user experience.

Second fill screen area 1. These next areas will slide in from the right as the main section titles fade out. Graphics updated with slicker, less juvenile feel than the help wizards. Techier feel. Phone stays static, as a user scrolls, lines and GFX begin to animate on top of image.

First fill screen area 1. Entire landing (about) page has been condensed into 5 main areas, for maximum impact these sections have been given full screen real estate.

OPTION 2B Interactive side scrolling area 1. This option will offer the same animated GFX and image overlays but running from the sides instead of from top to bottom to add an exciting new experience for the features in this section. (Here you can see a user is busy scrolling past the first orange feature onto the next from left to right)

OPTION 2C Interactive scrolling area 1. This will work the same as this area in OPTION1 if a ‘downwards - upwards’ scrolling is preferred. Again this will feature at least 5 of the key features.

Third fill screen area 1. Entire landing (about) page has been condensed into 5 main areas, for maximum impact these sections have been given full screen real estate.

Interactive scrolling area 1. Graphics and text and appear and lines are drawn as user scrolls, the contact book icon comes out of the broken phone and goes into the new, different platform phone. Button pops up

Fourth fill screen area 1. Entire landing (about) page has been condensed into 5 main areas, for maximum impact these sections have been given full screen real estate.

Interactive scrolling area 1. Graphics and text and appear and lines are drawn as user scrolls. Button pops up, direct link to purchase a C-Tag.

Fifth fill screen area 1. Entire landing (about) page has been condensed into 5 main areas, for maximum impact these sections have been given full screen real estate.

Footer 1. Quick links - directing people visually quickly to areas of interest. Scrolls in a cycle.

2. Footer links as per main navigation, button to take them to the top of the landing (about) page.

The Brain processes images 60,000 times faster than text.

Option 3a Look and Feel overview MENU

Are you an Individual?

Are you an Organisation?

Benefits

Help

More

More

Stay Connected

Help with Clinking

More

More

Help with C-Tags

Restore More

More

Download it, Free.

About

39

Account

FAQ

Individuals

Help

Help

Organisations

Verify Account

Contact

copyright © 2014 Contactable site by electrik

Log in

Sign Up

Navigation 1. Direct login ability when landing on the page 2. Loading area, bubbles animate, percentage shown here when loading, logo appears once loaded.

This option acts a very simple, yet complex in code, user friendly experience that directs them immediately to information.

3. Depending on the user’s selection, relevant navigation areas load below.

3. Direct links to get the app.

Option 3b Look and Feel overview MENU

Are you an Individual?

Are you an Organisation?

Benefits

Help

More

More

Stay Connected

Help with Clinking

More

More

Restore

Help with C-Tags

More

More

Download it, Free.

About

39

Account

FAQ

Individuals

Help

Help

Organisations

Verify Account

Contact

copyright © 2014 Contactable site by electrik

Log in

Sign Up

Navigation 1. As the user scrolls down, the phone moves and the area fills with yellow line

Option 3c Look and Feel overview MENU

Are you an Individual?

Are you an Organisation?

Benefits

Help

More

More

Stay Connected

Help with Clinking

More

More

Restore

Help with C-Tags

More

Less

CLOSE

Clever little

™

A C-Tag™ is a personal signature that is used to store all your contact details.

It’s unique to every individual or organisation.

Purchase a custom C-Tag™ for just $0.99!

Purchase C-Tag

Kevin77

Learn More

Log in

Sign Up

Navigation 1. As the user scrolls down, the phone moves and the area fills with yellow line - Here we see the user has moused over the C-Tag option and clicked the ‘MORE’ button 2. Here the entire page opens up to a layer behind the navigation area displaying relevant content below it, GFX animate in over the phones and info fades in.

Arrows appear to illustrate areas where there more than one layer of content. This is difficult to code but effective.

All work ŠElectrik 2014

Thanks.

We look forward to your feedback.