The key focus for all of this was to incorporate the latest brand guidelines into the main national grid family of sites, improve navigation and usability of tired templates, and make the website feel more current and richer if there was a need for it. I worked closely with a joint UI UX designer to help create a range of templates and together produce a UI kit outlining a whole library of new components with a consistent brand treatment. There were a lot of challenges to overcome, not just from a visual perspective but how some newer components could be maximised to be used on editorial pages instead of very informative ones.
Usability was considered at every point throughout the design process and this started within the UX. Towards the end of the project I also got involved in a discovery task, experimenting with some of the other pages and how they could adopt the new design through simple CSS editing with the global styles. This practice involved playing with the current site within the browsers dev tools, and manually adjusting the page to see what could be achieved. Along with design, prototyping, and interaction with the client side team throughout it was a project that pulled a whole range of my skill set.
My involvement in this project wasn’t the usual position of designing the UI, but focusing more on the build side taking the designs from a UI / UX designer within Shell New Motion and working with the developers to build the pages out in a third party app in BigCommerce. To match the design and style coming from the Zeplin links involved a fair amount of custom elements and modifying them with CSS, relying heavily on flex-box properties.
To help build the pages and to get the backgrounds and icons working correctly involved resorting away from the text editor and using Sketch and Photoshop to export assets to assist the build. This is the first project using such a dev tool intended for hybrid digital designers and enjoyed learning at speed alongside the daily tasks from the brief.
In the early stages of the National Grid web refresh project there was a requirement to present the design direction and concepts to stakeholders of the organisation. I suggested to fully sell in the creative would be to prototype up a rich header using the design elements from sketch. The prototype was fairly quick to build with taking sliced up png’s from the Sketch files and building them into a web page with HTML & CSS that would use a scroll effect with the title overlaid on a looping video created in After Effects.
Cohaesus was asked at the eleventh hour to help design and produce the festival website for one of the first EDM festivals in Saudi Arabia. Brand guidelines had been set for the festival artwork along with the social side, while the UI creation had some parameters to follow, but with a small creative team of myself, a videographer, and an art director based in New York we worked together to help make this the rich festival site they were originally hoping for.
A mobile first approach was employed as the usage of this website would be at the festival. For the tight deadline we relied on a wordpress theme to do some of the base styling, I had to keep this in mind while trying to not go off on a tangent with the UI design to help the development side of build. The project reached its deadline to do a reveal in the form of a counter and some other updated pages were added as a second phase. A range of tools were used over the course of the project such as Sketch, InVision, Photoshop, and Illustrator.
From a client design workshop there was a requirement to fully flesh out some of the preferred concepts into an app that would cover the Handley House group of companies. This would work in the form of company intranet within a phone app. It would offer access to project briefs, a company - client chat functionality, news, inspiration project boards, and notifications all held in one place.
This was an internal project to attempt to do ‘headless e-commerce” with big commerce, a member of the team’s other half was creating and selling home made chilli jam and the idea would be to add these into the set meal boxes of pastries, and other fresh food items sourced from Margate. Apart from the UI design of the main e-commerce site there were other tasks such as the branding with quick logo design, and the creation of packaging stickers in the form of address labels.
We worked in a small team to help concept logos and the site itself with useful ideation sessions. Being an internal project time was tight so we were all working at speed including the development. Adobe Illustrator was used for all the branding material while Sketch and Zeplin were relied on heavily to deliver the UI to the developers. The project led to further work for clients with Cohaesus being recommended by BigCommerce.
The brief requirement here was to push up sign ups to Aspria’s european health clubs and spas with a campaign landing page. This would be a one pager design with a seperate page for sign up form. Taking a few hints of the brand I was able to push the design with this creative, showing rich large photography to really highlight what the clubs had to offer.
The use of personalisation on this site was another feature, especially using the mobile version would give you a different header and other sections of difference depending where you were near. So the benefits of the local club would be pushed onto you more rather than a general page that covered them all. I worked closely with UX and development to help deliver this project along with the use of Sketch and InVision for presenting the UI concept to the client.
My first brief working with Cohaesus, and required the complete visual overhaul of Yoti's current website to address the limitations of the current design and build. I worked in collaboration with a UX designer and the Creative Director within Yoti, turning the wireframes into final designs ready to go into development, and being on hand for any design difficulties that arose during development.
As some core elements of the brand were remaining, I had to adopt and extend their current Design System within Sketch that evolved as each page was produced. InVision was used to communicate designs to the clients for creative review and sharing updates amongst the project team. Designs were shared with the overseas development team with Zeplin. Problem solving was key along the whole process especially with incorporating mobile designs alongside the desktop views. Applications and skills used during the project: Sketch, Creation of a sharable Design System, Illustrator, InVision, and Zeplin.
For the seasonal period, a request for a custom landing page came through for Samsung to promote a range of smart devices alongside a cashback purchase incentive. The minimal white and blue theme continued within the header to keep consistency of other campaign material. The design also contains a campaign hub to house the TV placements that were running during the Christmas period. Applications and skills used during the project: Salesforce, Sketch, Photoshop, and Illustrator.
Another part of the Amazon ecosystem involved projects around the Fire TV product. On this occasion this project was to help advertise the range of Disney family films available to stream on Amazon Prime over the Christmas and New Year period.
The user journey starts from a full span banner to sit within the menu system, a user interaction directs to a Film Carousel. The artwork and design was modified from the supplied campaign assets to keep consistency but fit neatly within the UI of the Amazon Fire TV interface. Applications and skills used during the project: Salesforce, Sketch, Photoshop, and Illustrator.
To coincide with the TV campaign planned for Christmas, I designed and created a custom landing page for the Amazon UK page to highlight key products. I was responsible for a basic UX of the creative, along with the build onto Amazon’s platform.
A secondary function of the custom landing page was to act as a gift guide, directing the user to a list of Lego products sold on Amazon depending on interests and ages of the planned presents. Applications and skills used during the project: Salesforce, Sketch, Photoshop, and Illustrator.
During my time at Amazon over the Q4 period I created a range of animated wake screen ads for the fire tablet to cater for Black Friday and Christmas promotions. Adhering to the tight specifications of the placement and considering best practice to make the user journey as simple as possible with clear language and UI design.
Along with creating the initial layout of the portrait and landscape views, I was responsible for creating the placements on the amazon platform to distribute the creatives once approved. Applications and skills used during the project: Salesforce, Sketch, Photoshop, and Illustrator.
The Take:90 campaign was launched in the summer of 2018 to tackle the increasing rise of aggression within cities and educating the public about the psychology of anger. The campaign consisted of a launch film, a website, and a range of digital and social media communications.
With an expected rise of entertainment purchases during the world cup, which wanted to highlight their product reviews and comparisons available to subscribers through online ads. I worked on these using some of the previous designed and animated icons, but giving them a little hint of the football theme that the current set style would allow. After a few tests with various ball illustrations, colour combination, animation styles I could then start creating and building these into the banner templates.
To highlight a new track created by Diplo and MØ espcially for Tuborg, I created a suite of social video posts for each of their social accounts, mainly intended for Instagram. Asset wise, a promotional video was available to us, along with extra behind the scenes footage. I used a glitchy text treatment, to help be consistent with what the production agency had used on some of their promotional video.
This aided hard cuts within the videos to be more visually interesting. The main priority with these was the vertical video posts, later resized to the more familiar square format. Applications and skills used during the project: Illustrator, and After Effects.
Part of a digital tool kit to promote the New Sensor 3 cool blade required the production of social media videos, two of these were single square posts and another linking two videos to be housed within a Facebook carousel. To communicate the coolness of the gel and razor required various techniques to fake steam and ice effects within After Effects to get the animation looking just right.
The flow of each animation was first mocked up in Photoshop, and these were created in such a way that they could be easily implemented into After Effects to help speed up the production. Applications and skills used during the project: After Effects, Photoshop, and Illustrator.
A suite of social posts were created to be released alongside Grey’s first TV ad for Tuborg. With extra footage of all the characters that made an appearance in the ad, short cuts were made from these for social use. Brand awareness came in the form of the clockman logo, bulging in over the video as a sign off at the end.
Time Remapping was a valuable tool creating these, helping especially with the looping versions. Other editing skills with masking allowed alternative methods of revealing text within the creative suite. Applications and skills used during the project: Illustrator, and After Effects.
With a new brand look devised and created for print by Grey, I was tasked with getting this new look and feel working within the digital space for the likes of social, online advertising, and digital outdoor spaces. The new look used very bold colours and simple icon graphics alongside bold impactful text. With the many services Which? has to offer to consumers led to the opportunity to develop new ones.
With the M&S tie up with the release of Paddington 2 for their Christmas ad, there was a push on social to get the Christmas campaign across all social channels. Involving short bumpers, boomerangs using footage from the main TV ad. More traditional methods followed with the social video suite to producing online banners, and an example for a production company to follow.
The turnaround time was very tight due to releasing this mix of social and digital advertising at the same time the TV ad went live. Applications and skills used during the project: Photoshop, Illustrator, Animate, and After Effects.
One of the most impressive social videos out of the suite I produced for the M&S Christmas food campaign was the parallax scene over a table full of Christmas food, showing the range of food M&S were promoting for the festive season. The items themselves were cut out from campaign photography and comped together in After Effects, while careful animation and control of the camera on the timeline was refined to create a fly through over the table scene, showing a main product at the end before cutting to the logo.
The posts were targeting mobile social users, and the vertical video especially presented a few challenges in keeping a nice view of the scene within a narrow width window. Applications and skills used during the project: Photoshop, and After Effects.
For the Black Friday period of 2017, Which? saw an opportunity to release a suite of emails sent to their subscribers to cover various questions and pointers of getting the best out of the sales. The previous emails that were being used at the time were over hauled with this fresher cleaner look. The suite contained a total seven emails, so a semi modular design was used to keep a sense of consistency across the set.
Like the banner ads created previous to this, the creative followed the new communication style with bold colour and dark icon artwork using the famous question mark. Applications and skills used during the project: Photoshop, and Illustrator.
On the digital side of new business pitch for Tuborg, I was involved in bringing a concept for a social app to life through design and a video animation created in After Effects to demo the product. The intention was to make the app look as real as possible, including all the little details like interaction, swiping, selecting images, and a fully flowing messenger window for the chatbot section.
This video was modified later after the pitch to help sell in a chatbot idea that eventually went into production and released in Eastern Europe. Along with a version that was populated in content for the Asian markets such as China for possible use there. Applications and skills used during the project: Photoshop, Illustrator, and After Effects.
After the two summer campaigns for food and clothing, the next big one was for the Back To School Range. This creative for a Facebook carousel took some patience with masking out the kids to reveal the various offers M&S wanted to promote during peak uniform buying periods. The intense masking and jumping frame by frame for some of the footage, this project was certainly a labour of love. Applications and skills used during the project: Photoshop, and After Effects.
To coincide with the TV and print advertising for the M&S summer food campaign, I helped produce a suite of assets for social videos. At the time Facebook had just started accepting the vertical video format to make more use of mobile displays. Our creative took this as the primary size to begin all our video creatives.
The concept of these quick teasers is a split screen view of the food alongside a mediterranean theme or scenery that the food range took influence from with colours and tastes. To complete the body of work, various banner placements were designed keeping the same idea across both the social and online advertising. Applications and skills used during the project: Photoshop, Animate, and After Effects.
Promoting the summer range was the first Marks and Spencer project I was involved in after Grey won the account. The main focus was on various video placements for outdoor media across the country, the media ran on screens in places such as train stations, shopping centers and similar. The creatives all followed the new creative branding set out for the Spend It Well campaign run by Grey.
Many different versions had to be created due to many media specifications and screen sizes, it was quite a challenge to keep the whole creative package consistent, relying on a layout grid more than ever for all video layouts. Applications and skills used during the project: Photoshop, Illustrator, and After Effects.
Following the awful dates theme from the previous social posts in 2016, Opening Lines took the dating theme further than the previous, with awkward texts sent by each of the characters. Focusing on lots of facial expressions within a split screen concept to show the shock and dismay the crazy hopefuls inflict at the same time. The production agency in charge of filming, supplied lots of footage, allowing freedom for choice of cuts and editing within the film.
The project started with a rough animated storyboard using ungraded footage to get the concept approved by the client, to then go into full production for what would go live on social channels. Applications and skills used during the project: Illustrator, Animate, and After Effects.
A production company had formed two videos for the German fragrance Bruno Banani. As these were too long for the likes of Facebook and Instagram posts, I was assigned the task to form separate cuts to meet the social guidelines for video posts. Other than editing and splitting the video up, some new graphics were redesigned and added to fill the space better. It was important for these social edits to be as consistent as possible with the longer edits to keep consistency with the campaign. Applications and skills used during the project: Photoshop, Illustrator, and After Effects.
From a large tool kit of assets ranging from online banners, social media posts, to video posts, these two were my favourite boomerang loops to fill a very short space of time. Trying a few new methods in keeping the loop and smooth as possible. All the creativity focused on how their latest razor could last for up to ten shaves. Applications and skills used during the project: Photoshop, and After Effects.
TMW Unlimited were tasked in building an interactive installation for Canon on the technical side. Phase two of the project involved a redesign of the original interface / UI to improve from the original, and include requirements for future use within a retail environment.
My role as a designer involved working closely with UX to identify improvements throughout for a better experience, and to keep the sharp clean style of the original. Applications and skills used during the project: Photoshop, and Illustrator.
To mark the 40th anniversary of the prince's trust, an online hub was created for those involved to share their memories and experiences to highlight the size of the trust. The campaign was powered by the Twitter platform hashtag’d to link users video and images into galleries for others to share and add.
My role as a lead designer on the project, involved creating designs that had a clear hierarchy, creation of extra modules and UI that matched the parent site, and were within restraints of technical requirements. Making sure information and instructions in all pages were presented within the design clearly for a wide user age group. Applications and skills used during the project: Photoshop, and Illustrator.
Notified users wishing to be updated about the pre-order of the latest Sony Xperia would receive this email. To really catch their attention I created a simple gif animation for the header using footage from media linked to the campaign to create a intro transition.
Using simple stacked modules with full colour bleed backgrounds ensured recipients would get a similar experience on both desktop and mobile with the responsive template. Applications and skills used during the project: Photoshop, Illustrator and After Effects. HTML / CSS for presentation of concept.
With many operations across the world, the websites lacked consistency with each region. TMW Unlimited was asked to come up with a global solution for markets to use. The team adopted a user centered design approach, identifying various personas and their requirements. The design of modules were heavily reviewed and tested throughout.
I was involved in many sprint sessions throughout the project, working closely with UX and Development to be sure our ideas and solutions were possible. Getting an insight into what websites appealed to the client, the initial creative process started with forming three style tiles, to present three possible design routes using that inspiration to get very close to the vision Barilla had in their minds sooner within a very big project. Applications and skills used during the project: Photoshop, and Illustrator. HTML / CSS for presentations during sprints.
To highlight Diageo’s brands over various points of the year, required the creation of a reusable campaign page to match closely the other forms of advertising and marketing released at that time. The focus for the initial creation used campaign material planned for the summer of 2015.
I was tasked with the UX and design on this brief, to form reviewed wireframes after discussions with the client over various requirements. I worked closely with development after to be sure my solution would work within the backend of the site and the browsers the parent site targeted and how to present the campaign clearly for mobile users. Applications and skills used during the project: Photoshop, and Illustrator.
This project involved looking at refreshing sony’s current data capture forms for customer contact details to registration for a new account on their website. Looking at the original UX, I did my best to keep the form clear and sectioned neatly with grouping and clear titles. Giving adequate spacing for error messages and general breathing space between the various blocks of data fields. As with any online project, mobile users were considered from the start. Applications and skills used during the project: Photoshop, and Illustrator.
For the leadup to Christmas in 2014, I worked with another designer and developer at TMW on a side project to track Christmas terms used on twitter. Starting off with a list of words / terms we illustrated many characters and objects best to suit those and then housed them within a scene that zoomed when the user scrolled. To keep everything crisp and sharp our creations were exported as SVG.
The project took around three weeks to produce outside of work, just in time for a launch at the start of december, using Google Drive to share and collaborate with assets. An option to kindly donate to the charity Shelter was also added. Applications and skills used during the project: Illustrator.
Diageo wanted some options with thebar.com to promote various products at various seasonal points in the year. A proposal to look at making the landing page more editorial was requested, pushing more than one article or link within the header, followed by further drink mixing content below within the rest of the page.
A second part to the project was to look at a new section within the site in the form of a hub of articles, that could be used as a blog. With a purpose of highlighting drink events, seasonal cocktails, recipes, and highlight various diageo products. A freeier approach was adopted with these layout compared to the more structured look and feel of thebar.com. Sadly none of these concepts came to light other than the split header on the current website. Nevertheless, It was a fun exercise in layout experiments. Applications and skills used during the project: Photoshop, and Illustrator.
To push more ticket sales, the Arrive Awesome campaign covered TV, press, outdoor, social, and digital advertising. Online the campaign resulted in 25 million online impressions, and the campaign on a whole increased revenue by £13.5 million. With my experience in Flash advertising, this was to be my first introduction to HTML banners on the build side.
With Ofgem bringing in changes to simplify the energy market, TMW were tasked with creating an online hub of information for the public about these and future changes planned. With a user age range of 18-80 meant ease of use was mandatory across all pages. Colours were contrast checked throughout the design process to cater for as many as possible at AA standard.
A friendly vibe was incorporated into the design with strong use of colour, and SVG Icons that sat with their relative article to avoid lots of FAQ like templates. I worked as a Lead designer and Illustrator throughout the project, working closely with development and UX at many stages. Applications and skills used during the project: Photoshop, and Illustrator.
To push the DO:MORE branding of Sure deodorant, TMW covered POS, social, ECRM, print, and a TV ad with this campaign. Focusing on summer festival tickets achieved through competition codes. My first task involved the creation of the online hub and keeping a premium, easy to use style from the landing page, all the way through to the submit form.
I was heavily involved in the creative for online advertising after the hub design. To target as possible, the accompanying media was built both in Flash and the Celtra ad platform to allow rich animation on mobile and tablet devices using html / css. Altogether the campaign achieved 39% ad recognition and one million social impressions. Applications and skills used during the project: Photoshop, Illustrator, Flash, and Celtra.
With the completion of both design and development on the infiniti.eu website, the project was ready to not only go live, but the next phase of shipping the project to new markets within Europe could now begin as planned. In order to follow consistency and continue the design I set in place, the client agreed we needed an online hub to house a style guide that these new markets could refer to and follow during the creation of tailored content for their regions.
A very detailed look was included within the pages for interaction states, typography, form modules, pixel sizes, and how marketing emails would follow the design style of the parent site they were sent from. Research before the project involved in looking at best in class examples available from UX articles and blogs, to get an idea of how to make the pages as useful as possible to current leading standards and presenting the detailed information. Applications and skills used during the project: Photoshop, and Illustrator.
While the Infiniti.com website was being built for Europe, TMW were asked to create a brand hub to fill the gap in between and overhaul the current site used for the region. Design, UX and development worked closely within a small team over a period of a few months to be seamless in creating the site.
A key requirement was to present the user with information that was considered yet organised, and to avoid being text heavy. Focusing on full bleed imagery to highlight the premium products Infiniti were creating. Clear navigation, easy on the eye, and a strategy to simplify the user journey and to increase user engagement to eventually submitting their information for a possible test drive. User base for the site increased by 26% compared to the previous hub. Applications and skills used during the project: Photoshop, and Illustrator.
This brief was part of a pitch within the BBC, over methods on how to monetise parts of the iPlayer outside the UK for oversea customers, similar to subscription services and iTunes. Taking the strategy and user journey on how this could be a possibility, my task involved bringing this to life within the design of program landing pages on the main BBC website, while working closely with an Art Director and UX.
I had to balance usability and cosmetics to keep a page looking rich and appealing with full bleed backgrounds, while being easy to use for multiple personas. Keeping the BBC brand and careful consideration to UI and CTA’s. A strong focus on designing for tablet use was a requirement throughout. Applications and skills used during the project: Photoshop, and Illustrator.
The first brief I started on when joining TMW soon became the biggest too. Diageo’s theBar.com at the time existed only in the US as a cocktail recipe site. A release planned for Europe allowed an opportunity to redesign, and rethink the entire user journey completely, from page layout right down to the UI. Working with an Art Director, and UX helped to keep the balance of a premium yet usable site.
Brand awareness was in union alongside clearly presented cocktail recipes and never overpowering. After launch results were impressive too, 300,000 average visits a month, with 50% of traffic from portable devices, and over 100 social shares a week. Applications and skills used during the project: Photoshop, and Illustrator.
A rich media campaign built in multiple sizes in the form of a retail booklet showing the vibrancy of Dulux paints. The user can flick through each page scene and clicking through to obtain a test pack of the colour used within the background photography. My role on the project involved layout design and initial storyboard, right through to animating and programming the media placement in Flash for DoubleClick. Applications and skills used during the project: Photoshop, Illustrator, and Flash. Developed in actionScript 3.0.
Google presented many tips on how to stay safe online with personal information and security. To push that message further came in the form of a book that existed in various rich media placements. Artwork and illustrations from the campaign were all included to give a sketch book aesthetic to the overall design. Page turning of the book was refined and tested to keep the experience as rich and realistic as I could.
Along with a system that loaded in the pages dynamically to help filesize restraints with the media space. Different languages were also required for the campaign to run in Europe too. Applications and skills used during the project: Photoshop, Illustrator, and Flash. Developed in actionScript 3.0.
In the run up to the Olympics in 2012, adidas wanted to release a new line of Stella McCartney designed sportswear. To create interest and provide information to potential customers about these new products, an idea was formed to create a microsite from scratch that lived inside adidas.com.
Featuring a one page site solution and having control over the UX, I decided on accordions and tabs to house the relative sections. With access to rich photography provided by adidas, made the process of achieving a premium look and feel much easier. A small team involving myself, a producer, a developer, and an account manager had complete ownership of the project throughout. Applications and skills used during the project: Photoshop, and Illustrator.
Releasing alongside TV and print with adidas’ “Are You In” Campaign, glue Isobar were tasked with creation of a competition hub that would be another route to gaining awareness on social platforms like Facebook and Twitter. The competitions were more focused on the brand interacting with current culture than to do with sport.
Design wise I pushed to make the layout as rich as possible but not overpowering. Clear division between sections with use of full bleed backgrounds of campaign imagery to link to the other areas of the advertising. Applications and skills used during the project: Photoshop, and Illustrator.
For the release of Nokia’s N9 glue Isobar had presented a concept and idea around an AR website using the webcam api in Flash to interact with the phone using gestures. Here users could get an insight into the latest UI of the phone and see all other features and benefits with the product. After experimenting with the handset I went on to design and direct a style that matched the bold colours of the handset and take hints of the UI on the phone’s OS.
CTA’s were treated more like hotspots than buttons, and required a different approach to other microsites previously designed. I supported the Flash developers during the build stage, supplying assets and animating sequences and screens in After Effects. Applications and skills used during the project: Photoshop, Illustrator, Flash, and After Effects.
To advertise the miCoach training app for the iPhone, I was asked to take a concept and make it a reality with designing and building the ad. To entice users into watching the video I added hints of the promo with a few scenes, housed inside the polygon shapes used in other parts of the branding, with various other effects layered over on top.
The masthead placement on YouTube doesn’t match the ratio of the video so a little treatment was added to fill the space on the end sequence to bleed out to white for a neater lockup. Applications and skills used during the project: Photoshop, Illustrator, Flash. Developed in actionScript 3.0.
I was briefed to design, animate, and build a masthead for nokia.com to advertise the new Nokia N8 smartphone. Asset wise for the project, we had access to 3D renders used in the TV adverts, mixing these in with the standard flash animation helped to push the rich ad placement, along with consistency to match the rest of the campaign.
Some random math scripting added some life into the background, with the cubes floating in various velocities throughout the duration. Applications and skills used during the project: Photoshop, Illustrator, Flash, and AfterEffects. Developed in actionScript 2.0.
To direct traffic to the microsite I was involved in some rich ad placements that were expendable on roll over. Using video from various parts of the microsite I comped everything into a flow with cue points to trigger certain titling and text effects. Every aspect of the ad right down to small little UI hints, were designed and animated with as much detail as possible.
File size restrictions on collapsed parts of the placement meant animating a lot of the effects on the side of the shoe with the basic tools in Flash than using sequences or loops of video. Applications and skills used during the project: Photoshop, Illustrator, Flash, and AfterEffects. Developed in actionScript 2.0.