Studio Brief 4 - Final Designs

Below are the final designs for both the desktop and responsive mobile version:



Here are gifs of the both sites just to show how the different parts of the website.

Desktop

As the user proceeds onto the desktop site, they will be met by the album art work, an interactive melting Jesus that will be slowly melting down the page. This animated process of the image of Jesus slowly melting down the page will be an interactive feature for the user, drawing them in and giving them a taste of the album and the message behind it. The melting parts at the bottom will also catch their eye and lead their eyes down the website and onto the pre-order sites of Amazon and itunes. However, If the budget for the campaign was going to be slim then the melting effect may turn out to be too much to develope but that's where I would have to communicate with the web developers to see if it's possible and for how much.

Another interactive feature instead of a slow melting effect there could be the original un-melted Jesus that the user with their mouse can click and drag the image, almost like using the liquify tool in Photoshop but being able to do it within a browsers. Again, this would have to be communicated to the developers, would it be compatible in all browsers or would the user have to download any plugin for it to work.

After the interactive Jesus the logo and Navigation will be visible. Both of these features are in there natural layout position as it's common placement for the logo to be on the top left and the navigation to be on the top right, it's easier for the user experience if they are used to these feature being where they are. The promotional button on the end of the navigation is meant to be subtle but still noticeable, complimentary and eye catching. I didn't want an annoying pop up that was right in the users face and this would represent a campaign that was all for a loving connection between the fans and the band. I wanted the call to action button to be apart of the navigation but with the highlighted green/blue it was still able to attract the attention because of the neon green. Due to it's position in the navigation the button will be within the main hot spot areas of the website for the user to look at.

The bar in the middle of the album art work should attract curiosity, due to size and the same horizontal position as Jesus's arms on the cross. The text should hopefully justify what the bar is there for and what the user needs to do. If not the 'What's this?' button would be at the end of the bar to help the user if they are confused or just want want to find out about the campaign. For me it's always about the user, making sure they are comfortable within the site as it can be confusing if you're not familiar with the site, making the site as open for every body within and without my target viewership.

Lastly, at the bottom is the promotion companies that the user can order the album from and also the days left till the album comes out. Logos at the bottom right is just another subtle hint promoting the pre-release of the album, works well as they are the same colour scheme and work well in the layout and brings balance to the grid system. Count down days is important to let the user know how many days are left when they hit the site, making them aware each time they come back onto the site.

This is the error pop up that will alert the user that they have failed to enter the required field. 

This would be the pop up if the user doesn't know whats going on and clicks the 'What's that?' button. Pop up will give them a quick summary of the campaign and what the user can do to be apart of that. At the bottom is again a subtle promotional bit of text, just to keep the album in their heads subliminally as buying the album is the whole point of the campaign.

This is an example of what the user might input into the bar. Using the #dearg-d to build a social media presence.

This is the pop up that will appear once the user has successfully submitted a message. The hierarchy of the site would first be the title, then the message they have submitted with a chance to share their message on social media. At the bottom will be the information about what comes next after the the album has been released.

*same text as in the blog 'After Release of Album - Mockups'

This is the desktop version of the site. As soon as the user hits the page they are met with the same modern layout as the pre-release website. Same colour scheme, along with the general layout. The pre-order call to action button is in the same location within the navigation (top right) but with different wording to be relevant with the newer site. It's important for that call to action to stay in the same position, so the user will automatically know where the location of that button is through both sites.

Moving on towards the type. The message within the middle of the page will be the messages that the fans would of submitted onto the previous pre-release site. The message takes up the majority of the website in order to showcase it's hierarchy and importance to the user. The type is very legible and bold at that size due to the serif all caps typeface of 'Didot', therefore demanding the users attention from the get go. The fans messages would be animated in a slide show fading in and out every couple of seconds. Underneath the message, would buttons to control the animation. The forward, back and pause buttons will allow the user to control the slide show at their own pace, this would allow them to not get bored or impatient waiting for the next message to come into frame. Underneath these buttons would be a 'What's this?' information button. Once clicked, then a pop-up box would open, which would explain the reasoning for the messages, so the user can understand what's going on if confused.

On the right side of the control buttons is the option to share any message that appears in the slide show on social media. Sharing is extremely important to start a trend or social media buzz. It's also a nice touch for any fan to be inspired by the messages and wanting to spread that positivity to other people. It's also an effective way to drag people back to the site after the release of the album to see if they can see their message in the slide show. On the left side is the option to purchase the album. Even though it's an advertisements to sell the album, the design and positioning of it feels like it belongs in that space and doesn't feel like a promotional annoyance.

Identical pop up layout to the pre-release 'what's that?' pop up but the text is different to represent the current stage of the campaign and what the user might need to know.

Mobile

The mobile version was comfortably adaptable from desktop to mobile and that is due to the modern aesthetic and also the grid system set up to be comfortably stackable from any size. Therefore, the layout and set up is identical to the desktop version. The text navigation has been changed to a hamburger button to allow for space and for it not to overload the landing page and that's because the main purpose of the page is for the user to input their positive message. If the page is crowded then it could become to much to take in and that would effect the bounce rate.

For the mobile version the logo has a border around it, it looked like it was floating too much and looked lost next to the album artwork. The border fixed that issue by making it look more strong and solid without overdoing it, which by adding a fill to the box would do so. The main issue with the mobile version was text size. I was consistently battling with aesthetic and readability. If the text was to big then it could throw of the modern style of the design but if the text was to small then the user wouldn't be able to read the information. After testing the variation of sizes on my target audience, the conclusion was made that readability and flow of the user journey is more important then aesthetic. Design aesthetics isn't going to sell the album but good copy writing will. The bottom of the page is where the promotional button and count down days are located. Even though the promotional call to action button is at the bottom, people might question that it should be at the top of the hierarchy ladder but as the whole site fits on the screen the call to action button is always visible with the positioning and the highlighted colour.

Lastly, the website will not be available within landscape orientation, so if the user rotates their phone, the phone will stay in portrait. The website wouldn't be as aesthetically pleasing if the website was suddenly scrollable. The site is simple enough to fit on the whole phone in portrait so by disengaging that by having the site into landscape mode would be ineffective for the layout of the site and for the user journey.

Effectively it might be difficult force orientation in a web page, but you can suggest to the user that the site doesn't orientate in landscape mode or you could block the content in landscape mode. Looking at different help sites, it is possible to lock the orientation by setting your min-max width in CSS.

Same error message as the desktop site, keeping with consistency.

Navigation page. The navigation page uses the same style as the mobile pop ups, keeping everything consistency and complimentary. Promotional links a the bottom to keep the users sub-conscious mind engaged with the promotional intent of the album.

This is the pop up for  the '?' button. Same style and layout to the desktop pop up but without the faded background. Without the faded background it allows me to blow up the text so it would be more readable for the user.

This is how the mobile would look once the user starts to type their message out. It was extremely important for the input bar and submit button to be visible when the keyboard feature pops up as if not the design could look undesirable and lazy from the designer and developer.

If the message that the user is imputing is longer then the input bar can hold then bar will expand. The user can use the arrow in the bottom right corner of the bar to expand the bar with their finger to see the whole message.

Thank you for submitting pop up, same information and style to the desktop site but without the faded background, again to increase text size.

*same text as in the blog 'After Release of Album - Mockups'

This is what the site would look like on a mobile. It's extremely similar layout to the pre-release responsive site. It was a challenge to decide how big to have the text and the buttons. I didn't want the forward, back and pause button to be to big as it would throw of the minimal aesthetics. But i also didn't want the user to struggle to press such small buttons.

When designing for mobile it's important to take into account the touch motion the user will have to perform. Everyone has different size fingers, which could get complicated when designing small and integrate buttons or other interactive stuff. To me it's important for the user not to over stretch their fingers, It's very beneficial to the user if you can design touch points that are relatively close to each other. For example, for the animation buttons for the mobile, the design had the the back and forward buttons on each side of the message that the user would have to stretch their finger to each side if they want to either go back or forwards. This is unnecessary action for the user and could become annoying which isn't good for the user journey. By having these button all located next to each other, the user can touch the animation with ease without over extending their fingers. This may not be a big problem to many people but when you take into consideration, phone size and hand size it can be difficult to touch certain areas of a phone without completely readjusting the hold on the phone.