Scott has been a design professional since the 90’s starting out designing websites and user interfaces (UI). Designing through Inspired Labs, this is a showcase of how he has helped business and entrepreneurs fulfil their mission.
Biography
Education
An eager, creative student of Electronic Media (Film as a Fine Art & Animation), at Wolverhampton University, 1998–2002. Encouraged to prototype installation art, improve his analytical interest in futurology and build immersive holographics, Scott was educated at a crucial period during the analogue-to-digital transition. He has been able to envision multiple design successes and reinvent himself – which satisfies the need for a challenge.
Ahead of the curve
Learning proprietary tools in the web's early years he realised that standards would eventually force change. Tangible examples include clay prototypes from 1998 – an eerie echo to the future of smartphones, including specifications.
In 2004 Scott rendered artwork using an early 64bit version of 3D Studio, to be described by Autodesk's as "a cut above the rest". In 2005, he worked on a digital currency platform called netCash – an ominous precursor to cryptocurrancies on distributed ledgers.
In 2007 Scott worked on multiple platform, responsive web design before it formally had a name and in 2009, designed single-page-apps using Wordpress. He has gone on to work on award winning, innovative projects and write boutique apps.
The future
Keen to broaden his experience, Scott thrives in a knowledge-sharing environment with organisations on a mission.
Skills
Design & code
Present emphasis on Javascript
HTML5, CSS3, SVG and other core web technologies
High performance mobile webapp design
Responsive design (web design, OpenGL desktop clients and Flash)
Empirical testing and debugging browser issues
Organising information, for print and applications
UX (user experience) all-rounder
UI (user interface) design
Specification writing
Technical writing
SVN version control
Management and business skills
Investor relationship building
Stakeholder assistant
Project management
Team leadership
Mentoring
Researching
High levels of autonomy
Copywriting for UX & content
Fitting into different kinds of team (Scrum & Agile)
Artistic skills
Mockups, scamps and storyboarding
Layout and composition
Graphic design
Art direction
3D/2D animation
Modelling, texturing and lighting
Cartoonist and character designer
Photo editing, repair and air-brushing
Script writing, voice acting and directing
Creative Suite, 3D Studio, CorelDraw and Office
Fontbase, FontExplorer, Glyphs and other typography tools
Exposure to numerous business and creative apps on Windows, OSX and online
Logging, time-tracking and project burn-down
Broadly experienced in digital content
Inspired by elegant, utilitarian design and realising high-end bespoke projects. Solving business problems on behalf of the end-user and helping teams develop, research and deliver.
…ambitious and aspiring to be known for cross discipline flair– Scott Phillips' personal statement
Originally written for modern browsers in HTML5, CSS3 with BXSlider in jQuery. This project gained notable status with the StackOverflow community, signalling it's clear people want to use a paginated, single-page design. In the future expect the same user-experience without Javascript for improved compatibility, efficacy and simplicity.
Compatibility overview
Over the development process, it has been empirically tested on: Chrome, Firefox, Opera, Safari and Internet Explorer 9 and works on iOS, Android, Windows and Blackberry devices.
Created for end-users to theme within Wordpress – it was clear that PHP puts extraneous demands on resources. Before learning this, a variation (thanks to Richard Gray), is still online demonstrating the SEO potential for ArtCafe, Oxford.
Content management
Recent experiments with HUGO can empower people, leaving the solid underpinnings of the design separate from their content – without a heavy CMS such as Wordpress.
Rewrites
Although jQuery has been a solid foundation for most projects, rewriting the template makes things lean. By combining everything into as few HTTP requests as possible and written in modern JS, each webapp is even more performant.
Future
Proudly, this design is now very popular. Compromising between features or simplicity, the pattern could lead to a CSS only version.
Find and connect relevant industry insiders | Documentation & Research | UX improvements
Why is Vaultarch important?
Magic The Gathering playing cards can be valuable – some are £30,000 each, making them attractive to counterfeit, theft and fraud. Motivated through having early edition cards stolen, it’s important Vaultarch succeed.
Hired to promote the business through marketing, networking and design improvements, I connected them with customers who are risk averse and promoted them from the very beginning.
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.
Connect with the best
Opening the network up overseas with card traders, we shared insight into asset grading, verification and provence 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.
Preventing counterfeit, theft & fraud
Community building and nurturing investment
Described solution 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.
Design improvements
Rebrand emphasising contrast and stronger typography and tighter IA to improve perception, readability and accessibility.
Condensed mission statement into memorable banner headlines*WIP.
Platform specific design details.
Logo redesign.
Marketing
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.
…high potential companies can often take a long time to bear fruit and carry a high degree of risk. But the other side of the equation is that the price of the initial investment will be attractive, and the size of the eventual payback could be significant.– Tom Bradley Oxford Capital
Il Parco dell Energia Rinnovabile (PER)
Umbria, Italy, 2016
Information architecture & frontend project in detail
Visual acuity study in colourblindness | Organising information | optimising Bootstrap CSS & JS | Multilingual writing for back-translation
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. Our goal: share their message to an English speaking audience, build the best online experience and ultimately, improve sales.
…the tools exist to design better communities.– Alessandro Ranco Entrepreneur, PER
Appeal to a broader audience
Translating the communication plan
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
Accessibility, simple mental mapping and optimisation
This English webapp summarises the impact of the project, broadens their audience and optimises the experience for mobile, offline-first. 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 staff and visitors
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.
The user interface
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
Improving Bootstrap for the best user experience
Semantically figure captioned images help readability, but to improve Bootstrap’s user experience meant mitigating layout thrashing, eliminating render blocking and streamlining the JS, as well as optimising the assets.
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.
What is information architecture?
…it’s an attitude, not a process, and a responsibility.– Richard Saul Wurman on unfamiliarity and understanding
3Si
Stoke-on-trent, 2015
About the marketing & frontend project in detail
UX designer | Web and print templating for other designers | Writing marketing material
Hired as a digital all-rounder
Developing CRM solutions for not‑for‑profit companies, 3Si needed someone technical make design improvements, but not just to follow incumbent decisions to rewrite their marketing material to be read by non-technical audiences.
The OM.Net marketing material has an emphasis on clarity. Bootstrap was used to bring cohesiveness from print across desktop and mobile. Creating this simple, single‑page site, attention has been paid to readability, colour‑blind accessibility and clear navigation to help people get to the information they need.
Template design
After intensive research the marketing material was written over a 7 week period, both the homepage prototype and the print based marketing material contain this original content. These are each designed as templates, reducing production time, error rate and need for decision making.
Simple is harder than complex: you have to work hard to get your thinking clean to make it simple. But it's worth it, because once you get there… you can move mountains.
– Steve Jobs Apple
Communicating values
Eager startups need more than a good product to launch – they also need to communicate their values appropriately. Marzò require an illustrative logo, multi-format typography, different print informatics, packaging and a way to go beyond social media.
With all design elements in place, they're set to launch online in 2018.
Tandem Festival is a not-for-profit based in Oxford. Supporting with graphic design skills creating the logo design, typography & art directing the source photography to produce the resulting photo-montages for print and social media. We also printed on low fidelity recycled material using water based inks that had their own design considerations and printed exclusive T-shirts on-site during the festival.
In 2012 entrepreneur, Fernando Kindermann opened "Smiley Cafe" in the centre of Oxford offering friendly hospitality and a Brazilian/Italian dishes. The formula wasn't enough. The venue struggled to attract passing trade and consistent regulars. To help the shadowy, Carfax Tower business stand-out, we need to boost sales using design…
Smiley Cafe needed a rebrand. Branding improvements and a professional image began with conversations convincing the core management to change the name of the cafe. Family and friends all have a stake in the business, but Carfax Cafe didn't become Fernando’s until weeks into the process… yet Fernando couldn't forgot these hours of investment and everyone agreed – it really works!
Now the name was sticky, the site needed to be simple to understand for visitors with limited English and recognisable. Carfax Cafe acts as a useful prompt for locals too. This helps people recall the famous location and a call-to-action was designed into the strap-line Meet here for Breakfast, Lunch & Tea – this cue reveals a hint at the opening hours and the friendly informal nature of the business. Even if only glancing by.
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 flavour to the letterforms and finished on tastefully coloured cream board a foundation for storytelling about the site is established and is fostering an appetite.
Point of interest
Researching historical facts about the Carfax Tower lead to seek the original plans from the Oxfordshire History Centre, here information was divulged of interest to patrons.
Busy with photography clients such as Naomi Campbell, Kim Kardashian and Martina Navratilova, Sebastian Smith occasionally needs complex shoots retouching.
Clients like these require a keen eye for detail. Working together involves repairing blemishes, performing complex retouching on spec, such as: preparing hairstyles for large-format advertising.
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.
TIM
is Italy's primary telephony company. Their executive out-reach program, with the help of Harvard Business School aims to improve their customer experience and create more value.
During this consultancy they shape strategy. My input was to communicate key take-aways using animation.
Brought on board specifically to modernise business practices together, we formed the foundation of the company's present business model – providing them with a robust ROI, 15 years later.
3D animation | Template Design | Art direction | Typography | Illumination, texturing & rendering | Photo-editing & composition | Web design
Updating workflow
Focusing on animation, texturing and illumination of CAM assets and working with skilled artists, modellers and management to produce 3D animation and environments. Noteworthy projects and diverse technical challenges such as typography for Pulse Fitness were particularly enjoyable, and technical renders for Master Mover and Gattic enormously satisfying.
Experimental Technologies
Early 64bit technology brought stability to very complex data-sets to 3D Studio Max. Solving these implementation issues proved to be an intrinsic reward and this relationship with Autodesk blossomed using our artwork to advertise their acquisition of nPower, Power Booleans, described as a cut above the rest.
Children’s Centre for Civilisation & Creativity. Heliopolis, Egypt
3D Animation | Game design | Character artwork
Appointed by Mallinson's architects we created a mixture of content for the opening of the Children’s Centre for Civilisation & Creativity. They requested character designs, touchscreen games and help with the implementation of a centrepiece animation in the form of a 30 metre LED wall.
Legacy
With our humble effort, we like to think that we contributed in small part to Mallinson's accepting the Museum + Heritage award in 2012. This should be regarded a particular success, considering the timing of the Egyptian revolution commonly, associated with the dawn of the Arab-spring.
Bowers & Wilkins make the worlds most advanced hi-fi products. Partnering with Apple, Jaguar and Lucasfilm, we were 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 props, we created a memorable musical short overcoming many hurdles. This introduced delegates to the annual conference – to rapturous applause.
The outline of the brief was to tell the evolutionary story of Bowers & Wilkins, under strict oversight of the talented art-director. Ceding creative control to overcome the inherent complexities of making animation, together we brought their story to life.
Production Artwork
Modelling and rendering realistic speaker components throughout their range was a pleasure. Bowers & Wilkins is an admirable company, working for them, feels like I have really arrived.
You've probably come here with a wish-list for improving your hustle – great!
There's a lot of ways that design can give you a competitive edge. Ideally, you want to become a scale-up and design can help you achieve this kind of sustainably, so if you're ready to begin working together call me or Email me and let's get things underway…
Going forward
Let's negotiate
There is always wiggle-room when you need a fixed price and bite-size milestones help control your budget.
Important dates
Specific times of the year might be better than setting arbitrary dates. Thinking like this can help your return on your investment. It gives us solid targets and we can all plan our time wisely.
Attribution and equity
Sounds great – but we will need a realistic budget too. No exceptions, especially if you plan on making a tonne of money or you are definitely going to go on to become a Unicorn.
Can we skip the contract thing?
Sure. Choosing payment upfront can prevent uncertainty, but fixed cost means fixed scope. Unforeseen problems should not become sticking points – we're better than that. Sharing the design process usually starts with a plain English contract.
Design is a business tool. There is no need to "make it up as we go along", the double diamond design process, helps get to grips with how involved creative services really are. Working in diverse fields and having an interest in template design, gleaning first-hand insight into these phases – it's enlightening yet no surprise to read about this overarching structure.
Why is this so important?
Professional designers in all fields have a consensus of universally recognised commonalities in the phases their process goes through. Following the Design Council's research these ordered phases are: Discover, Define, Develop, and Deliver.
Get prepared
Achieving goals requires planning. The beginning part of working with each other is called the discovery-phase, we'll need to research the best way to achieve overall success. This insight may not mean going with the first idea, the aim is to profit your enterprise. Design ensures this will happen.
Get involved
Once we know what the design need to achieve, this will be written up to define the whole project. This acts a really good map, keeping things feasible and helps plan the route. With freelance projects, payment milestones are usually agreed here too.
Bringing it together
When we know exactly what we need to do, this will develop into your design. It will guide any trial-and-error (called: iterations), this should include feedback sessions and will keep each other in the know. This is usually understood to be the main part of the project.
It's all yours
When things are complete, there will be a launch process before it gets to the end-users. This ensures the brief has been met and we deliver as agreed. This might involve your team receiving content or assets, your web developer gaining access to any source code, or the team being subject to a rigorous QA process. For freelance projects this will be the final invoice.
A Stoic is someone who transforms fear into prudence, pain into transformation, mistakes into initiation, and desire into undertaking.– Nassim Nicholas Taleb on working together