Mountifield. A portfolio of Web Design Web Development Graphic Design Joomla Web Strategy

Transcription

1 Keith Mountifield A portfolio of Web Design Web Development Graphic Design Joomla Web Strategy

2 Who s Keith?

3 What gets me up in the morning? Quite simply, making cool and effective websites and designs that produce results for clients. I describe myself simply as a design and internet professional. Having had two career paths before finding my home in all things internet (well, nearly all things...) I have a broad perspective on how a business s internet presence can benefit the business. A brief history of me... Life 1: Hospitality A career spanning 10 years working in and managing bars, restaurants and nightclubs Life 2: Sailing into the wild blue yonder Developing my own and other peoples leadership through teaching sailing and making international yacht deliveries. Life 3: Online Adventures My happy place building cool sites and producing great designs

4 Web Projects SKB Sails The Gourmet BBQ Company Simon Bornhoft WINDWISE Jamie Medlin, Marine Artist Whitley Asset Managemen Some web sites I have designed, built or developed...

5 SKB Sails Web design & development, branding definition & print adverts The previous SKB site had been in place for over 8 years and desperately needed an update. The only element of the brand identity in existence was the logo. I used that as starting point to create a colour pallette and typography style. I undertook 2 photo shoots, one on-site and one afloat during Falmouth Week to build an image library. This site is built using joomla 3.

6 The Gourmet BBQ Company Web development I was asked to bring designs created by BCD (Barney Chandler Design) to life using a content management system. The complexity of the design and significant layout differences between pages meant that the flexibility in Joomla s templating system, which is one of the most flexible, was the perfect choice. For this project I also created a custom Joomla extension to provide the exact slideshow functionality defined in the brief.

7 Simon Bornhoft WINDWISE Web design & development, brand identity, print and web advertising material I connected with Simon, a former world champion windsurfer, through an online windsurfing forum. He was looking for someone to undertake all of his web and design work. The new site was launched in November 2013 with enhanced online booking and a new layout in keeping with the updated indentity (which had been my first task for Simon). Further enhancements are planned for 2014 with the addition of a custom extension for Joomla providing an Ask the Expert feature.

8 Jamie Medlin, Marine Artist J amie Medlin - Ma Web design & development, print advertising material I ve been working with Jamie since 2003 and have seen him grow from a local artist to a world renowned artist with some extremely high profile clients. His current site (built using joomla 2.5) is the third I have designed and built and features a blog, artwork and photo galleries and ecommerce for purchasing prints.

9 Whitley Asset Management WHIT Web development This was another project with Barney Chandler Design. After the success of the Gourmet Barbeque site BCD contacted me to build the site for Whitley Asset Management. The site was built with Joomla 3. For this project I extended a Joomla module I had previously created to work with Google s styled maps.

10 Web Dev Custom PHP Joomla Extensions Some pure development projects...

11 Custom PHP Development Page Analyser Client: Internal Project <?php When creating Online Marketing and SEO reports for clients I found I was spending an inordinate amount of time looking through the structure of web page reviewing keyword placement and outbound links. To make this more efficient I wrote and extendable PHP script to extract certain elements from a page, for example all headings or links, and display them. The results can then be exported to a spreadsheet file for easy analysis and recommendation creating. This tool has saved me over 100 hours in the last 18 months.

12 Joomla Extenions These extensions have been developed as parts of the various Joomla projects undertaken over the last 2 years. During the first quarter of 2014 most will be launched to the public as part of a new project. Some will be commercial, some will be released free of charge to support the Joomla community. These are a few examples of the 20 or so extensions I have written for joomla in the past 3 years. I am also in the process of developing a number of other extensions that will be released later in GMap <?php A Joomla module that allows a site s administrator to include a highly flexible Google map within a Joomla site. At the moment it s the only Google map module that supports Google s styled maps code. Magic Seaweed Surf During 2013 Magic Seaweed released a full API to allow developers to create integrations with thier data. I created a Joomla module that would take the data from any given location and output that within a Joomla site. BBC Weather This is a highly customisable module to present the BBC weather forecast for any given location in the UK. Mailchimp Subscribe This is a small plugin that will automatically subscribe newly registered users to a mailchimp list. It has options for single and double opt-in.

13 Print Design Logos Advertising Book Covers I also work without the internet...

14 Logos A few examples of logos created for clients and my own projects COGS Coastal & Offshore Yacht Racing

15 Advertising Jamie Medlin - Marine Artist Photo-realistic Oil Paintings Private Commissions Limited Edition Prints SPECIAL Ad for Cezch Windsurfing magazine OFFER! 2 Day Book a 20 1 UK C oachin 4 Before g Cou 31st D rse Menti ecem on B ber 2 013! oards M agaz in Get a Fre e RADZ M e Ad ast Extensio n worth (0) Outdoor Poster Book Now at New sails for cruising and racing Covers, awnings & sprayhoods 24 Hour Emergency Repair Overhaul, Washing & Storage design and build, repairs and maintenance It s more about sails than sales Amaury Lamy I went from harnessing to sailing waves in under 40 days of windsurfing! James Shirely I ve learnt fast short board tacks, jumps, gybes, duck gybes and upwind 360 s! Magda Przelaskowska I went from a 130L board to carve gybing a 105L! Upholstery for both interior and exterior comfort Neil Davies I eradicated bad habits and improved my blasting and gybe control. Next step PWA!!. Call: info@skbsails.co.uk SKB Sails Ltd, The Sail Loft, Commercial Road, Penryn, TR10 8AG Boards Magazine Inside Rear Cover Advert General Advertising for use across various publication

16 Book Covers =

17 Large Projects cafe.com MATRIX42 Ellisons Project Management and Consultation...

18 Background to the projects These projects were undertaken while I was employed as Technical Lead at Immersive Projects, a Bristol based deisgn & project management agency from Each project involved a number of suppliers of both creative and technical services with our company acting as the liaison between them and the client, Immersive projects being responsible for the final delivery to the client in each case.

19 cafe.com Client: Boonty / cafe.com Site: Project Type: Concept / Design My Activities: Conceptualisation User Flow Wire Frames Design Development Project Management Delivery Control Production Testing Web-based casual gaming has become one of the most lucrative online markets in the USA...

20 cafe.com: Overview cafe.com came to us with an idea for a casual gaming web site aimed at the soccer mum market in North America. The USP for cafe.com was to build in social networking principles along with being the first web site to enable players to create their own 3D avatar that would also be their in-game character in some of the new games to be developed after launch. Initially there were to be two revenue streams for the site; advertising and user purchased boosts and enhancements. The client provided us with a series of Powerpoint presentations and basic requirements. We were then tasked with defining the site map, user experience, design elements, layout (wire frames), final design and functionality definitions along with some of the initial Flash based content for the site launch. In a previous project our design and branding team had already created the brand identity based on its core values and mission. Concept Development The first stage that I was required was developing the concept of how users would traverse the site and development of the site map and navigation structure. This involved analysing all the desired features, distilling those into elements that were practical and beneficial to the first stage site launch, defining exactly what pages each required and how those pages would interact with other parts of the site This gave us a set of diagrams for various user stories from which we were able to create the initial site map. At this stage we also looked in detail at different users activities such as returning to the site after a previous visit during which they had not registered or a registered user s first visit after a new game had been launched.

21 female. 29. USA female. 38. USA male. 25. UK female. 34. USA female. 38. USA male. 27. USA male. 27. USA Item Title Edit Item Title Games Find a Friend Edit icafe Set as cafe.com start page the grid. each other. than scroll internally. Help maintain correct spacing some other means). position on a page. 1. cafe.com News that someone has) 3. New Badges available coins in the wallet) 5. My Top Scores 6. Invite a Friend 7. Pending invitations messages) 10. Cool New Boosts habits) how to display) 14. Latest New Game page) Hello Romain_Boonty01 log out View Mailbox 1 New mail My icafe Home My Coins: 10,258 My Badges: 0 My Tournaments My Favourites My Last Games View & Edit My Public Profile Add My Friends Online: american.chic sandy_sue2000 edward_treem sophiehender_234 offline: jenny_west_bouncy dave_brown_junior cliff_brown 37,679 icafe Set as Home Page Choose Items Edit My Profile / Account Item content placed here. Item content placed here. The dimensions of this box can vary The dimensions of this box can vary depending on on the content shown. depending on on the content shown. If an item has editable options clicking If an item has editable options clicking the edit link at the top will change the the edit link at the top will change the content within this box in to edit mode content within this box in to edit mode Details of each available content item Details of each available content item are shown in a seperate AI file. are shown in a seperate AI file. Each item selected by the user can be dragged to whatever position they want and is not restricted to Items can be overlayed on top of If possible items should resize rather This menu bar only show when a user clicks Edit icafe Content should move up to Clicking on Choose Items activates a dropdown menu listing the content items that can be present on the page. Items already chosen should be highlighted as active (either with a tick next to them or Selecting an item will place it in a default The list of currently agreed items is: 2. MyBadges (a small display of the badges 4. My Account (Basic information such as 8. Quick Inbox (Shows a list of unread 9. Find a Room (search box) 11. cafe.com Shop You Might Like (recommended according to the player s 12. MyFriends (There will be options for 13. Next Prize Tournament 15. Link To A Game (User can choose a game and place a grphic lik to it on thier Layouts for each of these items in both view and edit modes will be in a seperate AI file and delivered as a seperate PSD. Functionality Definitions After the design of each page had been agreed I annotated each one with the details of functionality of each element, what were links, where they were to link to, any javascript enhancements that were required etc. These were formatted as PDF documents to accompany each of the deliverable PSD files that were sent to the development team in Bombay. Wireframe Creation The second stage of the process was for me to develop a set of page wireframes that defined the basic layout of each page and the location of the required elements, such as primary navigation, promotional flash movies, game icons etc. In total close to 70 wireframes (one for each page type to be built) were created. To expedite the design process these were produced in a number of batches. Once the first batch were agreed they were passed to the design team who were able to develop the overall look & feel of the site while the remaining wireframes were developed and agreed Shop Front 37,679 Hello Romain_Boonty01 log out Shop: View Mailbox 1 New mail Welcome to the cafe.com shop. here you can buy boosts to improve your game experience with your cafecoins or recharge your wallet with more CafeCoins... Text needs enhancing... My icafe Home My Coins: 10,258 My Badges: 0 Promo for Latest Boost: My Tournaments Must show: Price (in cafe coins), name, game, what is does My Favourites (e.g. improve speed by 10%, lock your opponent for 15 seconds) My Last Games Proably shoudl be a combination of graphic and HTML text for ease of procusction WIll need to link to the shop p[age fpor the appropriate game View & Edit My Public Profile Games - Select a Game to choose & buy your boosts with cafe coins An Icon for each game goes here. It will link through to the shop page for that game Graphic Promo for Recharging coins. Must link to the Recharge section in a clear way. Help There is no Drag and Drop funcitonality on this page. Each game icon will link through to a page specific to that game where individual boosts can be selected. 3 promotional boxes 1. Get Free Coins - linkis to check out free 2. Dontate Coins to a Friend - links to slider recharge 3. Earn Coins by inviting your friends Once the common design elements such as page header, sidebar & footer had been designed and agreed I was able to incorporate those into later batches of wireframes to speed up the design process. Add My Friends Online: american.chic female. 29. USA sandy_sue2000 female. 38. USA edward_treem male. 25. UK sophiehender_234 female. 34. USA offline: jenny_west_bouncy female. 38. USA dave_brown_junior male. 27. USA cliff_brown male. 27. USA

22 Design Development Once the wireframes were complete I worked with the design team on the completion of each page design along with as the functionality definittions. The pages were created in Illustrator before being converted to Photoshop PSDs with accompanying PDFs with detailed functionality annotations. Production Testing My final activity on this project was as part of the team undertaking the final production testing just before and after the site first went live. This involved a manual test of each page and game within the site along with automatic and manual link checking. Working with the client Throughout the project I took on a growing responsibility for the client interaction, particularly on the day to day running of the team s activities and requirements. I also worked closely with them during the conceptual and wireframe stages of the project ensuring that the structure and functionality that was to be built into the site matched both their overall aims and business requirements. Update: In 2013 Boonty sold cafe.com and the site was closed

23 MATRIX42 Client: MATRIX42 Site: Project Type: Brand Review / Concept / Design / Content Creation My Activities: Technical Specification Documentation SEO Strategy Content Creation Client Workshops Delivery Management Redefining the way that a technology management and systems provider communicates, both online and offline

24 MATRIX42: Overview Matrix42 are a multinational company, now part of the Assecco group who provide IT asset management solutions for companies with between 100 and units (These may be desktop PCs servers, PDAs etc). At the start of this process matrix42 came to Immersive Projects stating the requirement to improve the way that they communicated to their clients both on the web and offline. We produced a 3 phase project that would 1. Analyse their client base and produce a plan for communicating effectively with the different groups 2. Produce the design & functionality definitions to enable a 3rd party development company to build a new web site that would communicate to the different client groups defined as a result of phase 1 on a variety of levels. 3. Freshen the brand s visual identity to better represent it s core values & better communication defined as a result of phase 1. matrix42 Master Site Map v2.6 date: diargram shows pages and page groups with an indication of the content requirements for the updated site Careers References Events Booking Link from Form events listing in contact section New Content Required Content Needs Review Content OK Section with Home or intro page Section with no Home or intro page Uses section page as a default Events Management Team Company History Out of the Box News & Press Partner Events Awards Versatile Concepts Partner Login Partners Technology Partners Giving an Edge Partner Area Partner Search & Listings Legals Whitepapers Secure Site Map (xml) Plan Solutions Manage Home Media & Downloads Site Map Other pages not in a section Landing Pages Resource Centre Deploy Advanced Search Case Studies User Forum Easy Recovery Application Virtualisation Application Virtualisation Personal Backup Remote Control OS Installer Products Professional Section Services Update Protection Software Service Management Services Suites Training We produced two books as part of this phase, a brand book, which outlined the values, customer groups and aims of the Matrix42 brand and an identity book, which laid down definitions of the visual representation of the Matrix42 brand. And a development guide, which provided full detail of the site s contepts, structure and functionality. This was given to the development company to enable them to build the site. Website Design & Development Guidelines prepared by Immersive Projects version 3 ( ) Website Redesign Guidelines Support Login Client Services matrix42 brand communications book Training Packaging Services Careers Products Support Area Security Suite Contact Form Contact Detailed Contacts Training Booking Form Event Listing Inventory Empirum 2008 link to event booking form

25 Diamet do dio odolendipis nonum veliquam velis eugait, Ut ut lutet amconul putat OS Installer Software Management Security Suite Menu Save time, reduce costs and increase your ROI with solutions from matrix42 Meet Our CEO Meet a variety of challenges while allowing businesses to gain control and cut costs Menu Home T Products T Easy Recovery Search site United States Out of the Box matrix All Rights Reserved Contact Downloads Site Map Legal Newsletter Remote Control Easy Recovery Inventory Easy Recovery helps you be prepared for disaster before it strikes, allowing for complete system recovery following a virus infection, hardware failure or fatal system error. Regularly backs up all data, including operating systems, applications, and system and user settings to ensure business continuity. Complete Disaster Recovery Empirum Easy Recovery is the perfect complement to Empirum Personal Backup for a complete disaster recovery after a virus infection, hardware failure or fatal system error. Empirum supports the Management, where, in the case of a Empirum Easy Recovery makes sure that disaster, the process of preparing and your IT infrastructure is quickly restored planning continuity measures for the IT after a disaster, while at the same time services are set. Optimize your business you increase productivity and achieve cost and support processes by minimizing the savings in your IT department. strategic ITIL process Continuity down time for important IT services. Today, Empirum customers benefit from the following advantages: Targeted restoration Exact images allow the recovery of systems from various points in time. Minimization of down time Lose less time and guarantee more continuity to your customers. Minimal interruption of business activities Controlled effects of disasters on the business processes within the company. Empirum Easy Recovery is the perfect complement to Empirum PRO with Personal Backup. Menu Plan Deploy Dipsum Application Virtualisation Personal Backup Related Items Empirum Pro Praese et wissed erat, senim niamet sit at velessisl ullaorp facilla facinis alit lutpat... Personal Backup Praese et utpat wissed erat, niamet sit at sum velessisl ullaorp facinis alit... Downloads & Media Full Product Brochure Detailed product infomation for those interested in the detail... Download Empirum Easy Recovery data sheet Detailed technical infomation for our easy Download recovery software... Reccomend this page Add a collegues address below and we will send them a link type here... Send OS Installer Download Download Solutions for people who understand what will make a difference to their systems 05 May June June 2008 Upcoming Events Detailed product infomation for those Jones speach Brand Values, Customer Groups, Technology Review During phase 1 of this project my involvement was twofold. My primary task was to analyse their current web site and look at what functionality & content should be carried over to the new site. My secondary role was as part of the team undertaking the brand review and helping define the client groups and the type of message to which they would respond. The conclusions drawn at this stage would underpin the 3 primary deliverables for the project; The web site, the brand book (communications) and the identity book (visual representation). Easy Recovery Prepare for Disaster before it Strikes! Deploy Deploy your Systems Diamet do dio odolendipis nonum veliquam velis eugait, Ut ut lutet amconul veq sumputat How can I get a faster ROI on my IT Management? See more about what matrix42 can do for your business At matrix42 we re good at making our client s complex lives more simple and cutting their costs. Our solutions automate tasks associated with planning, deploying, and managing desktops, servers and mobile devices, giving our clients their time back to focus on what they are good at. Renew Your Support! Don t forget to renew your matrix42 systems support contract Watch an introduction to matrix42 presented by our CEO Holger Maul Everything you need for total PC lifecycle management ready to go! Search site United States Latest Press Releases matrix42 Introduces Empirum Success Pack for SME Market... matrix42 Named To Niche Players Quapdrant of PC Lifecycle Management... CeBIT 2008: matrix42 and update4u certify their interfaces, dolores eos qui... matrix All Rights Reserved Contact Downloads Site Map Legal Newsletter Home T Solutions T Deploy Search site United States Related Items Manage Secure Complete PC Lifecycle Solutions from matrix42 Application Virtualisation matrix42 helps you to deploy doluptatet la consectet atem duip el ulputat dit inisit il el zzrit. Diamet do dio odolendipis nonum veliquam velis eugait, Ut ut lutet amconul putat. Ut utpat ad dolorem ing et non vercing commodit augait nullamconsed dolorperosto eugait lorperaesent. Dusit et Tio sum veq Tautumlms Praessit wis adionse quatue ming eugueriurem iliquat wisim Autem iuscilisisl dunt aliquam conseniam estie magnit, quipit alisl dolenisi Ut ut lutet amconul putat. Ut utpat ad dolorem ing et non vercing Atem et iure do do et prat autpat dolorperos ercil ing exer sequatet at. Faci blaor adit accum vullums andit, quis augiat ipis nummodo Aliquam conseniam estie magnit, quipit alisl dolenisi Dusit et Tio Sequis Tinibh Praese et wissed erat, senim niamet sit at velessisl ullaorp facilla facinis alit lutpat... Praese et utpat wissed erat, niamet sit at sum velessisl ullaorp facinis alit... Software Management Praese senim niamet sit at velessisl ullaorp facilla facinis, et wissed erat... Remote Control Subscribe to Newsletter Praese senim niamet sit at velessisl ullaorp facilla facinis, et wissed erat... Downloads & Media interested in the detail... Praessit wis adionse quatue ming Praessit wis adionse quatue ming Praessit wis adionse quatue ming Full Product Brochure eugueriurem iliquat wisim dolore faccums eugueriurem iliquat wisim dolore faccums eugueriurem iliquat wisim dolore faccums andipis dolobor tinibh etumsan utpatum andipis wis nullandiam, conulla faci blaor andipis euis nisi. Xeril incip eniscil dolortie dolorer aessed tem zzriureet, quip ero adit accum vullums andit, quis augiat ipis dunt nit il eraesectem dolor sequam vent conum ad eu faccum aute magniat. Ut ut nummodo loborpero del ut eseniam, nostio od delenibh exerostrud. Dolorer lutet amconul putat. Ut utpat ad dolorem sequis ex eu facipis nostrud dipsum aessed tem zzriureet, quip ero conum ad Podcast: IT ing et non vercing eugait atem et iure do vendre magna dolorer aessed tem eu faccum aute magniat. Ut ut lutet Conference Robert do et prat autpat dolorp dolorer aessed zzriuree utpat eugait atem et iurefaccum amconul putat. Ut utpat ad dolorem tem zzriureet, quip ero conum ad eu eu facin hent ulla feuguer in ex et la feuis dolesenibh et luptat. Ut la feu faccum et faccum aute magniat. Vendre magna ad tat in er in vel utpatum quipit luptatis ullummolorer esendre praestrud tis dolorer aessed tem ut lutet amconul nostio od delenibh exerostrud. Dolorer augiamcon utat. magnis nisci tat in utat in elent auguerat. autem iuscilisisl dunt aliquam conseniam Gue tis nullaor sequat. estie magnit, quipit alisl dolenisi. Optional box if extra item nessasary Something Else Praese et utpat wissed erat, niamet sit at velessisl ullaorp facinis alit... Praese et wissed erat, senim niamet sit at velessisl ullaorp facilla facinis alit lutpat... matrix All Rights Reserved Contact Downloads Site Map Legal Newsletter Typo3 Crumb trail <h1> <h2> <h3> SImple image link to the page relating to the paraph s subject Menu Home T The Big Picture Search site United States The Big Picture Out of the Box than 97% of our customers say they would order a matrix42 solution again German Engineering 73% of customers have achieved complete ROI in less than 12 months At matrix42 we re good at making our client s complex lives more simple and cutting their costs. Our solutions automate tasks associated with planning, deploying, and managing desktops, servers and mobile devices, giving our clients their time back to focus on what they are good at. Praessit wis adionse quatue ming Vendre magna dolorer aessed tem Ut utpat ad dolorem ing et non vercing eugueriurem iliquat wisim dolore faccums zzriuree utpat eugait atem et iurefaccum eugait atem. Praessit wis adionse quatue andipis dolobor tinibh etumsan utpatum eu facin aessed tem zzriureet, quip ero ming eugueriurem iliquat wisim dolore dolorer aessed tem zzriureet, quip ero conum ad eu faccum aute magniat. Ut ut faccums andipis dolobor tinibh etumsan conum ad eu faccum aute magniat. Ut ut lutet amconul putat. eugueriurem iliquat utpatum dolorer tat in er in vel utpatum lutet amconul putat. eugueriurem iliquat wisim dolore faccums andipis dolobor quipit luptatis nostio od delenibh wisim dolore faccums andipis dolobor tinibh etumsan utpatum dolorer feuguer in exerostrud. Dolorer autem iuscilisisl dunt tinibh etumsan utpatum dolorer aessed ex et la feuis ad tat in er in vel utpatum aliquam conseniam aessed tem zzriureet, tem zzriureet, quip ero conum ad eu quipit luptatis nostio od delenibh sumut quip ero conum ad eu faccum aute faccum aute magniat. Ut ut lutet amconul exerostrud. Dolo aliquam conseniam estie faccum aute magniat. Ut ut lutet utpatum putat. Ut utpat ad dolorem ing. magnit, quipit alisl dolenisi. dolorer amconul putat. than 97% of our customers say they would order a matrix42 solution again Giving an Edge Our Lifecycle Management Solutions help businesses to gain control and cut costs of up to 85% Hot News! 05 May 2008 matrix42 Introduces Empirum Success Pack for SME Market... Related Items Solutions Downloads & Media Download matrix All Rights Reserved Contact Downloads Site Map Legal Newsletter Praese et wissed erat, senim niamet sit at velessisl ullaorp facilla facinis alit lutpat... Our Partners Praese et utpat wissed erat, niamet sit at sum velessisl ullaorp facinis alit... Full Product Brochure Detailed product infomation for those interested in the detail... Relationships created by admin, box should list all related downloads. Each box should be collapsable, however each should be independent of the other (unlike the home page). Ideally admin should be able to select a style ofor each box within the admin interface from a list of available box styles (or by assigning the box a cuistom CSS class). This allows for construction of new pages with a different set of boxes. The admin should be able to create relationships between pages. Pages related to the current page should be listed here (showing title and meta description, possibly?) The link should load that page. 8.0 values+ culture internal values functional having a practical application, or serving a useful purpose - designs that are functional yet fun capable of achieving the desired result with the minimum use of resources, time, and effort matrix42 internal brand values intuitive quickly comprehended directly and instinctively, without explanation inspiring 11 making customers feel more enthusiastic, confident, and stimulated Web Site Definition The first stage of defining the website was to look at the site map and build into the new structure new pages aimed at communicating with specific groups. This gave us the basis from which to define the specific templates that were required for the Content Management System that would be used to manage the site on a long term basis. reliable able to be trusted to do what is expected or has been promised The primary deliverable for this stage was the design guideline, which became a 50 page book detailing all aspects of the site s functionality. This was delivered to the development company.

26 SEO Strategy & Content Creation With the design work finalised attention was turned to the text content of the site. My first activity here was to undertake keyword research and working closely with the client, define the keywords that should be targeted on each page. this was done using a variety of online tools as part of a 2 day workshop with the client to kick start the content writing process My final responsibility was to undertake an SEO review of each page, fine tuning the content for correct key phrase density and inclusion. The content went through a number of drafts before being finalised and supplied to matrix42 s web marketing manager for input into the Content Management System. My next task was to create a template that defined what elements of the page needed writing (headings, meta tags etc as well as body text) so that all pages were written taking all elements into account. This also improves the effectiveness of the writing process by ensuring that a page s key phrases were included in the correct points in the page hierarchy. Update: In 2010 Matrix42 merged with another IT provider and the two brands were merged. However many of the concepts instroduced in this project are still used.

27 Ellisons Client: Ellisons Site: Project Type: ecommerce Web Site My Activities: Technical Specification Documentation SEO Strategy Content Creation Client Workshops Delivery Management An ecommerce site providing tight integration with existing offline ordering and warehouse picking and management systems

28 block. Sitwide footer. Ideally links should be manageable through the CMS, however if that is not possible the links should go to CMS pages. clients keep coming back... Magnit nummy nim dolor aliquam Vullutem zzriliq uatuercilit sequamcommy Nulluptat at consectem iure mod te Magna facilla conullu msandignim irit utem Magnim inim leniatuero el ex eum nonsectet Company magnit nummy nim dolor aliquam, vullutem zzriliq aliquis dit wissectet praestis dolor adiam el ex eum Contact Us Cash & Carry Loactions Ellisons 2008 All Rights Reserved Newsletter Delivery Charges Returns Export Our People nibh eum zzrillan hent acidunt luptat acilit augait exerilla facin henibh eros aut landrem vulputatem dit veliquatie dolorercip ex eu feuisi te te dolor sit, dit wissectet odimagna praestis dolor vautpat. About Ellisons Terms & Conditions Jobs Privicy Poliy Check out the latest happenings, ponderings and recommendations from the ellisons team View Blog If you think you have what it takes to be part of our growing business click here Site Map Legal shop. DNN? This blog is not required immediately. Only once an Ellisons blog is creatd and running Standard HTML block with a link to a careers page Ellisons: Overview Ellisons are a large wholesaler to the hair dressing and beauty industry with a national and international market share. They came to Immersive Projects looking for a team to help bring their site to the next level. The main areas of concern were to increase sales to existing customers as well as help bring in new wholesale and student customers. With this in mind we looked at the following areas: User experience and information architecture General look and feel Site structure and content Web site marketing activities (specifically marketing and search engine performance) Requirement Specification The first stage of the project in which I was directly involved was to help Ellisons define the specific technical requirements and create a detailed technical specification document that could be passed to the development company (based in Carlisle) to enable them to provide a detailed quote and time line for testing and production. This covered 2 primary areas; the ecommerce functionality and the content management system. I then worked with Immersive Projects senior designer to create a series of wireframes that would act as the basis for the visual look and feel and the HTML structure for both the CMS template and the ecommerce functionality. Primary Navigation consistent throughout each area of the site. Some pages are CMS driven, some are hard coded links to other pages Special Block to either take flash or an image. Could be a standard HTML / text Secondary level of navigation only required in CMS page and should be entirely managed within the CMS Home. Online Shop. Quick Shop. Training. Education. Brands. Contact. Links. Help About Ellisons An introduction to who we are and what we are about... Newsletter My Basket: 0 Items You Need To Be Logged-in To Make A Purchase Sign Up/Sign In Search Site Enter keyword Search Shop Enter keyword For updates and special promotions, sign up here: Enter your GO Optional anner Advert. This should be managed throught eh CMS banner facility Site search built in to content management system Product Search intergates with the online results returned as a standard set of search results within the online shop Newsletter signu up. Is this something laready built into Blog About Ellisons. Cash & Carry. Locations. the environment. Jobs Ellisons is the UK s No.1 supplier to the hair and beauty industry. With over 75 years in the business we specialise in providing an extensive range of branded products, equipment and training to beauty salons, colleges and Careers salon groups throughout the UK and abroad. Our supirior service means our Key facts: To et lorper ate magnibh eu feuguer sum amet praesecte uatuercilit, sequamcommy nulluptat at, consectem iure vel ute dionseq uissed delis dipit il do commole ndreros mod te magna facilla conullu msandignim irit utem at. Magnim inim leniatuero. Con hendrem, consectem iure mod te magna facilla conullu msandignim doloreetuer veliquat. Os dolenit prat, sit in velis nos nonulput wisl nonsectet delisi. Em inisit dit venis at ipis aliquat. Tat inim velestio dolortio con hendrem, consectem iure mod te magna facilla conullu msandignim doloreetuer aliquis Customer Services Ellisons

29 Contact Us Enter keyword Returns Export About Ellisons Jobs Privicy Poliy Site Map Legal banner management system User s Name when looged in, if not show Guest same way that they are on the current site with the addition of the deartments. Welcome Emma Clark Not you? click here to sign out or sign in Enter keyword Shop Haircare Hair Equipment Beauty Waxing Electrolysis Stone Therapy Aromatherapy Skin Care Pedicure Priadara Creative Thuya Salon System Gena Tools & Accessories Cosmetics & Make-up Salon Essentials Towelling Salonwear Manicure Nail Extensions Brushes & Combs Eyes Offers Favourites Contact Us Newsletter Cash & Carry Loactions Delivery Charges View Blog Returns Export 10% off Overall box dimensions: 239px wide 230px high Banner ads should be pulled from the same database the those on the CMS pages to enable a single banner management system User s Name when looged in, if not show Guest Clicking here will log out the current user and display the login popover to allow See product Search document for details on the shop / product search facility. Links to complete list of products currently on special offer Liinks to the user s favourite products when they are logged in. If they are not logged in this should link to a page that explains that they need to log in or sign up to create a list of favourites About Ellisons Terms & Conditions Welcome Guest Sign in to see your account and make purchases Shop Haircare Hair Equipment Beauty Beauty Equipment Offers Favourites Contact Us Cash & Carry Loactions Ellisons 2008 All Rights Reserved Jobs Privicy Poliy My Basket: 0 Items My Shop My Favourites My Orders My Account Sort By Search Shop Enter keyword Newsletter Delivery Charges Cream 250ml Ellisons,the Hair Visit Our Buy1 get 1 free Site Map Legal Newsletter Delivery Charges current shopping basket. or the whole set. Open to suggestions... Everything you need... Check out our latest offers Buy1 get 1 free Most popular Shop featured Brands for details of sorting options Returns Export Out of stock products have the add button disabled and the price greyed out. actual price higlighted Our Top Visit Our Returns Export 20% off Pamper your clients... 10% off Buy 1 get 1 FREE 2 for 12 About Ellisons Terms & Conditions About Ellisons Terms & Conditions 20% off Jobs Privicy Poliy Our Academy September Jobs Privicy Poliy My Basket: 0 Items A Purchase Sign Up/Sign In For Hair / For Beauty Special Offer 10% off Site Map Legal September See our best product prices... Select a brand for more infomation... Sign Up/Sign In Enter keyword Enter keyword Site Map Legal When a user is logged in this box shows lnks to the user s main account pages. Clicking on My Basket should load the user s current shopping basket. category or results being shown. Suggestion: Have the template load an image named the same as the category. General page sould choose randomly from child category images or the whole set. Open to suggestions... Links to each of the departments Special Offers: This box shows the first 5 special offers and the offer available. Clicking on teh image should take the user to the product or offer detail page Popular Products: See the popular products document for details that defin popular products. When a popular product is on special offer, details of that offer should be shown. Links to the Brands page within the CMS Brand logos: Since all the brands are secondary level categories this of the same name / id as the category? Warehouse Management Integration Much of the early project management work involved facilitating a fairly continuous 3-way communication between our design team, the developers and the client to ensure that we were able to achieve the visual and UX requirements within the existing database structure used. This proved an interesting aspect of the project highlighting a number of limitations within the warehouse system when it came to providing a practical ecommerce web site that was able to present a persuasive design and architecture. Banner ads should be pulled from the same database the those on the CMS pages to enable a single banner management system User s Name when looged in, if not show Guest Welcome Emma Clark Not you? click here to sign out or sign in Shop Haircare Hair Equipment Beauty Waxing Electrolysis Stone Therapy Aromatherapy Skin Care Pedicure Priadara Creative Thuya Salon System Gena Tools & Accessories Cosmetics & Make-up Salon Essentials Towelling Salonwear Manicure Nail Extensions Brushes & Combs Eyes Beauty Equipment Offers Favourites Customer Services Ellisons Cash & Carry Loactions Ellisons 2008 All Rights Reserved Newsletter Delivery Charges Pedicure products Terms & Conditions My Basket: 0 Items Presentation and Persuasion My Shop My Favourites Clicking here will log out the current user Home. Online Shop. Quick Shop. Training. Education. Brands. Contact. Links. Help and display the login popover to allow the user to log in with thier own account Main Image: This needs to change according to the category or results being shown. Suggestion: Have the template load an image named the same as the category. General page sould choose randomly from child category images See product Search document for or the whole set. details on the shop / product search Open to suggestions... facility. Product Name: Strategic description field This area shows the content of the Long Description Fields in strategix. We may need to look at how this is / can be displayed depending on the constraints imposed by strategix. Back to the previous page as opposed to always the category page. Search Shop Foot Loose Click to see our full pedicure essentials Raw Earth Mini Tote Kit Item in stock, product code: DN09012 Foot Clean 184g Foot Buff 141g Foot Mask 127g Foot Rub 118ml Enamel 15ml Enamel 15ml Description To et lorper ate magnibh eu feuguer sum amet praesecte magnit nummy nim dolor aliquam, vullutem zzriliq uatuercilit, sequamcommy nulluptat at, consectem iure mod te magna facilla conullu msandignim irit utem at. Magnim inim leniatuero. Con hendrem, sum wissectet praestis dolor adiam el ex eum aliquat. Back My Orders My Account Enlarge Add to favourites QTY 1 add When a user is logged in this box shows lnks to the user s main account pages. Clicking on My Basket should load the user s current shopping basket. Products image: Clicking on the image should enlarge it with it displayed in a lightbox style popover. Adds the product to the user s basket in the requested quantity Adds the product to the user s favourites. Uses AJAX request. If a user is not logged in the confirmation notification displays a message a message explaining that they need to be logged in to create favourites Customer Services Ellisons Customer Services Ellisons While the overall look and feel for the site was explored I looked in detail at the architecture and how we could increase the average order value. There were a number of basic errors in the previous version of the site, which were solved immediately, such as removing the requirement to be logged in with an account before browsing the shop. Banner ads should be pulled from the same database the those on the CMS pages to enable a single Clicking here will log out the current user and display the login popover to allow the user to log in with thier own account See product Search document for details on the shop / product search facility. Categories are displayed in the Search Shop Beauty Equipment Pedicure products Ellisons 2008 All Rights Reserved Pedicure Pumice/Brush Item in stock, product code: bw QTY 1 add Raw Earth Foot Clean 6.5oz Item in stock, product code: DN QTY 1 add Gena Pedi Pak Intro Deal Item in stock, product code: GEN2115 You Need To Be Logged-in To Make the user to log in with thier own account Main Image: This needs to change according to the Home. Online Shop. Quick Shop. Training. Education. Brands. Contact. Links. Help Foot Loose Click to see our full pedicure essentials Spa Pedi Mini Tote Item in stock, product code: DN QTY 1 add Raw Earth Foot Rub 11fl Oz Item in stock, product code: DN QTY 1 add Priadara Champagne Foot Soak 400gm Item in stock, product code: PDA461 Raw Earth Mini Tote Kit Item out of stock, product code: DN QTY 1 add Massage Oil 945ml Item in stock, product code: DN QTY 1 add Priadara Replen Treatment Item in stock, product code: PDA464 When a user is logged in this box shows lnks to the user s main account pages. Clicking on My Basket should load the user s QTY 1 add 9.95 QTY 1 add QTY 1 add Showing 1-9 Of 45 Results Previous Page: Next Each box should be block that can be inserted with a link to the appropriate page / section Our full product range online... See Products Search document Home. Online Shop. Quick Shop. Training. Education. Brands. Contact. Links. Help Haircare Main Image: This needs to change according to the category or results being shown. Suggestion: Have the template load an image named the same as the category. General page sould choose randomly from child category images Beauty Picture Perfect Click to see our full cosmetics range Equipment Products that are on special or, when a user is logged in, have a user specific price, will show the original price shown crossed out with the Customer Services Ellisons Contact Us Cash & Carry Loactions Welcome Online Store Ellisons 2008 All Rights Reserved Home. Online Shop. Quick Shop. Training. Education. Brands. Contact. Links. Help And Beauty People Learn all about our company... With over 75 years experience Ellisons is the UK s no.1 supplier to the hair and beauty industry, and our superior service means our clients keep coming back Beauty Tips Top tips from our beauty department... Cash & Carrys Birmingham The ultimate shopping experience... Introducing Comprehensive industry training... Special Offer Check out discount prices online... info area can be a duplication of the secondary level categories in the particular area that the user is in. Where listing brands is not relevant (such as in a brand s own section) the 3 column product layout should be used. Suggestion: Could this be done with CSS using images My Basket: 0 Items You Need To Be Logged-in To Make A Purchase Search Site Search Shop Newsletter For updates and special promotions, sign up here: Enter your GO With a large number of individual page designs required I also became involved in the design process,working from a general template along with a visual guideline (detailing typography, margins etc) I created in the region of page designs along with functionality annotations on all visuals.

30 Content & Training During the design process the developers deployed the Content Management System to the development server to enable me to become familiar enough with it s operation to guide the client during the process of writing and entering the content into the nonecommerce pages of the site. It was at this stage that we also began the process of reviewing their existing key phrase targeting and other online marketing activities. My duties here were to review the key phrases and make recommendations across the board for improving their online marketing on a strategic level. These recommendations included harnessing social media, improving the quality of their marketing and expanding their key phrase targeting to provide greater visibility in all major search engines. Pre-Christmas Special Offers See the full selection of our pre-christmas promotions online at Gorgeous Pink Our full product range online... Customer Services Ellisons Contact Us Cash & Carry Loactions Hair Straghtener Welcome Priadara Body Gift Pack Complete Rejuvination CND Solar Oil Minis Selection Ellisons 2008 All Rights Reserved With over 75 years experience Ellisons is the UK s no.1 supplier to the hair and beauty industry, and our superior service means our clients keep coming back Only Only 1.25 each Newsletter Delivery Charges Priadara Sedate Gift Set CND Calm down after Christmas... Winter Berry Selection Only 1.25 each The perfect stocking filler Returns Export Only 9.95 Only Special Price! Priadara Foot Gift Set Soothing treatment for tired feet September Special Offer RRP: Check out discount prices online... Our full product range online... The ultimate shopping experience... Check out discount prices online... Marketing The entire marketing campaign was overhauled according to the recommendations we provided. This involved creation of a new visual style, which matched the new web site design and restructuring the content of the s into two types. One was purely a special offers targeting customers who were purely price motivated, the second used a more persuasive style and was formed more as a newsletter with links to products related to the articles within the s content. Each of the first 4 s set out resulted in at least a 40% increase in click throughs to the site when compared to the previous marketing efforts.

31 Immersive Projects Closure 3 weeks before the completion of the web site build Immersive Projects ceased trading. Ellisons requested that I continue to work with them on a freelance basis to complete the web site project. This involved planning and organising the testing process, feeding back bug reports to the developers from a team testing across a number of platforms and producing the final visual assets required for the site to go live. Flash Production A major part of the presentation of Ellisons through their web site involved Flash slide shows and other content. As the team member with the most experience in Flash I was responsible for designing and creating the various Flash movies that would be used within the site. Some were manually created within the Flash time line, others were slide shows created in Actionscript that took their data from XML files that the client could edit, enabling them to regularly update the content without needing undertake Flash editing. I continued to work with Ellison s for some months after the site went live creating the Flash movies while their internal web team gained the experience and knowledge to bring the Flash production in-house.