OUGD504 | STUDIO BRIEF 4 | WIREFRAMES

It was mentioned to me in the crit that we should be producing wireframes for our designs before we create the actual website. I've decided to do this before I start on any improvements, to give me a rough idea of what I want to do. This works well in industry, as it means you aren't spending a long time developing something, for the client to say that's not what they want, or you've missed a fundamental part of the concept out.

I want the website to be pretty cohesive throughout its 8 week span, before and after the launch. I used a software called balsamiq to create my wireframes. It was very simple to use, which helped me a lot in developing my website. I started with the website before the launch. Weeks 1 - 4 will be the same, as the only thing thats changing will be the clues. It was mentioned that it would be nice to visit previous clues when the website updates with a new one. I decided that having a slideshow as the main part of the homepage, where you can view the clues and also pre-order the new album.

The box with the cross in the middle indicates where the slideshow will be. Users will be able to click through them with arrows. Underneath, I've placed some text which will be where users can comment about the clue, and build hype on the website. This will keep the users coming back and checking to see if anyone has figured it out, or to engage in discussions. I think this will work well for my target audience, because many of them won't be active participants on social media. The comments will be left anonymous with no need to sign up to the website, as I feel this will just put people off commenting all together. There will be a feature to reply to other comments and engage in discussions. The comments section will work something similar to the app Yik Yak, where people post anonymous messages from around your area, and you can up or down vote them. Limiting the comments to the area wouldn't work for my project so I wont be including this feature, but keeping them anonymous and having a "most popular" section would work well here.

For the people that do use social media, and want to engage with the clues through there, I've added a pop up that will appear when you hover over the clue and click "share". The pop up will let you share the image of the clue to social media and you can comment on what you think this way. This also generates hype as people who don't know about the band may become intrigued.

Finally, the website will change on the 5th - 8th week of the campaign. The comments section will be removed, and replaced with tour dates. The slideshow will also change, and have a section to buy the album, then a section about the tour and a "find out more" button which will automatically scroll down to show the full tour dates, and give the user an option to buy tickets at the bottom.

For the mobile site, the information and style will be the same but it needs to be adapted for a smaller screen size. I used balsamiq again to create some wireframes for this. The mobile's weeks 1 - 8 will have the same structure as shown here:

When the user goes to comment on the website, the screen will have to change as the phone keyboard will appear. I have taken this into consideration and created a wireframe that will demonstrate how this will work: 

A simple box will appear to write the comment, and then you can choose to submit or close the box if this was a mistake.

To share the clue from your phone, you simply tap on the image and click "share", much like the desktop version. A pop up will appear and you select which social media icon you'd like to share this to:

The navigation on the mobile website will work via a hamburger icon at the top of the page. When you click it, the "Home, About, News and Store" buttons will appear. To close the navigation you simply click the icon again.