01 Portfolio.

1.

The New Humanitarian provide quality, independent journalism that reflects on the stories of the millions of people affected by humanitarian strife around the world. Since 2015 Bliss have worked with them to develop their platform, delivering essential news from the heart of crises.

In 2015 IRIN News, now The New Humanitarian, approached Bliss to build their new content delivery platform. I led a creative effort that spanned nearly 4 months. This commenced with a thorough overhaul of the information architecture of their pre-existing 80,000+ reports.

I studied user patterns, thematic similarities, and the distribution of articles across categories, in order to greatly simplify content hierarchy and taxonomic relationships. Wireframing and high fidelity design phases followed, working closely with a highly engaged and responsive client team.

In 2019, IRIN became The New Humanitarian. With a brand overhaul came a rapid website redesign project. Although designed by a third-party agency, I was part of the development team that built the new theme. Following the launch, I’ve overseen a programme of insight-led experience and usability improvements.

IRIN News boasted a loyal readership but were poised to grow. Their existing website was slow, difficult to manage, and wasn’t optimised for smaller screens. In 2015, 35% of their readership visited on mobile devices. In 2019, that percentage is closer to 60%. Coupled with the knowledge that many visitors were in areas of poor connectivity (eg. rural Africa), performance and readability became our top priorities.

We had to account for various user journeys, informed by surveys and personas. Readers may casually browse, or work within a particular region, like North West Africa, or theme, such as Migration or the Environment.

Content administration was also a huge consideration. Many journalists contribute to the website, and media include galleries, video, interactive infographics, and more, alongside long-form content. How do you design a dynamic system that allows for creative control, whilst maintaining usability and consistency across thousands of articles?

Most of the original design process focused on wireframing. The goal was to establish clear content hierarchy, taking cues from print journalism, eye tracking and heat mapping studies, and following established usability heuristics.

I also worked to design layouts that would lend themselves to comfortably responding to different devices, and make the most of imagery and media without relying too heavily on them. This involved designing fallbacks for all eventualities: reports without imagery, or a high ratio of imagery to copy. I also had to consider multiple languages. For example, would blockquote or introduction blocks work as effectively when translated into French or an RTL language like Arabic?

In some cases we built wireframes with real content first, before leading with style tiles to establish the correct look and feel which led into the HiFi design phase.

Despite the amount of research and planning that went into the IRIN News redesign, we knew it wouldn’t be perfect. Yet it was a leap forward that gave us a foundation to continue testing and adapting to new insights. In late 2019 I led a UX audit of thenewhumanitarian.org and implemented a slew of changes built on this foundation of insight.

Working with The New Humanitarian is challenging, but extremely rewarding. Budgets impose the necessity of focusing on low cost, high gain improvements, and the stakes can be high. Compared to much of my other commercial experience, the goal is not to drive conversions and increase revenue: The New Humanitarian’s reporting from conflict and disaster zones informs prevention and response. It saves lives.

“The website BLISS delivered is faster, simpler, easier to search, and looks great on mobiles and tablets. It allows us to deliver more dynamic and visual content, on a range of platforms, as we continue to develop our storytelling.” Ben Parker, Editor-in-Chief, The New Humanitarian, 2016

2.

Argyll Holidays are a holiday park group based in amazing locations in Scotland. For over 8 years, I’ve worked with them in my capacity as creative director at Bliss to manage and iteratively improve their reservations and sales websites and realise a sustained increase in online revenue.

Argyll Holidays are based in a stunning location, and have a lot to offer holidaymakers, but the tourism market is one that demands digital innovation, not only from competitors, but from users increasingly expecting more from their holiday booking experience.

The success of the services I’ve helped provide over the years has relied on never standing still, never taking what we know for granted. I’ve led the design and build of several new websites and microsites, and provided regular improvement and optimisation services that draw on our shared extensive knowledge of the holiday park sector.

In parallel, Argyll Holidays have acquired new parks, developed state-of-the-art new facilities, and welcomed more and more happy holidaymakers to their beautiful locations.

There are many challenges involved in promoting holiday parks and selling holidays. For example, how do we speak to younger families as well as older couples? How do we signpost to the fun outdoor activities alongside luxury accommodation? Ultimately, how we do we accommodate so many different possible user journeys?

There are also technical challenges that require considerate UX design. Working with third-party reservations software presents limitations that require innovative design solutions to provide the best possible user experience, and encourage more people to make bookings.

Over the years I’ve run user surveys, a/b tested new layouts and features, monitored and absorbed trends from industry leaders, and built on sector knowledge from other holiday park clients I’ve worked with to deliver continually fresh and effective design solutions.

Ongoing, I oversee a conversion rate optimisation programme that manages a backlog of testable design improvements and new features. In this way, I take a product-centric view of the reservations and holiday home sales websites. However, sometimes there’s a call to start afresh.

In 2018 I led a project to completely redesign argyllholidays.com. I undertook a UX audit that included hands-on user tests, surveys, usage data analysis, and a creative workshop with the client team in Scotland. I compiled my findings into a comprehensive report, which informed the following LoFi and HiFi design sprints.

My approach to design sprints is highly agile and inclusive. Using prototyping software like Invision, designs are shared and discussed instantly, and daily calls held with the client to maintain focus and dissolve with any blockers. I design patterns, not pages, ensuring that even complex systems can be reduced to a consistent, modular form that not only aids user experience, but supports a more fluid development process.

Working with Argyll Holidays, as well as the other holiday parks who’ve collectively allowed me to develop a thorough understanding of online holiday park tourism, has been a continual learning process.

Over the years I’ve developed a strong working relationship with the client, which engenders trust and enables me to take risks, within reason. However, not every new product feature has succeeded, and on several occasions I’ve had to roll back implementations I was quite attached to. In effect, I’ve had to ‘kill my darlings’. But understanding what doesn’t work is as essential as accurately predicting what does.

Working consistently for so long on the same products has helped me develop as a designer and developer in ways that working on one-off projects simply cannot provide.

A quick glance at a variety of other examples of my UI work over the years...

Snapshots.

02 Experience.

I design digital solutions that are impactful and effective, whilst prioritising the client’s desires, and the user’s demands. Form and function in harmony; creativity and innovation built on a foundation of empirical insight.

Whether working with global brands such as Umbro or Jaguar Land Rover, passionate non-profits like The New Humanitarian or the Institute on Statelessness & Inclusion, or ambitious start-ups like Place Changers, my goal is always the same: to deliver great work.

I enjoy drawing boxes in design software, coding up interactive animations, or helping bring together other specialists to achieve even greater things. But most importantly, I want to bring digital products into the world that in some way improve people’s lives.

For example, I worked with Umbro to design a mobile and Facebook app that allowed football fans from around the world to submit a video of their best goals. The winners were hand-picked by Roberto Carlos, and amongst other prizes bagged a paid trip to Brazil to meet and train with the World Cup-winning legend.

Working with The New Humanitarian (formerly IRIN News), I led an extensive UX project that dismantled and rebuilt their bloated website architecture, and laid the foundations for a new flexible and lightweight content-focused design framework. After launch, we’ve continued to work together on improvements to performance and experience, delivering essential news on humanitarian crises to millions of readers around the world.

However, the sector I’ve worked with the most over the past decade is tourism, notably holiday parks. Working ongoing with clients like Argyll Holidays, Vale Holiday Parks, and Holiday Resort Unity, I’ve developed a deep and rich understanding of the online holiday booking experience.

The logos above represent clients I worked with in the capacity of either creative lead, designer, front-end developer, or a combination. I have only presented organisations in whose projects I would consider I had a significant involvement.

Expertise.

  • UI Design.

    UI Design.

    I designed my first websites in Macromedia Fireworks. It was wonderfully simple software, a sort of ‘Illustrator Lite’. I soon made the transition to Photoshop, in an era when websites were skeuomorphic and laden with graphics, until the demand to create interfaces that adapted to an infinite number of screen sizes and input methods forced UI designers to consolidate, simplify. The responsive web was born.

    Performance, scalability, and interoperability became the top priorities, and rightfully so. My interface design approach is rooted in usability. My development knowledge informs design decisions that are technically feasible, whilst exploring opportunities to innovate and bend our limitations. Sketch, Invision, and most importantly a pencil and notepad, form the core of my toolkit.

  • UX Design.

    UX Design.

    Although user experience and interface design are commonly bundled together, UX is something I take seriously as an independent discipline. Every design journey involves the gathering of insights through qualitative and quantitative research methods—user surveys and tests, competitor analysis, heuristic studies, user behaviour data analysis, etc. This research informs the definition of personas, user journeys and task flows, and information architecture.

    I usually start with sketches in my notepad that evolve into LoFi mockups. This process allows for the rapid exploration of content and functional layout, without the distraction of colour, typography, and other visual features. I prototype in Invision and occasionally in code. Then the real fun begins.

  • Creative Direction.

    Creative Direction.

    As creative director at Bliss, my input is regularly valued in both the scoping of creative work, and the conceptualisation of ideas and creative approach in response to briefs. I work with our business development team to write copy and supply supporting visuals for proposals, and present our approach to clients.

    I support the production team by ensuring the design process runs to brief and schedule, intervening to settle creative decisions where necessary, and aiding handover to developers. I help clients compile the content and assets required, ensure their needs are managed, and ultimately ensure that the quality of all our work maintains a high creative standard.

  • Creative Workshops.

    Creative Workshops.

    I love digging into the why before getting stuck into the what or the how. Behind almost every brief I’ve ever encountered are assumptions that could benefit from a little interrogation.

    I customise and host creative workshops with the aim of digging deeper into project requirements and longer term organisational processes and strategy. Workshops can also help to tease out internal contradictions, conflicts, and opportunities that client’s weren’t, on the surface at least, aware of.

    The results of such workshops are compiled into a report that typically supports not only the project in question, but acts as a roadmap for future aims and development. I have provided these services for clients including The New Humanitarian, Argyll Holidays, Humanitarian Leadership Academy, Place Changers, Sandoz, and more.

  • Front-end & Drupal Development.

    Front-end & Drupal Development.

    I love understanding how to build the interfaces I design. I believe coding knowledge is not only useful for digital designers, but a requisite extension of the UX design process—keeping up-to-date with the latest innovations in web development affords me new creative possibilities. Understanding technical challenges and limitations allows me to make smarter, more prudent design decisions.

    I believe in clean, accessible, and performative code, and have built, or helped build, everything from small Hugo sites (such as this one) to large Drupal systems like The New Humanitarian and Argyll Holidays. I’ve worked with Drupal since version 5 and, despite some shortcomings, I believe it’s one of the most powerful and adaptable content management systems out there. I’m confident working with php and twig-based templating and preprocessing, and I could manage CMS-side features in my sleep.

  • Optimisation & Improvement.

    Optimisation & Improvement.

    I manage the CRO programme at Bliss. Working in regular, close collaboration with clients, and our marketing and production team, I maintain a rolling list of proposed improvements that are prioritised, prototyped where necessary, and gradually implemented. We then closely monitor and evaluate their impact, run A/B and multivariate tests, and put out occasional follow-up stakeholder surveys to gauge impact.

    Besides the gradual improvement in goal values, these processes help me develop a richer knowledge about what users respond to, and how my first assumptions as a designer aren’t always correct.

Working together with Nathan felt very comfortable. He is professional, trustworthy, and easy to work with. We are very happy with the look of our websites. They are easy to edit and work very well on different devices.”
Jan Erik Otten
Managing Director,
Transmark Renewables

03 Biography.

I am a digital designer, a front-end developer, and the creative director of Bliss. I live in Amsterdam, though originally from Manchester (no, I do not miss the rain). I’ve worked in the digital field for more than 12 years, which is over half the time the Internet has been a ‘thing’ in most people’s lives.

I believe in a design approach that values empathy and pragmatism, without sacrificing the desire to challenge convention and possibility. Like many others, I designed my first website in Macromedia Fireworks (RIP), and built it in Dreamweaver. I learned HTML from a book!

With the increasing complexity of web apps, it’s increasingly rare to find digital designers that are truly comfortable both pushing pixels and committing code. But back in those heady days, the chimeric designer-developer was more the rule than the exception.

I was drawn to the digital world not only because it was vividly evident that this was the future, but because it offered the ability to combine both aesthetics and constructions—it challenges both sides of the brain. There are few other disciplines that allow you not only to design complex solutions, but build and deploy them into the world.

But it’s not all VS Code and coffee. In my spare time I’m an avid reader. I enjoy travel, museums, and live music. I play piano, write poetry and short fiction. And of course I never say no to a glass of craft beer.

04 Contact.

Asking an artist to talk about his work is like asking a plant to discuss horticulture.”
Jean Cocteau
Artist

Colophon.

Craft.

Of course, UX and interface design is not art. I have made some attempt on this website to discuss my craft. There are decisions made during in the process of composing both the visual minutiae and the overarching, complex system of patterns that constitute websites that cannot always be explained. They are intuitive, based on experience, taste, or a sudden and elusive jolt of inspiration.

Nonetheless, it is the job of the designer to be able to convey, even after the fact, the logical and objective steps that led to every decision. And to be able to do this in a coherent and convincing way, to weave the often irrational or inexplicable into a viable narrative, is one of the true challenges of design.

Typography.

This website uses Maven Pro for labels and section headings, and EB Garamond for introductory and running body copy. Both typefaces are sourced from Google Fonts. I chose Google because their system is simple, lightweight, and free.

Maven Pro is a modern font, designed particularly for the web by Joe Prince from Los Angeles. EB Garamond is a product of an open source project by Georg Duffner to 'create a revival of Claude Garamont’s famous humanist typeface from the mid-16th century'. It brings the feel of one of my (and many others') favourite typefaces to the screen. Though bereft of ligatures, it works quite effectively for both display and running text.

Design & Build.

The design of this website—that is the palette, textures, grid, juxtaposition of fonts, etc.—was inspired by an exhibition on Austrian photo book art held at the Albertina Museum in Vienna. Bringing motifs found in vintage print to a responsive digital environment was a fun challenge.

The website is built using Hugo, a static website generator. Everything is hand-coded in HTML, Sass, and jQuery. I’ve implemented schema to aid with SEO and the indexing of portfolio content, and to the best of my ability this site conforms to WCAG and WAI accessibility guidelines.