Michael Oxborrow

Marvel Strike Force Infographics updated with each game update

Tools:

Photoshop

As a content creator for the mobile game Marvel Strike Force I created many infographics to aid players with their character roster development along with guides for many other aspects of the game.

Directions:

Right-Click each image and select from the menu options to get full size versions of these infographics.
(Images will be optimised for the web and only represent the original image)

Landscape Infographics: 6991 x 4320px
Portrait Infographics: 2348 x 3800px

Marvel Strike Force Alliance Recruitment Posters

Tools:

Photoshop

As a content creator for the mobile game Marvel Strike Force I created many posters to aid in the player recruitment process for alliances in the game.

Directions:

Right-Click each image and select from the menu options to get full size versions of these posters.
(Images will be optimised for the web and only represent the original image)

Landscape Posters: 2000 x 1236px
Portrait Posters: 1200 x 1800px

Marvel Strike Force Alliance Team Comparison Web App

Tools:

Figma, JamStack - HTML, CSS, Javascript, Netlify

Complete set of user interface Atoms, Molecules, Organisms, Templates & Pages

Tools:

HTML, Sass, jQuery/Vanilla JavaScript, DocumentJS

The Challenge:

Verifile candidates were reporting difficulties using the portal so a new design was created which would need to be coded into the existing codebase without creating knock-on issues for the wider application.

Solution:

Taking thorough account of the branding guidelines and Zeplin web designs I set about integrating a grid system and reuasble UI components which could be applied whilst identifying and mitigating technical risks.

Results:

Created a fully documented framework of reusable components that could be easily incorporated into the rest of the system by any developer.

Complete set of user interface Atoms, Molecules, Organisms, Templates & Pages

Tools:

HTML, Sass, jQuery/Vanilla JavaScript, Gulp, Bower, NPM, Yarn

The Challenge:

TUI released it's TUI Next branding, so applications within the business needed to reflect these changes. Current applications were also inconsistent in design so I needed to consider how we could address this.

Solution:

Conducted research into what UI elements were being used across the group and might potentially be required in the future. I used Bootstrap and jQuery to scaffold out an application based on existing developer knowledge and extensive framework support and set about introducing plugins based on the same and applied new branding to those.

Results:

Created a documented framework of reusable components that could be easily incorporated into any application without the need to reinvent the wheel each time.

Application to allow anyone to share media content with the group

Tools:

Axure, HTML, CSS, jQuery/Vanilla JavaScript, jQuery Multiselect, Fullpage JS, Dropzone

The Challenge:

We needed a portal for external clients to be able to share their images with the group. In line with company legislation we needed to provide image rights management options so the user could provide permissions for asset usage. Current stored media assets weren't tagged with extensive/useful information so we wanted to encourage and empower the user to easily do this themselves with a range of options relating to asset metadata.

Solution:

I created a step by step process with as few interactions as possible. I designed the interface to be clean and intuitive, offering compact inputs containing search parameter and multiselect options that would live update asset tags with step by step user guidance. I provided the ability to sort and review content at each stage prior to confirmation. I also provided useful tools to tag multiple assets at once and collapse and sort them based on metadata information.

Results:

A three step guided portal with easy to use multiple management options. Assets were better tagged in the digital asset management database which meant less maintenance.

Application to provide senior stakeholders with information relating to how customers rate their holiday experiences

Tools:

HTML, Sass, jQuery/Vanilla JavaScript, Chart JS, Datatables

The Challenge:

A requirement arose for a big data application to report the results of customer survey questionnaires to senior stakeholders. The data needed to be provided in an intuitive way that allows users to easily analyse and report results in order to further improve customer satisfaction. The user had to be able to see comparative data year on year and be able to drill down through the data for in depth analysis. They had to be able to filter results by brand, source market, gateway, destination, hotel unit and specific time frames.

Solution:

I designed a tabbed interface with a main overview dashboard displaying charts based on the strength of user opinion, dividing content based on scores out of 10 into three categories - Promoters, Passives and Detractors.

Results:

An ever growing list of uptakers using the application to gather information relating to their particular business interests.

Map view of holiday resorts to provide customers with detailed information about their holiday destination

Tools:

Wireframe, Illustrator, Animated SVG, HTML, CSS, Vanilla JavaScript

The Challenge:

Create an interactive experience for customers and provide media content relating to their holiday destination resort and provide inspiration to those comparing resorts. Research existing solutions/technologies.

Solution:

I developed a top down geographically accurate illustrated resort map. Interactive hotspots were incorporated based on existing resort categories which link to media content. In order for the maps to be useful I included compass and distance indicators and move and zoom functionality. I created an interactive menu, providing drill down to subcategories. The design included the ability to quickly brand each map and an option for the user to translate content into their chosen language. I also created a point to point distance calculator and a back-end content management portal allowing internal stakeholders to rapidly create maps and populate them with related content.

Results:

Maps incorporated into sales websites to replace existing static maps. Positive feedback regarding customer engagement.

Dashboard to provide analytical information to senior stakeholders with regard to how assets are being managed, distributed and consumed across the group

Tools:

Photoshop, Rapid-Prototyping(in-browser), Cinemagraph HTML, CSS, jQuery, Bootstrap, Fullpage JS, Scroll-To JS, Highcharts

The Challenge:

Currently information relating to corporate media assets is provided in Powerpoint presentations. Create an application to provide live information. Information should relate to asset uploads, asset management, asset publication and asset consumption. The user should be able to drill down through data for further analysis.

Solution:

I created an overview dashboard showing the flow of media from upload to consumption, further breaking down each section into subcategories, each of which can be further drilled down to provide detailed charts for deeper analysis. Each subcategory can have filters applied to display relevant data.

Results:

Stakeholders from across the group are able to gain greater understanding of how assets are being used and ensure they are being used effectively, consistently and efficiently across all markets and brands.

Hackathon concept to provide customers With detailed, extensive information about their holiday destination

Tools:

Whiteboard, Post-its, Photoshop

The Challenge:

Provide the ability for our customers to explore their destination with maps displaying content about the destination, adding functionality to our existing Interactive Maps solution by providing live information.

Solution:

Provide links for things including restaurant menus, activity timetables, popular times, points of interest, weather, excursions and events during their stay. The maps can also include excursion hotspots and enable click through to TUI Destination Services excursion selling sites. Integrate Google Places API to provide information based on popularity, price range and rating. Allow our customers to better plan their experiences with a day planner to pin activities.

Results:

Very intuitive solution that makes sense and is easy to use at first glance. The project attacks a new problem and is a good solution and potential game changer. Story telling and creative pitch brought product to life

Application allowing users to consume assets from the TUI Group

Tools:

Whiteboard, Wireframe, HTML, CSS, jQuery, Vanilla JavaScript

The Challenge:

Design a stock image library portal to provide "Gold Standard" images from TUI's Digital Asset Management system for download.

Solution:

I researched various existing stock libraries and image tools and collaborated with key stakeholders to design a Google Images style interface that can display assets of any type(including videos) and provide key information, including star rating and meta information.

Results:

Design and front-end code completed and handed over for back-end development and integration with DAM.

Application to provide internal & external stakeholders the ability to group media assets for use in print, slideshows, video playlists etc.

Tools:

Whiteboard, Post-its, Sketch, HTML, CSS, JavaScript

The Challenge:

Design and create a video playlist front-end tool and CMS which can be used in conjunction with TUI Brightcove Video Player. Taking lead from the current Netherlands market system to create a Group solution with functionality that can be used across different areas of the business.

Solution:

I designed a solution which enables users to easily drag and drop media assets into a timeline to create a playlist which can be integrated elsewhere. Each playlist can be a child of another playlist and can be managed by users with relevant login credentials. Each asset can be individually cropped and/or resized.

Results:

Project phase one completed and planning/preparation initiated for phase two iteration and redesign.

Application to provide video content along with related video content

Tools:

Sketch

The Challenge:

Design a video player that will autoplay through predetermined playlists and link to related content.

Solution:

Researched current video players to determine best practice and account for variations across devices.

Results:

Created detailed mockups, interaction detail and scalable icons.

Information relating to products & services

Tools:

Sketch, Illustrator

The Challenge:

Design a website to communicate to TUI Group the products and services provided by The Content Hub.

Solution:

Keeping on-brand I designed a website, creating a simple flow to clearly communicate what the team do, providing rich media content to emphasise The Hub's key responsibilty of managing group media assets.

Results:

Initial blockframe and prototype produced.

Event info & portal

Tools:

Sketch, HTML, Sass, jQuery, Gulp, Bower, Bootstrap, jQuery Vide, Owl Carousel, Curalate

The Challenge:

Create a portal website to inspire Group members to sign up for and participate in The Content Hub Hackathon. The site must provide information relating to project briefs and give users the chance to vote on which brief they'd like to work on. It should provide details about the day, the process and the judging criteria. It must provide a live social feed to display content during the event.

Solution:

I designed and coded a responsive website with private login, information, resources, advice, a team page and winners section for reporting successes after the event. I incorporated live social content by integrating with Curalate.

Results:

There was a large uptake of users for the event, doubling the previous years attendance. Great feedback was received regarding the website and it's usefulness to participants.

360° Aircraft tour website

Tools:

HTML, Sass, jQuery, JSON, Panotour Pro, Headless CMS.

The Challenge:

The brief was to translate designs for a 360° website tour to engage and inspire customers. Having booked their flights the website would act as a means for customers to take a virtual tour of the aircraft and to provide information regarding in-flight services and flight extras. The site would need to have multiple language translations and aircraft types.

Solution:

Having researched various tools for creating 360° tours I first tried to work with A-Frame but ran into difficulties with browser support. I moved to a market leading product called Panotour and was able to translate infinite pixel panoramic images into interactive tours. To solve the problem of creating multiple translations I linked a database held in a headless CMS solution by company Directus and used JSON to populate the site content.

Results:

The site could be easily maintained by stakeholders by simply adding entries in the CMS for non-English content variations. The site offered upselling of TUI in-flight products to increase company revenue and development was completed in two spint cycles, taking a total of 4 weeks to complete.

Customer Survey Questionnaire

Tools:

CSS, Illustrator, Photoshop

The Challenge:

TUI's Customer Survey Questionnaires(CSQ) need to have individual branding applied. Branding should be analysed according to both brand and marketing to ensure accuracy. The CSQ's should be responsive so they provide a pleasant experience on any device.

Solution:

I conducted research into corporate branding guidelines to ensure things like correct font usage, colour usage and logo usage were adhered to. I liaised with appropriate stakeholders to fill the gaps in branding guidelines and ensured that where possible any logos or icons were replaced with scalable vector versions to ensure crispness of presentation at any device resolution or pixel density.

Results:

I set about rearranging CSS so that the main stylehseet contained all styling except for classes relating to color, font or imagery. This improved the speed of delivery with each new brand requirement.

Public website

Tools:

HTML5, CSS3/Sass, jQuery/Vanilla JavaScript, Git, Grunt, Bower

The Situation:

Working as part of Jadu's Spacecraft team I was responsible for converting digital designs into pixel perfect, accessible and responsive websites and integrating them into Jadu's own content management system. Jadu's client base consists primarily of public sector entities like councils and universities. The screenshot shows one of the websites I helped to develop.

Public website

Tools:

HTML5, CSS3/Sass, jQuery/Vanilla JavaScript, Git, Grunt, Bower

The Situation:

Working as part of Jadu's Spacecraft team I was responsible for converting digital designs into pixel perfect, accessible and responsive websites and integrating them into Jadu's own content management system. Jadu's client base consists primarily of public sector entities like councils and universities. The screenshot shows one of the websites I helped to develop.

Public website

Tools:

HTML5, CSS3/Sass, jQuery/Vanilla JavaScript, Git, Grunt, Bower

The Situation:

Working as part of Jadu's Spacecraft team I was responsible for converting digital designs into pixel perfect, accessible and responsive websites and integrating them into Jadu's own content management system. Jadu's client base consists primarily of public sector entities like councils and universities. The screenshot shows one of the websites I helped to develop.

Public website

Tools:

HTML5, CSS3/Sass, jQuery/Vanilla JavaScript, Git, Grunt, Bower

The Situation:

Working as part of Jadu's Spacecraft team I was responsible for converting digital designs into pixel perfect, accessible and responsive websites and integrating them into Jadu's own content management system. Jadu's client base consists primarily of public sector entities like councils and universities. The screenshot shows one of the websites I helped to develop.

Fleet management software

Tools:

Photoshop, HTML, CSS, JavaScript

The Challenge:

FleetWave is the product of porting a windows application to a web based service. The aesthetics of the application had never been addressed prior to my arrival at the company and as a result the interface looked like a Windows 3.1 application. My first task in the company was to redesign the entire application.

Solution:

FleetWave had been ported from a desktop application to ASP, and from ASP to .NET. The application is designed as an enterprise solution for all manner of fleet managment requirements. As a result there was an enormous amount of code to audit. The HTML had been written by several different developers over the years and with no design guidelines. As a result very few DOM elements even contained classes, so identifying which elements I was styling was more than a little tricky. The buzzword of the time for the managing director was "quick wins". I was asked to complete a redesign of the entire application within six weeks in order to be ready for the yearly user day, which this year was marking the release of FleetWave 2.0.

Results:

I was able to skin the application in the given timeframe and it received very positive feedback, marking a massive improvement on user survey questions relating to usability and aesthetic design. In time I was afforded the space to rewrite tens of thousands of lines of HTML in the application with modern, standards compliant HTML, removing deprecated attributes and improving coding standards on the front-end.

Application to assign damage to vehicles

Tools:

Photoshop, HTML, CSS, JavaScript

The Challenge:

Design a module that could be used to highlight areas of damage to a car. It was important to me that the project ran to timescale and I had 2 weeks to prepare a design and produce accompanying front-end code and graphics in support of the module. Given that the project was running over schedule it was important to deliver this in a timely fashion to prevent poor relations with the customer and prevent revenue loss.

I worked with the client and development to deliver the design spec. It was important that I worked closely with the development team and client to properly spec out their requirements and analyse scalability and the potential needs of other clients.

Solution:

I produced a design that allowed the user to easily map areas of a 3 dimensional car using a 2 dimensional graphic. I produced an easy to use, tabbed interface that allowed the user to click an area of the car and then choose from a list of damage types. The interface allowed them to add further comments if required and provided scalability in the ability to add further vehicle types should that become a future requirement. The design was produced within timescale(including graphic creation and front-end code) to specification and allowed for future scalability.

Results:

A modular design that could be used by present and future clients with the same requirement and in the interests of streamlining our product.

Corporate website

Tools:

Photoshop, HTML, CSS, jQuery, Bootstrap, Font Awesome

The Challenge:

The corporate website is out of date and requires a new responsive cleaner, modern and fresher look in preperation for new company branding plans.

Solution:

I implemented a framework and designed accompanying graphical assets to better comunicate the company products and services. I created a colour pallete representing the primary colours to match with the new company branding and provide options for communicating information graphically, incorporating the design into Chevin's own content management system. Readability and user journey were vastly improved. I incorporated a more pleasing font family and improve content presentation, making use of scalable vector graphics.

Results:

I implemented the latest Bootstrap framework and used CSS3 techniques to create some transition effects to differentiate us from our competitors. A complete graphical and framework overhaul was implemented.

Knowledge share platform

Tools:

Whiteboard, Post-its, Photoshop, HTML, CSS, JavaScript

The Challenge:

To produce a structured and user friendly knowledge base that can be used as a self-service training tool to quickly on-board new starters and ensure existing staff have the skills that they need, relevant to their roles.

Solution:

As part of the newly formed management team we set about conducting research in all functionality within the product. I researched existing online training resources, determinng a solution that would be useful for our business.

Results:

I put together designs and coded the front-end of the application ready for review.

Ideal State:

A clear, logical and comprehensive curriculum in user friendly, accessible language and an easily navigable online reference with a defined process for on-boarding new staff and a single point of reference for learning about any part of FleetWave functionality.

Logo

Tools:

Illustrator

Design:

The logo represents one of several bespoke designs for clients, designed in Illustrator and provided as scalable vector graphics for use across multiple media types, e.g. business cards/websites/large scale print media.

Logo

Tools:

Photoshop, HTML, CSS, jQuery, Bootstrap

The Challenge:

To produce a clean, easily identifiable and scalable logo for use in a range of media types from large scale signage to small scale web icon, whilst maintaining brand awareness. With the start of the financial year looming it was important to understand the brief and to make sure that a design could be created in line with the needs of the company globally.

Solution:

I Investigated modern corporate logo design, looking at some of the world's leading brands whilst focusing on the software sector. I investigated the issues with the current logo, looking particularly at where it was used and how that aftected brand identity.

Results:

Using colour theory I arrived at a colour palette containing a bright, modern and vibrant red in keeping with our old logo, but which also provided alternative and complimentary colours for use in other branding outlets. I applied the principles of the golden ratio to the design to yield pleasing, harmonious proportions, softening the corners to make the design less harsh. I investigated font types to discover a highly acclaimed font with mulitple weights that is modern, clean and easy to read on both screen and print. I used a bold font weight to make the font readable at small scale. I reworked the font to make it obey the proportions of the golden ratio.

Logo

Tools:

Illustrator

Design:

The logo represents one of several bespoke designs for clients, designed in Illustrator and provided as scalable vector graphics for use across multiple media types, e.g. business cards/websites/large scale print media.

Logo

Tools:

Illustrator

Design:

The logo represents one of several bespoke designs for clients, designed in Illustrator and provided as scalable vector graphics for use across multiple media types, e.g. business cards/websites/large scale print media.

Logo

Tools:

Illustrator

Design:

The logo represents one of several bespoke designs for clients, designed in Illustrator and provided as scalable vector graphics for use across multiple media types, e.g. business cards/websites/large scale print media.

Logo

Tools:

Illustrator

Design:

The logo represents one of several bespoke designs for clients, designed in Illustrator and provided as scalable vector graphics for use across multiple media types, e.g. business cards/websites/large scale print media.

Logo

Tools:

Illustrator

Design:

The logo represents one of several bespoke designs for clients, designed in Illustrator and provided as scalable vector graphics for use across multiple media types, e.g. business cards/websites/large scale print media.

Illustration

Design:

Created using Photoshop.

As a content creator for the mobile game Marvel Strike Force I created many infographics. To make them appealing to fans of the Marvel universe I created several Illustrations to include in these infographic user guide designs. Pulling character images from several sources, including photographs and statue models I needed to find a way to make all characters have a single look for consitency so they look like they are created by the same artist. By creating custom filters and using various Photoshop techniques I managed to implement my own unique character style. This illustration (used for the monthly 'Hundred Heroes' Alliance War guide) is one of the more complicated examples I produced.

Directions:

Right-Click the image and select from the menu options to get a full size version of this illustration.
(The image will be optimised for the web and only represents the original image)
6148 x 3800px

Illustration

Design:

Created using Illustrator. I initially had a requirement to develop a colour scheme for this portfolio website. I wanted to develop a palette with various colours that could represent my professional skills as a web developer. I put together a colour scheme to represent the various states of UI interaction like error, warning, info & success. I based the colours on the popular Monokai coding colour scheme. The purpose of this Illustration is to demonstrate my skills as a rapid prototyper, illustrator and responsive web developer.

Illustration

Design:

Created during my early foray into the world of design. I needed first to demonstrate my abilities as a designer, so I set about creating illustrations in various different styles in order to build up a portfolio and develop my skills. This image represents one of several from that initial portfolio.

Illustration

Design:

Created during my early foray into the world of design. I needed first to demonstrate my abilities as a designer, so I set about creating illustrations in various different styles in order to build up a portfolio and develop my skills. This image represents one of several from that initial portfolio.

Illustration

Design:

Created during my early foray into the world of design. I needed first to demonstrate my abilities as a designer, so I set about creating illustrations in various different styles in order to build up a portfolio and develop my skills. This image represents one of several from that initial portfolio.

Illustration

Design:

Created during my early foray into the world of design. I needed first to demonstrate my abilities as a designer, so I set about creating illustrations in various different styles in order to build up a portfolio and develop my skills. This image represents one of several from that initial portfolio.