• David Lomas, M3 Publishing

    Deansgate, Manchester, 2017


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

    It's very simple. You read the protocol, and write the code.Bill Joy SUN
  • Vaultarch

    Hong Kong/Google Campus London, 2016


    The project in detail

    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.
    • 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.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

    …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.
    • The outcome of these optimisations combined is: Performance rated “A” via tools.pingdom.com and a PageSpeed rating: 99%.

    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

    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.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

    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
  • InstantWebapp

    Global


    Content delivery design in detail

    UI/UX Designer | Project Manager | Template Designer | Content writer | Empirical Tester

    Adaptable content template

    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.

    Performance reports

    PabloWoodward.com, home of Kasabian star has a GTMetrix UX score: 100%.

    Multi-Tool, Tom Clutterbuck's comedy show has a GTMetrix UX score: 98%.

    isV.gd, written for David Lomas' M3 Publishing has a GTMetrix UX score: 96%.

    MG3DPro.com, Matt Greenaway's app has a GTMetrix UX score: 90%.

    Greek Foods, George Miliotis' app has a GTMetrix UX score: 88%.

    Implementations

    Originally created for end-users to edit within Wordpress – it was clear that PHP puts extraneous demands on resources. Before learning this, an Alpha variation (thanks to Richard Gray), is still online demonstrating the SEO potential for ArtCafe, Oxford.

    Future

    Although jQuery was a solid framework to begin the project, rewriting the template with modern JS and combining everything into as few HTTP requests as possible makes each webapp even more performant. Recent experiments with HUGO empower clients, leaving the solid underpinnings of the design separate from their content.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

  • Tandem Festival is a not-for-profit based in Oxford. I supported with my 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.

    Explore

    Logo

    Early bird ticket
    The original flyer
    Date banner
    A3 poster preview for FB timeline
    Branded screen-printed social media promotion
    3 T-shirts left
    2015 announcement
    2015 Banner, which was also animated
    Friday Lineup, small
    “Closer” music line-up
    Friday Lineup, large
    November 2014 flyer
    November 2014 line up
    Main timeline


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

  • Smiley Cafe, Carfax

    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 however, and the venue struggled to attract passing trade and consistent regulars. To help the shadowy, Carfax Tower business stand-out I was invited to boost sales using design…

    Explore

    Logo Menu exterior Menu interior

    Fernando’s Carfax Cafe, Oxford

    Meet here for Breakfast, Lunch & Tea

    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 steak in the business and 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.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

  • Aris Technologies

    Oxfordshire, 2009


    User interface design in detail

    Lead UI Designer | UX Designer | Template Designer | Typographer | Brand Designer | 2D/3D Animator

    Complex template design

    As the lead user interface designer, I had to realise the templates for all the games – from roulette, to video slots within Flash and partially within a 3D environment using OpenGL. These templates were populated with unique content by the art department and the server, client and web teams supplied the underlying gaming and financial logic.

    Multi-OS, multi-resolution assets

    The common UI took shape as a rugged arcade machine with realistic features, which is designed to be highly modular – enabling each game design to use similar, consistent graphics throughout the whole series of games.

    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.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

    It’s very easy to be different, but very difficult to be better.Jony Ive
  • Telecom Italia Mobile, Rome, Italy

    Animated Typography | UX design | Change Management

    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.

    Watch

    Delivering a wow-experience!


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

  • Advanced Animations, Cheshire

    An impressive heritage

    Advanced Animations is a traditional technical drawing office in Cheshire. Clients include: Rolls Royce, Siemens, Cummins and other household names.

    Legacy

    Brought on board specifically to modernise business practices together, we formed the foundation of the company's present business model.

    Examples

    Napier Still Napier Animation Joloda - 9214c Typeface design


    All-round technical artist

    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, I worked 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.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

  • 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.

    Explore

    The Award Interior LED wall Exterior LED wall


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

  • Bowers & Wilkins

    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.

    Explore

    Animation Animation still Conference screen Illustrated wall Project inspiration


    Animator and Illustrator in detail

    2D/3D Animator | 3D Modeller | Artworker

    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. Ceding creative control to overcome the inherent complexities of making animation, together we brought their story to life.

    Production Artwork

    Bowers & Wilkins is such admirable company, working for them, I felt like I'd really arrived. Modelling and rendering realistic speaker components throughout their range was a pleasure.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

  • Beyond design thinking

    If you are looking for someone resourceful to help your team please call or email Scott Phillips to discuss your requirements.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

    Good design is good businessThomas J. Watson Jr. IBM President from 1952
  • Turn your startup into a scaleup

    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.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

  • Mid/Senior design generalist

    Skills

    • Core skills in digital content creation
    • Exposure to Javascript, CSS, SVG and other languages and technologies
    • High performance mobile webapp design
    • Empirical testing in browsers
    • User Experience all-rounder
    • User Interface Design
    • Specification Writing
    • Organising Information
    • Technical Writing
    • Investor /Steak-holder Communicator
    • Graphic Communication
    • Adobe Creative Cloud
    • 3D Studio Max, CorelDraw and countless content creation apps
    • Video, Sound and Story Editing
    • Logo Design and Branding
    • Character Design and Animation
    • Script Writing, Voice Acting and Directing
    • Project Leadership

    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 with development, research and delivery.

    …ambitious and aspiring to be known for cross discipline flairScott Phillips' personal statement

    Purposeful work

    The most important decision we make daily is how we spend our time. Creatively curious, intrinsically motivated by a challenging environment, I am interested in collaborating with people on a mission. If you need a range of skills and a resourceful designer get in touch.

    Volunteering

    Wherever they're found, I capture and annotate user experience focused bugs to platforms such as Protonmail, Firefox and Monzo, to mention a few. To those on a mission, I've donated time fundraising, teaching and technical expertise.

    Artistic & technical background

    Moving into the 21st Century was the time to study the analogue to digital transition. In 2001, I graduated from Wolverhampton University. Enthused by Paul Harrison and Guy Sherwin supervising Film as Fine Art, I discovered intense-tinkering as a meaningful vocation. A period which has informed a broad career and instigated some interesting implementations and unbelievable relationships.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

    Writing a description for this thing for general audiences is bloody hard.
    There’s nothing to relate it to.Satoshi Nakamoto on novelty
  • The double diamond approach

    Structure to a messy business

    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, I have gleaned first-hand insight to these phases – it 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.


    Scott Phillips Digital Artist, UX Designer

    Call Skype Twitter Mail Monzo

    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