OUGD504 - Brief 4 - Mobile Feedback

OUGD504: Brief 4: SONY music / ONLY studio Brief

Mobile Feedback

Following the translation of my website onto a mobile platform I asked for feedback regarding the translation of my design across the break point and the usability of the mobile version from a range of students. I received positive comments regarding the aesthetic of the mobile site with students commenting on the continuity between the desktop and mobile site this included 'I love how you've managed to translate the original site onto the smaller smartphone, it looks great on both and you can tell they're the same website'. This was encouraging that the user could clearly identify line between the desktop and mobile sites and found the aesthetics of both equally engaging. 

I then asked students about the usability of the mobile site, The mock-ups (above) helped to articulate this demonstrating the proportions of each component within the context of the smartphone. Students were confident that the size of the components would be easily accessible using a finger to navigate the site, Innovative components such as the expanding social media buttons below the image were praised for keeping the design refined and adhering the to clean aesthetic. The type size of the body was suggested to be scaled u on the blog page which is a comment I can reflect on during further development. Overall I feel students reacted positively towards the mobile version of my website and assures me I have successfully refined the design to apply to a mobile context. 

OUGD504 - Brief 4 - Sub-pages

OUGD504: Brief 4: SONY music / ONLY studio Brief

Sub-pages

Navigation: 
Translating the navigation page onto a mobile platform was relatively simple due to the minimal design and abundance of white space. I kept the colour scheme from the desktop site and used the existing layout, centrally aligning it to the centre of the page. Similarly to the desktop site I aligned the 'x' with the navigation menu for a seamless transition between the two. The only addition on the mobile site is a direct link to iTunes and the album release date, This was applied to balance the components on the page and support the website by offering a further pre-order option. I feel this component is not invasive but more suggestive and will work effectively to create pre orders for the album. 

Blog: 

The blog needed slightly more amending to fit within the contains of the mobile device, I started by experimenting with the background, I wanted to keep elements of the pink to relate back to the desktop site however needed the white to ensure the legibility of the text. I experimented with different boarders etc however ultimately found a sloping gradient to be the most effective method of retaining the pink while incorporating the white, This creates consistency with the desktop site while remaining minimal and accessible to the target audience. 

Retaining the fixed header from the homepage ensures consistency across the site, there is a clear hierarchy within the page, with the blog title in din followed by the apercu body copy. Video will work just as well on the mobile site with a screenshot that will open out into the full video when clicked on which will make the most of the limited space of the mobile screen. 

These sub-pages are consistent with the desktop versions creating clear and consistent links across the break point and have retained the clean minimal aesthetic set out for the website. Specialist features have been taken into account such as the accessibility and usability of the site and using touch screen which requires larger clickable components and a mope refined layout to ensure the highest quality user experience possible. The mobile pages flow nicely into one another to ensure a smooth user experience that will appeal to the user well.

OUGD504 - Brief 4 - Mobile Homepage

OUGD504: Brief 4: SONY music / ONLY studio Brief

Mobile Homepage

The wireframes gave a good straight forward direction when starting to develop my mobile site. I used the wireframe guidelines as well as taking inspiration from the desktop site to ensure consistency across the break point. I started by using the same pantone colour palette identified in my earlier development, placing the logo in the centre will maximise its legibility and will open be the first thing seen by the user as the webpage loads down. Keeping the navigation menu from the desktop site keeps the navigation clean and minimal which will work especially well on a mobile platforms as opposed to a small compact menu bar. 

A new feature for the mobile site is a fixed direct download link in the header, The iTunes logo will be identifiable to the audience and will outsource them to the iTunes site to pre-order the album. This features removes the need for the pop-up as seen on the desktop site and development concluded this would be unnecessary and overly complicated within the mobile platform, instead the user has the availably to preorder at any opportunity with the download button fixed in the header. 

Potentially the biggest transition from the desktop to mobile site is the layout of the content within the homepage, The desktop site boast a large 4 column grid that previewed thumbnails of the content that was sourced from a live feed of the custom hashtags directly from instragram to act as a centralised home of activity for the campaign. Due the size restrictions of mobile it would not be feasible to replicate this 4 column grid on the mobile platform as it would impair the minimalist aesthetic of the site and make the content illegible due to size restrictions. I took inspiration from the instragram app which uses a one column grid to highlight the content and make it easily accessible to the user on a mobile device. Using a familiar interface will appeal to the target audience making the site more accessible and providing the user with the best experience. Creating significant links between the site and instragram will ensure a smooth transition and usable interface for the user. due to their existing knowledge and engagement of the app resulting in creating a simple grid to work from based on the templates provided by ONLY.

The desktop site fades out the image to reveal social media icons in a rollover which allow the user to like and share content to other social media platforms increasing the buzz around the campaign. Due to the restrictions of mobile it would not be most effective to simulate this rollover which allowed me to develop the social media buttons below the image for the mobile platform. The standard buttons will be simply a like button and a plus button, when pressed this will then expand into a longer list of social media links to share the content, I felt these were not essential to have shown all the time and ensures the minimal aesthetic to remain consistent across the desktop and mobile website. I have started to consider refined small details such as a simple transition fro the plus to expand which will rotate to form an x to close the expanded view, demonstrating a high level of detail into the design of my mobile site. 

To add context to the design I mocked it up onto an iPhone to view the proportions in context, I felt I had designed the homepage with suitable sizing of the components, the buttons and menus looked like they would be easily accessible with a finger touch and the images sat nicely within the frame not looking oversized or too small to see. This extended homepage simulates how the user would scroll through the content and demonstrates the email-sign up and small print footer. This mobile homepage works effectively creating continuity between the desktop and mobile site, the refined components work well together and fit nicely into the iPhone dimensions that will allow them to be usable and present the user with a positive and engaging user experience. 

OUGD504 - Brief 4 - Mobile Wireframe Development

OUGD504: Brief 4: SONY music / ONLY studio Brief

Mobile Wireframe Development

With the developed desktop website approved by students and tutors I felt confident in beginning the development of the mobile site which is an essential requirement of the brief and current web design practise. This would give me the opportunity to develop my understand of web design and how components are transformed across the break points to create a consistent web platform across a range of devices that offer the most intuitive user experience based on the characteristics of that device. 

Homepage: 

Keeping the homepage consistent across the breakpoint from digital to mobile was probably the most important aspect of translating the site onto a mobile platform as it needed to remain consistent and identifiable for the user across the platforms to assure them they are on the same website. I kept the header fairly consistent in terms of elements however centrally alined the campaign logo instead to flush left as used on the desktop site as this it more be more legible centred on a mobile device. This allowed me to incorporate a direct download link to be fixed into the header directing the user to the iTunes pre-order at any time using the website, this has replaced the popup of the desktop site as I felt this would be impractical and confusing when translated across the break point. 

Instead of the 4 column grid as used on the module site, I took inspiration from the Instagram app that uses a scrolling feed of one image to maximise legibility of the content. I felt a familiar interface would engage the target audience and allow the user the most effective experience that draws on familiar grids. Below the image are social media buttons that replace the rollover on web to simplify the sharing options making it easy to access on mobile for the user. 

Navigation: 

Due to the minimal nature of the desktop navigation page this was easily translated onto a mobile device, the only real change was the loss of white space surrounding the type and the addition of a further iTunes downlink link that is further encouraging the user to pre-order the album over multiple opportunities without being too invasive or attacking them from all angles which I feel works well placing the opportunity on each page in quite a simple fashion that adds a sense of choice for user. 

Sub-page: 

The standard fixed mobile header remains consistent to the homepage and still reflects the desktop site, the translation of the blog remains fairly similar to the original desktop design creating a clear hierarchy of page title, blog title, content that is fictional on a mobile device and will appeal to the user. 

Extended Homepage: 

Similar to the homepage this wireframe demonstrates how the user would scroll through the site and includes the footer, which is a refined version of the desktop footer with the site map, contact details FAQ and link to the desktop site. The newsletter sign up is also included with the footer to allow the user to sign up and receive updates that will keep them coming back to the site i.e. when new content is available e.g. merchandise or blogposts (Users will be automatically signed up with any purchase or pre order.)

I have found the main difference between designing for web and mobile is that mobile must be far more refined due to the smaller frame to place the content this results the the use of less white space to fill the pages. As the mobile device uses fingers to interact with the content the clickable components need to be larger that those on the desktop where typically a mouse or trackpad is used that is far more accurate and smaller, this results in a simplified translation of the desktop site onto mobile to ensure it is functional and gives the user the best user experience across devices.