website redesign proposal
THE BRIEF Due to time constraints Amy Moran has been unable to develop the webs content beyond its current parameters. She wants to see a more modern design for the site that links the respective programmes and initiatives through consistant branding and colour.
“Assess and evaluate the current Proskills websites. www.Proskills.co.uk & www.Proskills-academy.co.uk Present a website proposal that aims to direct the development of the website and the content within.�
REVIEW On browsing through the Proskills.co.uk site, we noticed the following room for improvement: The main navigation menu, although sleek has no interactivity to engage the user and does not follow the screen as you scroll. This means the user’s journey is already negatively impacted. The slider images all correspond to blog posts- and they take up a third of the page. They are also all photos with no engaging designs. In some cases, the photos are obscured heavily by the text box. The “Train & educate” highlighted area, is one of the only full call to actions on the site, and yet links only to the ‘about us’ page. The four square images are currently used as ‘quick links’ however, the buttons are very large, and together they take up an entire computer screen. While the photos that are used are relevant to their links, they are not branded or engaging. The webpage layout would benefit from a widescreen ‘One sheet’ style that makes the best use of the screen.
REVIEW On browsing through the Proskills-academy.co.uk site, we noticed the following room for improvement: The main navigation menu has the same problems as the Proskills.co.uk page. The slider has the same content problems that the Proskills. co.uk page has. The “We do more than just training....” highlighted section, then goes on to offer a link to Training. This sends a confusing message to those not familliar with National Skills Academy. Functionally speaking however, this is a good call to action. The 9 interactive buttons give the site a more engaging feel than the Proskills.co.uk page. The use of stock imagery and not much else still means there is room for improvement and more engaging content- however thee feel is. The webpage layout would benefit from a widescreen ‘One sheet’ style that makes the best use of the screen.
REVIEW In addition to the main pages we included a SIIPs page, to address how the school programmes are presented to the teachers and students. We noticed the following room for improvement: The main navigation menu has the same problems as the Proskills.co.uk page. The slider has the same content problems that the Proskills. co.uk page has. The four main quick link buttons have the same issue as the Proskills.co.uk The Sponsor credits at the base of the page take up a large portion of the page and look slightly ungainly. The webpage layout would benefit from a widescreen ‘One sheet’ style that makes the best use of the screen.
SOLUTION The problems identiďŹ ed in the Review section of this proposal, are mostly a symptom of a confused branding. The website needs to acheive a difďŹ cult task; bring all the separate Proskills brands under one roof. To acheive this, we have created a number of assets to be used accross the website that reinforce a colour association to each page that is relevant to the brand it supports. We have also created a new menu layout that includes all the obvious pathways a user would need to access the site.
GLOBAL
Proskills Quick Links
ICONOGRAPHY
Each brand within Proskills has it’s own purposes and its own intentions- we realised that changing the brands wouldn’t benefit the programmes. So instead we created assets that had a clean yet clear relation to their content. Each icon has been recreated at the following dimensions: 64x64px
315x315px
512x512px 1024x1024px
PrintIT /PassIT
MakeIT Wood
MakeIT Furniture
NAVIGATION Navigation is key to a website, and with a website like Proskills where so many elements are included at once there needs to be an explicitly clear and engaging menu. Below is the menu we have designed to react as a hover-over menu. The icons remain dormant and greyscale until hovered over with the cursor which brings them to life. The menu remains clean in full colour, and depending not only highlights which page you are on but conveys the branding of the programmes. Hover OFF:
Hover ON:
Hover preview:
NEW MENU IN ACTION
NAVIGATION Much like the Proskills.co.uk site, we felt the menu for the National Skills Academy has room for development, and the running theme of our proposals are that visual engagement is the way forward. Therefore we recreated a similar series of icons and hover-over icons. The interactivity is subtle, but colourful and the imagery suggests a simple yet clear indication of the processes behind each initiative. The style of the menu is slightly different to the Proskills- but suits the NSA page better. Hover OFF:
Hover ON:
Hover preview:
NEW MENU IN ACTION
www.proskills.co.uk
NEW LAYOUT: PROSKILLS The new layout is ďŹ rst and foremost a fullscreen layout- this means that the content well be naturally more engaging, immersive and clearer. The same content is now within reach from the new menu and matching quick links. Call to actions are now highlighted - rather than boxes they are entire strips of the screen.
www.proskills-academy.co.uk
NEW LAYOUT: NSA MPS As previously mentioned, brand continuity is crucial while respecting the differences within each organisation. To this end, we have drafted the National Skills Academy layout in a very similar manner, while respecting the brand colours. We have kept the interactive units, but reduced the number of buttons - this way, we can use the same ‘quick link’ imagery to reinforce the association between Proskills and National Skills Academy. Call to actions are again highlighted - rather than boxes they are entire strips of the screen. In this layout the “We do more than just training” call to action, points towards “business services” to reinforce the message.
www.printit.org.uk
NEW LAYOUT: PRINIT This page is an example for the potential of MakeIT, PassIT, PrintIT, and any other dual-audience initiatives that may be devised in the future. The ďŹ rst goal here is about providing easy access to the primary destinations for the students and teachers - who are purposefully directed here by the workbook and the PrintIT course. However, the second objective is to highlight the two-tiered donors thanking them for their service and providing an attractive PR boost brands, allowing Proskills to use this as an incentive for future fundraising.
MINOR DESIGN UPGRADE All the assets you have seen in this document are ready for implementation. However, the design upgrades we have suggested will most likely require the employment of a web developer. I have put Amy Moran in touch with James Hall of some web developers who I beleive work extremely fast, their website is www.Horlix.com, who I beleive to be very good quality. This said, I understand that implementing a web developer (even freelance) may take planning. I beleive that the design shown on this page should be easier to implement while still making use of the visual style created within this proposal. I hope you have found this document interesting! Please get in touch with any questions. Brendan Rodgers Proskills Freelance Design Team
SOCIAL ICONS To continue the branding throughout, we created a variety of ready-to-use social icons to be used in Newsletter designs, Print designs and for hover over buttons on the main site.