I design and deliver projects for organisations such as National Geographic, Siemens, Bowers & Wilkins, and ambitious startups.

My work applies thorough, user-friendly design that moves projects forward. These can be greenfield projects like attention engineering for Aris Technologies. Or a communication strategy for Vaultarch, an award‑winning deep‑tech company.

Currently, my focus is content design for the mobile web. This includes graphic design, rapid prototyping and writing templates. I’m enthusiastic about combining performant code, aesthetics and accessibility.

Turning a brief into assets, I’m comfortable in organisations of different sizes. I have produced resilient templates for startups with a few million in funding. And consulting services to a company with a market capitalisation of over £30b. But, don’t worry if you’re not there yet – there is potential to contribute to smaller projects that need help getting off the ground!

Proud to be a fearless creative that can embrace practical constraints – I work best with talented individuals who innovate.

Would you like to send me an email?

Multilingual booking

Written in HUGO and deployed to NetlifyCMS for speed and simplicity this site helps people understand the health benefits of cold exposure.

Securing bookings as an Ice Coach and educator Alessandro Ronca vividly explains the benefits of The Wim Hof Method in Italian and English.

Challenge Accepted!

Forseen technical challenges included:

• NetlifyCMS does not officially support multilingual sites.
• high-quality templates for Schema.org poorly documented.

Both solutions were possible by writing complex templates with nested data.

Search Engine Whisperer

Technical SEO templates were written to helps capture people’s imagination when looking for ways to improve thier health.

The SERP (Search Engine Results Pages) now proved authors with granular control over how their pages look for the first time they are seen.

JSON+LD was generated to meet modern search engine requirements with techniques inspired by Yoast and tested on Google’s Structured Data Test Tool.

Visit

Alessandro Ronca.it

Beyond Sustainability

The platform shares 20 years of learning about domestic and community sustainability.

The aim is to connect other design sucesses with people across disciplines.

Areas of focus

Designed with Generalists in mind, the project brings attention to key areas of change: Health, Education, Food, Transport and Shelter.

This isn’t focused on countries finding ways to justify the costs of managing the Climate Crisis – but how design should raise life quality for billions.

Visit

RVO.LT

Communicating family values

A warm, welcoming website clear for local people looking for fresh, organic produce. Yet appealing to food connoisseurs, even overseas.

Powerful tools for nimble pages

This mobile first eCommerce site runs via NetlifyCMS, a web interface for writers. A static site generator called HUGO produces flat files without a database. This combination scores highly with Google PageSpeedInsights.

Manageable styling

Tachyons adapts to design needs. By patching existing classes fixes limitations in the library. Consciously adding utility classes keeps things manageable, while extending default behavior.

These work with Javascript for accessibility and for image handling blazy.js.

This combination places content in the hands of the author. Resulting in lightweight, rich, multilingual content – without bloat.

Empirically tested

Marzo.li scores 100% on Google PageSpeed insights. Learn more on the GTMetrix report.

Visit

Marzo.li

Co-habitation Property Services

This webapp helps people in the luxury rental market organise and filter rooms to taste.

JSON sanitisation in NetlifyCMS

The filter takes JSON data and renders it client-side keeping the information up-to-date without having any other build process.

Terse code output from HUGO templates, catches data entry errors. This investment makes maintaining nuances in the properties as simple as possible.

Visit

Locality.site

Award winning Ltech startup

Cambridge University’s Andrew Buchanan, set out to make counterfeit, theft and fraud a thing of the past: Vaultarch is a multi award winning Ltech (Legal tech) startup protecting valuable collectables.

Scott displayed energy & resourcefulness… He has good networking skills & an eye for the commercial factor – Andrew Buchanan, Vaultarch

Visit

• Vaultarch.com
• Startup Weekend
• Startup Next
• Facebook
• Twitter
• Cyberport2, Hong Kong

Project in detail

Why is Vaultarch important?

Magic The Gathering playing cards can be valuable – some are £30,000 each. This makes them attractive to counterfeit, theft and fraud. Motivated through having early edition cards stolen – Vaultarch fill an important niche.

Deeptech innovation

The approach uses machine vision to process translucent image data captured using a smartphone. Organic patterns inside paper act as a fingerprint, which is impossible to fake – offering provenance and storage in a secure database, amongst other security benefits.

Using OpenCV and pHASH the solution overcomes several problems, unique to this industry, yet not limited to it – as the solution scales it will lucratively impact other areas of the insurance industry.

Community building

Connecting relevant industry insiders means Vaultarch can earn trust. And by finding their first customers they can develop a product tailored to their target market from the very beginning.

Find the best VC investors

Opening the network up overseas with card traders, we shared insight into asset grading, verification and provenance and the multi-billion dollar secondary marketplace.

Attended events and working from campus to develop strategies for further seed funding, we met with investors such as Simon Cook, and TV’s “secret millionaire” Mike Greene. This was useful to learn about the trajectory of a high potential businesses like the Vaultarch opportunity.

Business Development

• Described the solution (openCV), using a simulation of point-to-point recognition using Photoshop convolution matrix to articulate machine vision goals.
• Research market validation, competitor analysis, patent and intellectual property considerations and hiring.
• Risk assessment covering: business risk, market risk and technical risk.

Content and copywriting

Vaultarch’s “Preventing counterfeit, theft & fraud” proved to work when attention is scarse and helps maintain design consistency.

Design improvements

• UX emphasising stronger contrast, typography and accessibility.

• Logo redesign for readability.

Summary

Prioritising the main thing “most startups fail” at, Vaultarch have marketed the business from inception. It is accepted that any startup should be evenly balanced, concentrating on a three-pronged approach to product design: user experience, engineering, and marketing.

Vaultarch started as they mean to go on.

An eye for detail

Busy with photography clients such as Naomi Campbell, Kim Kardashian and Martina Navratilova, Sebastian Smith occasionally needs to retouch shoots.

…and with clients like these Seb requires a keen eye for detail.

Working together on these images involves repairing blemishes, performing complex repairs and preparing hairstyles for large-format advertising.

The largest independent, sustainability research center in Italy

Deep in an area of outstanding natural beauty

With limited resources, such as no water, lead by engineer and entrepreneur Alessandro Ranco a small team has built on an ancient site. Adding power, irrigation, and a teaching block on top of where they live PeR has become the largest facility of it’s kind in Italy.

…the tools exist to design better communities.– Alessandro Ranco, PER

Project Legacy

An increase in English visitors

Since 2016 there has been a rise in interest in the project. Providing PeR with well written content, automated back-translation and delivering a maintainable website, SEO helps spread their message.

Visit

PeR’s Website “PeR’s Website in English”

The project in detail

Their message, transcreated

Originally visiting this off-grid eco-village with the intention of learning about self-sufficiency and permaculture, I was enthusiastically invited to join the team. The goal: share their message to an English speaking audience, build the best online experience and ultimately, improve sales.

Appeal to a broader audience

The discovery phase began by understanding the present communication plan in Italian. Consisting of courses for different age-groups and levels of education, we set about translating these into English and collating other material, including their Wordpress pages to meet their long-term requirements.

• Translating their message for audiences outside of Italy required a process called: transcreation… the process of creatively rewriting Italian content into English.
• Write and edit course summaries, on-site policies.
• Translate their present website and strap lines. This ultimately became a succinct webapp with supporting PDF documents.
• Curate photos from their archive and shoot new activities.
• Participate as a teacher, to understand student needs.

Building the best online web experience possible

The site summarises the impact of the project, broadens their audience and optimises the experience for mobile. With an emphasis on being understood by people with limited English, the text was repeatedly simplified, rewritten to be parsed online for back-translation.

Accessibility, for visitors and staff

• Produced uncomplicated, alternative language documents and functional webapp without extraneous code, painfully slow feed widgets or a clunky CMS.
• Meticulous proofreading to reduce complexity and broaden appeal using a “linting” tool: HemmingwayApp. This gives the original Italian authors a sense of security by assisting translation tools (like Google translate), thus making English easier to grasp. This confidence in a foreign language helps them interpret the new English site – then get stuck into the details.
• Help people quickly grasp the level of accessibility on-site for those with disabilities. This information shouldn’t be vague, so illustrating and annotating the accommodation and course information seemed a natural comprehension aid.
• Bootstrap v4-alpha helps screen-readers, this navigation aid skips footer content improving the likelihood of users being able to readily delve into the content.

In-depth visual acuity study

• Colour Blindness (Daltonism), affects ~10% of people. Testing with affected people, we developed this clear palette that all participants could decipher – even though they have different kinds of colourblindness.
• Designers can overlook visual acuity, incorrectly considering it a non-issue. Fortunately, there are excellent tools to support decision making on behalf of this part of the population.
• Supporting the palette with consistent layout rules, appropriate text size make the process of meeting contrast guidelines straightforward.
• Sound conclusions from Brian Suda’s research became the kernel of the PER palette, highlighting the importance of deliberately designing with colour.
• Further delving into tools like SimDaltonism, by Laurent Fortin might be shocking, but another good tool to assist any focus on accessibility.

Simple mental mapping

Usability is vital for visitors to succeed in their goals. Sites using elaborate navigation confuse people, they get lost in too many options, unclear language or poor interface decisions. Thoughtful consideration has been paid to the hierarchy of information and how this is visually interpreted in the design.

Better information architecture

The project is a teaching facility, where on-site subject leaders each have their own specialisation. Affecting understanding began by reviewing and streamlining all their content and ordered by topic, in thoughtful goal-driven tasks. Each topic has consistent colour, language and layout, these were then tested by new English visitors, experienced practitioners and non-native English speakers.

• To overcome complexity, many hours were spent rewriting content, providing back-translation for the original Italian authors so that they could improve user comprehension. This became the backbone of the language choice for the topics.
• Scale and hierarchy are embedded into well written HTML and CSS, both visually and semantically. Written to aid readability the interface and the content needed to have a high level of learnability helping people overcome unfamiliar terms and grasp new ideas.
• Colour, and tonal cues make separate sections congruent, and off-site content distinctive from the rest of the content. Users may become subconsciously aware of what’s on this site, and what is separate on a social network by seeing the background colour change – subtle, yet useful.

Information architecture should inform UI design

Better information architecture deserves good visual feedback. The interface prioritises clarity, where information is organised for discoverability, being both obvious and subtle.

• A universal menu system across platform… based on previous UI design, this webapp works predictably from one orientation to the next, improving the fidelity of the scrollbar, and it works consistently from one device to the next. This helps users finish their task when picking up from where they left off from smartphone, tablet or desktop.
• The explorable interface provides reassuring visual feedback, and animation on orientation helps users understand how navigation adapts to their device.
• Chunky-finger-sized hit areas make exploring the interactive banners, buttons and menu on the side of the screen predictable.
• Removed some of the default behaviour – such as distinctions in selection, dragging and the right-click pointer rules from some browsers means that clumsy interactions can be prevented, appearing tidier.
• Photographic hints help visitors find their way in the car, showing roads leading to the site.
• To assist routing, the embedded link passes the users current location to Google Maps displaying both where they are, and the final destination. A thoughtful user experience goes beyond simplification: completing user-goals on their journey.
• The interface is clean, without distraction. Behind the interface the content is written semantically, adding meaning to each item, such as: language specificity, addresses, description lists and figure captioned images.

Optimisation

To improve the site’s user experience several key steps were taken. Semantic HTML was written to help readability and SEO, eliminating render blocking JS. And, reducing the need for heavy files as well as optimising images.

Achieving PageSpeed rating: 99%

• This approach is designed without a CMS, multiple page loads, or visual confusion to mislead the user. Meticulous attention to detail means that the page loads quickly and users can learn everything in one place.
• Multiple, highly optimised graphics were nested in JS for resolution detection and tested empirically on different devices and connections.
• Extraneous data is stripped from SVG files offline using svgo-gui v0.0.9. For lazy-loading photos Flickity, from Metafizzy proved reliable without the dragging functionality or additional JS.
• Icons are applied sparingly with bandwidth friendly Unicode. Tests were performed with a broad cross-section of devices to ensure that all characters rendered similarly and predictably. Whilst Unicode isn’t perfect it improves performance by diminishing download size and gives the webapp a native-feel from device to device.
• The outcome of these optimisations combined is: Performance rated “A” via tools.pingdom.com and a PageSpeed rating: 99%.

3Si: 20 years of CRM development

Who are 3Si, and what they do?

Derived from their surname Chris Sinclair, Pete Sinclair, and their Father – a silent partner, 3Si sell their CRM application to handle volumes of membership and subscription data. Their flagship product is called OM.Net.

Client work

The OM.Net platform is for Nonprofit Organisations such as Mensa, The National Farmer’s Union and Trading Standards. I was also concerned with the web platform for The Pathological Society.

Project Legacy

A high performance static site was written for a fresh perspective on their design, whilst honouring branding already in use.

Scott fully understands the concepts of design… how things flow and the way the message is conveyed to the user. – Chris Sinclair Managing Director, 3Si

Communicating values

Developing a CRM platform can be complicated. 3Si needs technical design improvements, yet look inkeeping with 20 years of heritage.

By rewriting their Brochure for an audience of non-technical people, we explain the benefits, without jargon. The company didn’t have a definitive glossary, so this project improved communication for all involved.

After intensive research, marketing material was produced with laser-focus over 7 weeks.

Content without boundaries

The new document emphasises clarity. The visual language of OM.Net was designed to be cohesive across print and screen, whilst being optimised for mobile. This was all done with a nod to what was already in circulation.

Content flow

A simple landing page was produced so the document could be proofread in one go. This was written to hold and maintain attention, answer common questions and chime the right note – without duplication.

Clarity

With a colour‑blind theme, clear navigation and an emphasis on readability people can find the information they need. The goal is to helping them make the right purchase decision.

Template design

Each template was designed to reduce production time and unnecessary decision making. Both the prototype landing page and the print material contain the same refreshing content.

Carfax Cafe, Oxford

In 2012 entrepreneur, Fernando Kindermann opened Smiley Cafe. Friendly hospitality and Brazilian and Italian dishes are served from the shadowy site – although, that formula wasn’t enough. The venue struggled to attract passing trade and consistent regulars. To help the Carfax Tower stand-out, we used design to attract people and boost sales…

The Project in detail

Meet here for Breakfast, Lunch & Tea

The business needed a rebrand. Improvements meant presenting a professional image. We had hard conversations to convince the management to rename the business. Family and friends all have a stake, but Carfax Cafe didn’t become Fernando’s until weeks into the process – yet Fernando couldn’t forgot the hours of investment, and everyone agreed – authenticity works!

The name is sticky. The purpose of the site needs to be simple to grasp and recognisable.Carfax Cafe is centre-point for locals and a meeting point for visitors. Helping people act, we proposed an obvious call-to-action: Meet here for Breakfast, Lunch & Tea. This works becasue it reveals the friendly informal nature of the business and implys the business function.

Thorough design, diligent typography

The remaining 12th-century St Martin’s Church Tower, known as Carfax Tower deserves a visual language in recognition to the site history. In the middle of this epoch, seventeenth-century Bishop of Oxford and Dean of Christ Church: John Fell (1625 – 1686) (documented by Igino Marini), began an important historical undertaking in typography development. Today, inspired by his endeavour, revival faces mimic The Fell Types (by H&FJ), giving us a glimpse of the idiosyncratic, hand-fabricated glyphs.

The aim of this graphic design goes beyond utility – adding cultural relevance, important both in terms of typography, and historical Oxford.

Everyone’s favourite

The design, at first glance is simple – however, it’s a complex interplay of revivalism, paired with a modern classic: Cooper Black Swash.

Bringing a hearty, abundant tone to the letterforms, finished on tastefully coloured cream board: a traditional storytelling foundation. Now the site is established, fostering five-star reviews.

Point of interest

Researching historical facts about the Carfax Tower lead to seek the original plans from the Oxfordshire History Centre. This elevates the menu by divulging interest beyond fast-food.

A huge achievement, against all odds

The Children’s Centre for Civilisation & Creativity, Heliopolis, Egypt endured the usual construction challenges. In 2011, the timing of the Arab-spring and Egyptian revolution further complicated things for Mallinson’s Architects & Engineers’ team.

Mallinson’s winning the Museum + Heritage award in 2012 because of well organised design. Together, collaborators solved problems outside Egypt so the holistic design became a reality.

Beyond content creation

Project background

Appointed to create mixed digital media, including games, touch interfaces and animating a double-sided, 30 metre LED wall.

Inspiring the next generation

Throughout the project, I had the privilege of mentoring Junior artists. We produced multi-format visuals on deadline for the opening ceremony.

Conference opener

Bowers & Wilkins make the worlds most advanced hi-fi products. Partnering with Apple, Jaguar and Lucasfilm, I was brought onboard by Thomas Manss, to celebrate their “true sound” in-car audio products for the Vintage at Goodwood conference.

Legacy

Turning 2D illustrations into versatile storytelling elements, we created a memorable musical short overcoming many hurdles. This introduced delegates to the annual conference – to rapturous applause.

Project in detail

Thomas Manss creates something remarkable

The outline of the brief was to tell the evolutionary story of Bowers & Wilkins, under strict oversight of the talented art-director: Thomas Manss. Ceding creative control to overcome the inherent complexities of making animation, we brought the Bowers story to life.

Modelling and rendering realistic speaker components throughout their range was a pleasure – working with admirable, beautiful source material.

Philosophy

Reduce investment risk

Intended for entrepreneurs to control their costs, and guarantee content delivery to their customer’s devices.

Responsible design

Meeting business goals, controlling costs and avoiding gotchas does not mean generic, undesirable websites. Delighting the user is easier when the same constraints apply across organisations. Design templates lay the groundwork.

Advancing marketing campaigns, content and aesthetics on top of a sound foundation is better than spending on reinvention.

Characteristics

Looks like an app

Completing tasks on an app deserves good user interface design. The interface looks like it belongs on a customer’s device. Clear, readable text, decent hit areas and thoughtful calls-to-action meet business goals.

Feels like an app

This template works well with any content, including video – even when a device has no signal. To prevent ruining the reading experience the template automatically hides media when offline.

Visitors won’t get ugly “no internet connection” messages when they are on the Tube or Golf Course.

Responsive design, like the web

Designed to flow around different screen types, the layout adapts to client devices. The user interface is uncluttered with a clear call-to-action.

Streamlined

Designed to be flexible, the template can handle poor network connections. Without extraneous widgets content delivery is as fast as possible over cellular networks.

My small business? – There’s an app for that!

Customer admiration

The goal is to create a credible user experience across devices, reflecting customers demands.

Bespoke

Tailored for each client, assets work to compliment existing marketing material and extend the brand story. The design feels like a premium product for businesses that value their customers.

Business goals without compromise

The bottom line is – services must save time and deliver income.

Business owners looking for systems they don’t have to learn need to find a capable provider. CMS software increases project complexity and understanding the inner workings of these approaches can be costly. Therefor, a developer can be superior to the abilities bestowed upon a CMS through plugins.

Fixed price or Monthly Retainer

Business owners that choose a system they don’t need to learn require transparent pricing. They also stay in control of costs by making changes as their requirements grow.

Background

Optimisations have made the user experience better with each version.

By combining content and graphics into fewer server requests we improve time to first meaningful interaction. Modern browsers make things snappy whilst working everywhere. There is no need for libraries like jQuery, which used to be the only option for compatibility.

Performant

The design has undergone many iterations to achieve a GTMetrix UX score: 100%.

Secure, sophisticated software

Aris Technologies develop their own online gaming platform for a niche market. The company is organised to follow the sun, writing code during GMT, tested in China and constantly deployed to the US market.

Project Legacy

Templates designed remain in use for this “development A-Team”, providing a decent return on investment tp meets Aris’ business demands.

The project in detail

Template driven user interface design

As the lead user interface designer, realised the templates for a broad range of games – from roulette, to video slots within Flash and within a 3D environment using OpenGL. These templates were populated with unique content by the art department where the client and web teams supplied the underlying gaming logic.

Multi-OS, multi-resolution assets

The common UI took shape as a rugged arcade machine with realistic features. It’s design is highly modular. Each game title has consistent graphics and templating throughout the whole series – these assets remain in place 10 years later proving, skeuomorphic UI is still relevant in gaming.

Branding

Co-producing a range of branded game titles and wrote specification documents forming a sound business case for each project.

Investor related content

Produced presentations on spec. for managerial/ investor relations to steer business decisions.

An impressive heritage

About Advanced

Advanced Animations is a traditional technical drawing office offering services Rolls Royce and innovators such as: Siemens, Cummins and other household names.

Although, their heritage hasn’t made them immune to technological progress.

Legacy

Brought on board specifically to modernise business practices, we formed the foundation of a new business model – providing them a robust ROI years into the future.

About the project

Updating workflow and business model

Simply put areas of the business were reduced to templates. When in place, they expediate business decisions, accelerate work-flow and increase flexability. By enforcing constraints there can be improvements to profitability.

All-round technical artist

Focusing on CAD/CAM with skilled artists and modellers we produced 3D animation and environments dealing with complex manufacturing topics.

Generally CAM assets require texturing and illumination in a studio environment before being pre-visualised as animated scamps. After, they were distributed to custom network render-farm, stiched together and post-processed. Particularly enjoyable, were technical renders for Master Mover and Gattic, both enormously satisfying.

Other noteworthy projects include typography for Pulse Fitness.

Experimental Technologies

Early 64bit technology brought stability to very complex data-sets in 3D Studio Max. Solving these implementation issues proved to be an intrinsic part of working with CAM assets. A rewarding relationship with Autodesk blossomed using our artwork to advertise their acquisition of nPower, Power Booleans, described as a cut above the rest.

You might say we were at the cutting-edge of the engineering industry!

Thank you for your consideration, I hope this information finds you well.

My content development work focuses on performant code. Rarely relying on complex dependencies or configurations, I aim to work at the correct abstraction layer, keeping things accessible.

Responsive Web Design

• I have a strong preference for static site generation with HUGO.
• Deploy to GitHub, served from Netlify.
• Using Service Workers for offline capabilities.
• Custom, modular layouts based on Tachyons.io.
• Vanilla Javascript for interaction, accessibility, and performance enhancements.

Analytics

• Custom tracking analytics in Google UA.
• Self-hosted Matomo – for GDPR compliance.

Performance

• A simple, yet effective optimisation pipeline to improve the weight of downloadable assets.
• Development quality assurance using GTMetrix, and Google PageSpeed insights.
• Empirical testing across a range of browsers and devices.

Tools

• IDE: Visual Studio Code and TabNine with other enhancements.
• Familiarity with Atom, Espresso, Parallels VMs and iWork, as well as other tools such as Microsoft Windows, Word & Excel.
• Experience with Android, iOS and esoteric browser nuances.

Other web technologies

• Aware of NPM, jQuery and Wordpress – I prefer the JAMstack.
• Welcome exposure to other libraries and tooling as part of a culture of continuous learning.

Team Work, collaboration and back-translation

• Team player, able to work asynchronosly and adapt to distruibuted individual’s needs. For example: making informed decisions with peers over Skype, Codepen, Slack etc.
• Read and write in English, rely on Google Translate or DeepL, and speak Italian.
• Simplenote, LightPaper and Typora for tracking and markdown.
• hemingwayapp.com keeps things clear – especially for back-translation.

Graphics and Animation

• Wacom proficient in PhotoShop and familiar with other editors and compression utilites.
• Produce layouts and typography with a range of tools with a preference for the Adobe Suite.
• Animating 2D/3D with After Effects, Premiere and 3DSMax.

Downtime

• Range of tutorials covering scaleable AI, Python and OpenCV.
• Built several Hackintosh machines.
• Camino Santiago and Running.

Scott Phillips’ CV

Feel free to share, read and get in touch.