Duyvis Hottest Bar INFORMATION ARCHITECTURE PROJECT CLIENT WEBSITE. Pepsico

Transcriptie

1 IA INFORMATION ARCHITECTURE PROJECT CLIENT WEBSITE Pepsico THIS DOCUMENT NUMBER OF PAGES FILE NAME MODIFIED CURRENT VERSION CREATED BY COPYRIGHT 0 duyvis_wireframes_clean Wed Oct. 7, 00 v. Activation campaign with Facebook integration Robert Winters Nascom

2 Table of Contents / 0 Version: v. Creator: Robert Winters Modified: Mon Apr 5 0 Tree structure Moodboard Homepage - Round Homepage - Round Homepage - Round 3 + Design Voting Journey Voting Common - Popups Popup Lightbox - Example Voting - Add Bar Profile - Bar Leaderboard Search Results Prizes Gamerules Game Rules - Design Impression Products Legal 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. 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. Some of the elements in the wireframe will be click-able for easy navigation throughout the wireframe and to simulate user journey's. 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 bus 3 - Evence Coppéelaan Genk - Belgium - Phone Fax

3 Tree structure 3 / 0 Version: v. Creator: Robert Winters Modified: Mon Apr Vote.0 Leaderboard 3.0 Prizes 4.0 Gamerules 5.0 Products Verify: Facebook / . Register Bar. Bar Profile Notes: Casting votes, commenting and creating profiles for bars requires users to verify themselves. Nascom Genk (HQ) - C-Mine bus 3 - Evence Coppéelaan Genk - Belgium - Phone Fax

4 Moodboard Version: v. Creator: Nascom Modified: Mon Apr 5 0 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. 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. 600px.0 Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

5 .0 Stem Ranking Prijzen Spelregels Homepage - Round Version: v. Creator: Nascom Modified: Mon Apr 5 0 The logo will always link to the home page. 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) for your favorite bar! 7 3 The vote button will take the user to the bar selector which is an interactive map. en win een gloeiende 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. party met je vrienden 5 AD can use free space for graphics, design elements and other visual content. 3 6 The homepage can have a leader board showing the score of the top ranked bars. Vote for your favorite bar 5 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. 600px 6 Leaderboard Volledig overzicht >> Café naam Café Zoeken Alle provincies weergeven Ranking: aflopend 4 Naam van het café Locatie van het café Score Splashes Stand. Den Bazaar Bocholt, Limburg Café De Tijl 3. Het Nieuwscafé Leuven, Vlaams Brabant Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

6 Stem Ranking Prijzen Spelregels Homepage - Round Version: v. Creator: Nascom Modified: Mon Apr 5 0 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. for your favorite bar! en win een gloeiende party met je vrienden Finalists for round Vote for your favorite bar De best scorende café's per provincie! Meer weten over de wedstrijd? >> Naam van het café Locatie van het café Score Splashes Stand. Den Bazaar Bocholt, Limburg Café De Tijl 3. Het Nieuwscafé Leuven, Vlaams Brabant Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Het Nieuwscafé Sint-Katelijne Waver, Antwerpen Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

7 Homepage - Round 3 + Design Version: v. Creator: Nascom Modified: Mon Apr 5 0 6:9 Design was added to this wireframe a!erwards. Final round only shows best bars on homepage. 6:9 0:00 / 4:59 0:00 / 4:59 Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

8 Voting Journey 8 / 0 Version: v. Creator: Nascom Modified: Mon Apr 5 0 Action Vote (Journey) Step Information/Tasks within step Select bar * Required Browse bars Searchbox Top 3 Required Before Launch Press Vote Test Details At least one Task At least one Tester Confirmation Vote calculator Authentify given Facebook Connect Send 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

9 Voting Stem Ranking Prijzen Spelregels Version: v. Creator: Nascom Modified: Mon Apr 5 0 Stem op jou! Café Zoeken Google Maps - API based Call to action to add bars Den Bazaar 3 The vote button might have a metaphor as icon such as a flame (AD Call) 6 Locatie: Brugstraat 5, Leuven Tagline: Dit is het heetste café van Leuven! 33 Reacties Bar profiel bekijken > 7 4 The splash button (optional) will allow users that have a water-gun to take o! one vote. 5 Positie: 5 - Votes: 63 - Splashes: 4 3 VOTE 5 The up, down or side symbol should show wether the bar made progress over the last days or not. SPLASH 6 Links to reactions lead to the detailed profile page votes 7 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: Win leuke prijzen! Je kan maximaal x per dag stemmen. Geldig stemmen kan door validatie via Facebook of . Staat jou nog niet op de kaart? 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. 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! A small river named Duden flows by their place and supplies it with the necessary regelialia. Nieuwe Bar Toevoegen Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

10 Common - Popups 0 / 0 Version: v. Creator: Robert Winters Modified: Mon Apr 5 0 Stem Bevestigen Binnenkort ontvang jij ideale nootjes bij je favoriete biertje. Bekijk de spelregels op deze pagina. X Stemmen gelukt / geweigerd Sorry, jou stem kon niet worden mee geteld. Bekijk de spelregels op deze pagina. Je kan maximum x per dag stemmen. X Door de actievoorwaarden te aanvaarden, bevestig ik dat ik meerderjarig ben en deze algemene voorwaarden gelezen heb. Moedig anderen aan om te stemmen E-coupon afdrukken Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. f via Facebook via Google Buzz via Twitter via Annuleren Stem bevestigen Venster sluiten. 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. Confirm Vote This notification informs the user he still needs to accept legal terms. Available on all pages that allow to cast votes 3. Vote casted / denied This notification informs the user about success or failure of the voting. Available on all pages that allow to cast votes When the user is not logged into facebook, he will receive another popup (below) The has to confirm he / she is over 8. 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 Verifieer je stem via Facebook of 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: Melden: Café De Giraf 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: Adres klopt niet Maak account aan op Facebook Indien je geen Facebook hebt, kan je ook je stem bevestigen per . We sturen je de bevestigingsmail binnen de 4 uur. Beledigende foto Vermoedelijk misbruik enter text Beledigende commentaar Anders je@ .com Verstuur verificatie Je kan maximum x per dag stemmen. Je 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 6. Allow Access (Facebook App) Birthday verification can only happen within Facebook apps. (out of scope) Available on facebook An optional drop down gives the user the option to categorize his report. The user is asked if he wants to share his birthday with the application. Nascom Genk (HQ) - C-Mine bus 3 - Evence Coppéelaan Genk - Belgium - Phone Fax

11 Stem Stem Ranking Prijzen Spelregels Popup Lightbox - Example Version: v. Creator: Nascom Modified: Mon Apr 5 0 Jou toevoegen Café Zoeken The page will have dark overlays displaying a javascript lightbox popup.. Naam van het café: De Giraf Omschrijving (optioneel) Waarom is deze bar the hottest bar?. 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 6, Leuven, Belgium Kaart TIP: Indien je het adres niet vanbuiten kent, kan je op de kaart aanduiden waar jou bar zich bevindt. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Legal Notice Café toevoegen Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

12 Voting - Add Bar Stem Ranking Prijzen Spelregels Version: v. Creator: Nascom Modified: Mon Apr 5 0 Jou toevoegen Café Zoeken. Naam van het café: De Giraf Omschrijving: Waarom is deze bar the hottest bar?. 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) Legal Notice 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. Café toevoegen Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

13 Profile - Bar Profielpagina << Overzicht op de kaart Stem Ranking Prijzen Spelregels 5 Café Zoeken 5 Version: v. Creator: Nascom Modified: Mon Apr 5 0 A success message shows if the bar has been successfully added. Message will automatically delete itself a!er a few seconds. Jou café werd succesvol toegevoegd aan de kaart! Stem en nodig je vrienden uit! On the profile page also the amount of splashes and votes are displayed. 3 Café De Giraf Last week's position: 3 Foutje melden 3 The report feature allows the user to contact the administrator about the entry. Adres: Grote Markt 6, Leuven, Belgium 5 45 points 4 Comments can exclusively be posted by using Facebook data. Omschrijving: Het langste café van de Grote Markt in Leuven! Help ons winnen, hands down de heetste bar! Statistieken: Deze bar heeft 53 pro stemmen ontvangen, en 8 tegenstemmen. 7 splash SPLASH VOTE 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. 3 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 Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

14 Leaderboard Stem Ranking Prijzen Spelregels Version: v. Creator: Nascom Modified: Mon Apr 5 0 Leaderboard Clicking on one of the lines brings the user to the profile of the bar. Completely impact multifunctional processes and wireless supply chains. Dynamically engage business meta-services for market-driven data. Vote for your favorite bar (via de kaart) Café Zoeken Café naam Alle provincies weergeven Ranking: aflopend Naam van het café Locatie van het café Score Splashes Stand. Den Bazaar Bocholt Café De Tijl 3. Het Nieuwscafé Leuven Sint-Katelijne Waver Het Nieuwscafé Sint-Katelijne Waver Het Nieuwscafé Sint-Katelijne Waver Het Nieuwscafé Sint-Katelijne Waver Het Nieuwscafé Sint-Katelijne Waver Het Nieuwscafé Sint-Katelijne Waver Het Nieuwscafé Sint-Katelijne Waver Het Nieuwscafé Sint-Katelijne Waver Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

15 Search Results Stem Ranking Prijzen Spelregels Version: v. Creator: Nascom Modified: Mon Apr 5 0 Leaderboard Completely impact multifunctional processes and wireless supply chains. Dynamically engage business meta-services for market-driven data. Vote for your favorite bar (via de kaart) Query should stay visible on search result page. The filters trigger an onchange() event to actively filter the list down to less results. Opnieuw Zoeken Mayistiek Alle provincies weergeven Ranking: aflopend 3 resultaten voor "Mayistiek": Naam van het café Locatie van het café Score Splashes Stand 33. Fiestcafé Mayistiek Bocholt Café De Mayistiek 95. Nieuwscafé Mayistiek Leuven Sint-Katelijne Waver Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

16 Prizes Stem Ranking Prijzen Spelregels Version: v. Creator: Nascom Modified: Mon Apr 5 0 Layout can be defined by content. What's in it A year supply -o- nuts! for you 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 Vote for your favorite bar Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

17 Gamerules Stem Ranking Prijzen Spelregels Version: v. Creator: Nascom Modified: Mon Apr 5 0 for your favorite bar! 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 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. 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. Prijzen >> Vote for your favorite bar Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

18 Game Rules - Design Impression Version: v. Creator: Nascom Modified: Mon Apr 5 0 Design was added to this wireframe a!erwards. Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

19 Products Stem Ranking Prijzen Spelregels Version: v. Creator: Nascom Modified: Mon Apr 5 0 all our roasted nuts The content of the oven roasted page will be product carrousel of the oven roasted nuts, similar to the one on the Smiths site. 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... Vote for your favorite bar Name Name Name Name Name Name 35 votes Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0

20 Stem Ranking Prijzen Spelregels Legal Version: v. Creator: Nascom Modified: Mon Apr 5 0 Legal Notice 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. Vote for your favorite bar Copyrights - Legal - Contact 35 votes Nascom Genk (HQ) - C-Mine bus 3 Evence Coppéelaan Genk - Belgium Phone Fax of 0