Duyvis Hottest Bar INFORMATION ARCHITECTURE PROJECT CLIENT WEBSITE. Pepsico

IA

INFORMATION ARCHITECTURE

PROJECT

CLIENT WEBSITE

THIS DOCUMENT NUMBER OF PAGES FILE NAME MODIFIED CURRENT VERSION

Duyvis Hottest Bar Pepsico http://www.duyvis.be

Duyvis Hottest Bar 20 duyvis_wireframes_clean Wed Oct. 27, 2010 v1.1 Activation campaign with Facebook integration

CREATED BY COPYRIGHT

Robert Winters Nascom

Table of Contents

2 / 20

Version: v1.1 | Creator: Robert Winters | Modified: Mon Apr 25 2011

Tree structure

3

Moodboard

4

Homepage - Round 1

5

Homepage - Round 2

6

Homepage - Round 3 + Design

7

Voting Journey

8

Voting Page

9

Common - Popups

10

Popup Lightbox - Example

11

Voting Page - Add Bar

12

Profile Page - Bar

13

Leaderboard

14

Search Results

15

Prizes

16

Gamerules

17

Game Rules - Design Impression

18

Products

19

Legal Page

20

About this document Wireframes are the basic, schematic illustrations of a webpage or interface – used to show the general layout and priorities of elements on the page before visual design and content is added.

Some of the elements in the wireframe will be click-able for easy navigation throughout the wireframe and to simulate user journey's.

At a basic level, they show the page layout and placement of various elements on the page, based on the user and business needs. At a more detailed level, they identify user interactions and the expected behavior.

Wireframes will provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets underway, they do not represent the aesthetics of a website, e.g. graphic elements, fonts, colors and they do not convey the brand.

Nascom Genk (HQ) - C-Mine 1 bus 13 - Evence Coppéelaan 91 - 3600 Genk - Belgium - Phone +32 89 20 15 00 - Fax +32 89 20 15 01

Duyvis Hottest Bar

Tree structure

3 / 20


Duyvis Hottest Bar

Verify: Facebook / e-mail

1

1.0 Vote

2.0 Leaderboard

1.2 Register Bar

2.1 Bar Profile

3.0 Prizes

4.0 Gamerules

Notes: 1

Casting votes, commenting and creating profiles for bars requires users to verify themselves.


5.0 Products

Duyvis Hottest Bar

Moodboard

http://www.duyvis.be

Duyvis Hottest Bar Version: v1.1 | Creator: Nascom | Modified: Mon Apr 25 2011 1

1

This design does not reflect how the final design will look like. The wireframes in the next pages will go into detail, but this mockup can reflect the mood of the page.

2

The visual style of the site is yet to be decided (next phase). During the pitch our Art Director proposed a warm / dark style that yields the oven roasted nuts packaging and branding.

This document only includes the organization of information and functions without trying to convey look and feel.

2 1.0 600px

Nascom Genk (HQ) - C-Mine 1 bus 13 Evence Coppéelaan 91 - 3600 Genk - Belgium Phone +32 89 20 15 00 - Fax +32 89 20 15 01

Page 4 of 20

Homepage - Round 1


Duyvis Hottest Bar

NL FR

Version: v1.1 | Creator: Nascom | Modified: Mon Apr 25 2011

Duyvis Hottest Bar

1.0 1

Stem

Wedstrijd

Spelregels

Prijzen

Ranking

Producten 2

Go nuts for your favorite bar!

LOGO

1

The logo will always link to the home page.

2

The share button will give the user the option to encourage friends over various social media to vote for their bar. (general campaign URL push)

3

The vote button will take the user to the bar selector which is an interactive map.

4

The bar search can be subtlety integrated near the leader board. This way it does not draw much attention away from the main top visual.

5

AD can use free space for graphics, design elements and other visual content.

6

The homepage can have a leader board showing the score of the top ranked bars.

7

During the final round, the homepage might shi! to a new design where the two finalists are shown in a "face-o"" type of image.

7

en win een gloeiende party met je vrienden 3

Vote for your favorite bar 5

600px

6

Leaderboard Café naam

Volledig overzicht >> Café Zoeken

Alle provincies weergeven

4

Ranking: aflopend

Naam van het café

Locatie van het café

Score

Splashes

1. Den Bazaar

Bocholt, Limburg

369

63

2. Café De Tijl

Leuven, Vlaams Brabant

369

63

3. Het Nieuwscafé

Sint-Katelijne Waver, Antwerpen

369

63

4. Het Nieuwscafé


369

63

5. Het Nieuwscafé


369

63

Stand

Copyrights - Legal - Contact


Page 5 of 20

Homepage - Round 2

http://www.duyvis.be NL FR

Duyvis Hottest Bar Version: v1.1 | Creator: Nascom | Modified: Mon Apr 25 2011

Duyvis Hottest Bar

Stem

Wedstrijd

Ranking

Spelregels

Prijzen

Producten

Go nuts for your favorite bar! Ro

1

un d2

LOGO

1

The layout of the homepage for the final rounds can be defined by AD. All finalists should be available on the homepage. The interactive map will only show bars that made it to the second round.

en win een gloeiende party met je vrienden Finalists for round 2

Vote for your favorite bar

De best scorende café's per provincie! Meer weten over de wedstrijd? >>

Naam van het café


Score

Splashes

1. Den Bazaar

Bocholt, Limburg

369

63

2. Café De Tijl

Leuven, Vlaams Brabant

369

63

3. Het Nieuwscafé


369

63

4. Het Nieuwscafé


369

63

5. Het Nieuwscafé


369

63

6. Het Nieuwscafé


369

63

7. Het Nieuwscafé


369

63

8. Het Nieuwscafé


369

63

9. Het Nieuwscafé


369

63

10. Het Nieuwscafé


369

63

11. Het Nieuwscafé


369

63

Stand



Page 6 of 20

Homepage - Round 3 + Design



1

2

16:9

1

Design was added to this wireframe a!erwards.

2

Final round only shows 2 best bars on homepage.

2

16:9

0:00 / 4:59

0:00 / 4:59


Page 7 of 20

Voting Journey

8 / 20

Version: v1.1 | Creator: Nascom | Modified: Mon Apr 25 2011

Vote (Journey) Action Step Select bar Information/Tasks within step

* Required

Browse bars

Required Before Launch

Searchbox

Top 3

Press Vote

• Test Details • At least one Task • At least one Tester • Confirmation • Vote calculator

Authentify

Facebook Connect

E-mail given

Send e-mail

Ask FB Permission

Wait for confirmation

Post vote to profile if valid

Confirm

Verify Age

Verify Previous votes

Tick legal

Message

Successful

Unsuccessful

Recalculate bar's votes


Voting Page


Duyvis Hottest Bar

Wedstrijd

Stem Stem


Spelregels

Prijzen

Ranking

Stem op jou Hottest Bar!

Producten

Café Zoeken

LOGO

1

Google Maps - API based

2

Call to action to add bars

3

The vote button might have a metaphor as icon such as a flame (AD Call)

4

The splash button (optional) will allow users that have a water-gun to take o! one vote.

5

The up, down or side symbol should show wether the bar made progress over the last days or not.

6

Links to reactions lead to the detailed profile page.

1

Den Bazaar Locatie: Brugstraat 5, Leuven Tagline: Dit is het heetste café van Leuven! 6 5

33 Reacties

Bar profiel bekijken > 7

Positie: 5 - Votes: 63 - Splashes: 42 3

VOTE

SPLASH

8

4 7

35 votes

Every bar itself should have a sharing option so users can encourage friends to vote on a specific bar. Technically the URL can be shared as: www.duyvis.be/hottestbar/?id=3512

Je kan maximaal 1 x per dag stemmen. Geldig stemmen kan door validatie via Facebook of e-mail.

Win leuke prijzen!

Staat jou Hottest Bar nog niet op de kaart?

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,

Registreer 'm dan als de bliksem, en maak kans op leuke prijzen!

Nieuwe Bar Toevoegen A small river named Duden flows by their place and supplies it with the necessary regelialia.

8

On facebook the picture should be included. When the user lands on the page over the custom URL, he or she should arrive on the page with an open pop-out showing the bar. Clicking the image, title or comments will take the user to the bar profile.

2



Page 9 of 20

Common - Popups

10 / 20

Duyvis Hottest Bar


X

Stem Bevestigen Duyvis Hottest Bar

X

Stemmen gelukt / geweigerd Sorry, jou stem kon niet worden mee geteld. Bekijk de spelregels op deze pagina.

Binnenkort ontvang jij ideale nootjes bij je favoriete biertje. Bekijk de spelregels op deze pagina. Je kan maximum 1x per dag stemmen. Door de actievoorwaarden te aanvaarden, bevestig ik dat ik meerderjarig ben en deze algemene voorwaarden gelezen heb.

Duyvis Hottest Bar

1

1

Moedig anderen aan om te stemmen

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Annuleren

f

via Facebook

via Google Buzz

via Twitter

via e-mail

E-coupon afdrukken

Venster sluiten

Stem bevestigen

1

1. Facebook Connect This widget is used to verify real users and prevent spam entries. Available on all pages that require to post data or cast votes

1

3. Vote casted / denied

2. Confirm Vote

This notification informs the user about success or failure of the voting. Available on all pages that allow to cast votes

This notification informs the user he still needs to accept legal terms. Available on all pages that allow to cast votes

When the user is not logged into facebook, he will receive another popup (below)

1

1

The has to confirm he / she is over 18.

The message can inform the user on why this process failed. Or give a confirmation message when it succeeded.

Success. Bedankt voor je stem!

X

X Melden: Café De Giraf

Verifieer je stem via Facebook of e-mail

Je staat op het punt Café De Giraf door te seinen naar onze administrators. Gelieve nog wat extra informatie te geven waarom je dit wil doen:

Je bent momenteel niet ingelogd op Facebook. Indien je beschikt over een account kan je je stem verifiëren door in te loggen met je Facebook gegevens:

Adres klopt niet Beledigende foto Vermoedelijk misbruik enter text Beledigende commentaar

Maak account aan op Facebook

Indien je geen Facebook hebt, kan je ook je stem bevestigen per e-mail. We sturen je de bevestigingsmail binnen de 24 uur.

Anders

1 1

[email protected]

Verstuur verificatie e-mail

Je kan maximum 1x per dag stemmen.

Je e-mail adres: Rapporteer

4. Verify Vote The authentication selector is only shown when a Facebook sniffer detected no logged in user. Available on all pages that allow to cast votes

5. Report Error / Abuse Report abuse allows users to point out errors Available on all profile pages of bars

1

An optional drop down gives the user the option to categorize his report.

6. Allow Access (Facebook App) Birthday verification can only happen within Facebook apps. (out of scope) Available on facebook

1


The user is asked if he wants to share his birthday with the application.

Duyvis Hottest Bar

Popup Lightbox - Example



Duyvis Hottest Bar

Stem Stem

Wedstrijd

Spelregels

Prijzen

Ranking

Jou Hottest Bar toevoegen LOGO

Producten

Café Zoeken

1

The page will have dark overlays displaying a javascript lightbox popup.

Duyvis Hottest Bar

1. Naam van het café: De Giraf

Omschrijving (optioneel) Waarom is deze bar the hottest bar?

Duyvis Hottest Bar

2. Foto van het café: C:/My Documents/Giraf_Café.jpg

Bladeren

TIP: Indien je geen foto hebt, kan je altijd eens op de site van jou café gaan kijken. Een logo is vaak ook herkenbaar.

3. Kies locatie Grote Markt 16, Leuven, Belgium

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, Legal Notice there live the blind texts.

Kaart

TIP: Indien je het adres niet vanbuiten kent, kan je op de kaart aanduiden waar jou bar zich bevindt.

Café toevoegen



Page 11 of 20

Voting Page - Add Bar


Duyvis Hottest Bar

Wedstrijd

Stem


Spelregels

Prijzen

Ranking

Producten

Café Zoeken

Jou Hottest Bar toevoegen LOGO 1. Naam van het café: De Giraf

Omschrijving: Waarom is deze bar the hottest bar?

2. Kies locatie Grote Markt 5, Vlaams Brabant, Leuven

Adres zoeken

TIP: Indien je het adres niet vanbuiten kent, kan je op de kaart hieronder aanduiden waar jou bar zich bevindt.

Versleep mij

Foto van het café (optioneel) C:/My Documents/Giraf_Café.jpg

Legal Notice

Bladeren Café toevoegen

TIP: Indien je geen foto hebt, kan je altijd eens op de site van jou café gaan kijken. Een logo is vaak ook herkenbaar.



Page 12 of 20

Profile Page - Bar



Duyvis Hottest Bar

Stem Stem

Wedstrijd

Spelregels

Prijzen

Ranking

Producten

5

Profielpagina << Overzicht op de kaart

Café Zoeken

5

1

A success message shows if the bar has been successfully added. Message will automatically delete itself a!er a few seconds.

2

On the profile page also the amount of splashes and votes are displayed.

3

The report feature allows the user to contact the administrator about the entry.

4

Comments can exclusively be posted by using Facebook data.

5

Clicking one of the links directs the user back to the interactive map view, but with the pop-out of current bar profile expanded.

LOGO Jou café werd succesvol toegevoegd aan de kaart! Stem en nodig je vrienden uit!

1

23 Café De Giraf

3

Last week's position: 22 Adres:

Grote Markt 16, Leuven, Belgium

Foutje melden

5

45 points

Omschrijving: Het langste café van de Grote Markt in Leuven! Help ons winnen, hands down de heetste bar!

SPLASH 7 splash

Statistieken: Deze bar heeft 53 pro stemmen ontvangen, en 8 tegenstemmen.

VOTE

2

23 Reacties

Moedig je vrienden aan om te stemmen!

Car chases are interesting, but spelling is more importanter

dwight said

Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that canʼt spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute.

I pity you. jibbajabba said

Car chases are interesting, but spelling is more importanter

dwight said

Please take a moment to ask yourself this question before reading this web log: “Am I a stupid person that canʼt spell?” If yes, then answer this question: “Will I be offended if somebody, namely Dwight K. Schrute.

I pity you. jibbajabba said

enter text You

<< Vote for your favorite bar

4



Page 13 of 20

Leaderboard



Duyvis Hottest Bar

Ranking Ranking

Stem

Wedstrijd

Spelregels

Prijzen

Producten

1

Leaderboard LOGO

1

Vote for your favorite bar (via de kaart)

Completely impact multifunctional processes and wireless supply chains. Dynamically engage business meta-services for market-driven data.

Café Zoeken

Café naam


Ranking: aflopend

Naam van het café


Score

Splashes

1. Den Bazaar

Bocholt

369

63

2. Café De Tijl

Leuven

369

63

3. Het Nieuwscafé

Sint-Katelijne Waver

369

63

4. Het Nieuwscafé


369

63

5. Het Nieuwscafé


369

63

6. Het Nieuwscafé


369

63

7. Het Nieuwscafé


369

63

8. Het Nieuwscafé


369

63

9. Het Nieuwscafé


369

63

10. Het Nieuwscafé


369

63

1-10

11-20

21-30

31-40

..-..

...

Clicking on one of the lines brings the user to the profile of the bar.

..-..

Stand

200-2006



Page 14 of 20

Search Results



Duyvis Hottest Bar

Ranking Ranking

Stem

Wedstrijd

Spelregels

Prijzen

Producten

Leaderboard LOGO

1

Opnieuw Zoeken

Query should stay visible on search result page.

2

The filters trigger an onChange() event to actively filter the list down to less results.

Vote for your favorite bar (via de kaart)

Completely impact multifunctional processes and wireless supply chains. Dynamically engage business meta-services for market-driven data.

Mayistiek

1


Ranking: aflopend 2

2

3 resultaten voor "Mayistiek": Naam van het café


Score

Splashes

33. Fiestcafé Mayistiek

Bocholt

354

2

95. Café De Mayistiek

Leuven

53

0

195. Nieuwscafé Mayistiek


2

0

Stand



Page 15 of 20

Prizes



Duyvis Hottest Bar

LOGO

Wedstrijd

What's in it

Stem

Ranking

Prijzen Prijzen

Spelregels

Producten

1

for you

A year supply -o- nuts!

Layout can be defined by content.

1

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

A sizzzzeling party Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. • • • • •

Lorem ipsum dolor sit amet consectateur nonummy Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas Ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique




Page 16 of 20

Gamerules



Duyvis Hottest Bar

Wedstrijd

Stem

Ranking

Prijzen

Spelregels Spelregels

Producten

Gamerules for your favorite bar!

LOGO

1

The copy should contain links to other page of the campaignsite.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Prijzen Far far away, behind the word mountains, far from the countries Vokalia and Consonantia. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Stemmen A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. • • • • •

Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas Ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas.

Deelnemen

Splashes



A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted 1 parts of sentences fly into your mouth. Prijzen >>




Page 17 of 20

Game Rules - Design Impression



1

Design was added to this wireframe a!erwards.

1


Page 18 of 20

Products


Duyvis Hottest Bar

LOGO

Wedstrijd

Stem

Spelregels

Prijzen

Ranking

Discover all our roasted nuts

Producten Producten


1 1

The content of the oven roasted page will be product carrousel of the oven roasted nuts, similar to the one on the Smiths site.

2

The submenu allows the products to be filtered or categorized. 3 big call to actions on the le! hand side would need to be designed for this.

Pinda's Lekker vers!

Crack a nut Krokante voor bij de TV

Luxe noten Verwennerij voor... 2


Name

Name

Name

Name

Name

Name

35 votes Copyrights - Legal - Contact


Page 19 of 20

Legal Page



Duyvis Hottest Bar

Wedstrijd

Stem

Ranking

Spelregels

Prijzen

Producten

Legal Notice LOGO

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Notice for the finalists Write copy stating the final two bars NEED to deliver a picture + short discription. Completely impact multifunctional processes and wireless supply chains. Dynamically engage business meta-services for marketdriven data. Collaboratively restore cross-platform users before client-centered manufactured products. Assertively evolve long-term high-impact vortals through visionary solutions. Professionally harness standardized portals vis-a-vis resource maximizing deliverables. Continually coordinate stand-alone applications rather than virtual communities. Dynamically optimize fully researched results before stand-alone human capital. Completely predominate seamless synergy via interoperable methodologies. Dramatically provide access to fully researched infrastructures. Assertively evolve long-term high-impact vortals through visionary solutions. Professionally harness standardized portals vis-a-vis resource maximizing deliverables. Continually coordinate stand-alone applications rather than virtual communities. Dynamically optimize fully researched results before stand-alone human capital. Completely predominate seamless synergy via interoperable methodologies. Dramatically provide access to fully researched infrastructures.


Copyrights - Legal Legal - Contact

35 votes


Page 20 of 20

Duyvis Hottest Bar INFORMATION ARCHITECTURE PROJECT CLIENT WEBSITE. Pepsico

Recommend Documents