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.