Studio Brief 4 - After Release of Album - Mockups

The images below are the final mock ups for what the campaign site will look like once the album  has been released. These designs are basically the visuals from the wire frames I created in the previous blog post. The main approach within the design was to capture the same consistent flow of style and aesthetics from what the other pre-release site looked like. Sticking with a modern, minimal theme with the same layout and grid system. Having consistency throughout both sites, allows for a succinct design that the user can effectively navigate through their user journey without any unnecessary distraction. Below are the mock ups.

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.

What the pop up for the 'What's this?' option would look like.

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.