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.
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.
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.
Graphic Designer & Marketer — Cyberport2, Hong Kong. Google Campus, London
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
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.
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.
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.
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.
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.
Children’s Centre for Civilisation & Creativity by Mallinson's Architects & Engineers
Designer, Animator & Mentor — Atacama Ltd, Oxford
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.
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.
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.
Launches like an app
The template can load from the homescreen of phones and tablets. On desktops, it works like a normal page with a 1st class user experience, even offline when there is no signal.
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%.
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.
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.
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.
