A lead digital designer with 15 years experience that dabbles with UI, code, and illustration…
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 Recharge 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.
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.
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.
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.
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 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.
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.
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.