Designer & Content Writer  — Umbria, Italy
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
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.
The project in detail
Their message, transcreated
Originally visiting this off-grid eco-village with the intention of learning about self-sufficiency and permaculture, I was enthusiastically invited to join the team. The goal: share their message to an English speaking audience, build the best online experience and ultimately, improve sales.
Appeal to a broader audience
The discovery phase began by understanding the present communication plan in Italian. Consisting of courses for different age-groups and levels of education, we set about translating these into English and collating other material, including their Wordpress pages to meet their long-term requirements.
- Translating their message for audiences outside of Italy required a process called: transcreation… the process of creatively rewriting Italian content into English.
- Write and edit course summaries, on-site policies.
- Translate their present website and strap lines. This ultimately became a succinct webapp with supporting PDF documents.
- Curate photos from their archive and shoot new activities.
- Participate as a teacher, to understand student needs.
Building the best online web experience possible
The site summarises the impact of the project, broadens their audience and optimises the experience for mobile. With an emphasis on being understood by people with limited English, the text was repeatedly simplified, rewritten to be parsed online for back-translation.
Accessibility, for visitors and staff
- Produced uncomplicated, alternative language documents and functional webapp without extraneous code, painfully slow feed widgets or a clunky CMS.
- Meticulous proofreading to reduce complexity and broaden appeal using a “linting” tool: HemmingwayApp. This gives the original Italian authors a sense of security by assisting translation tools (like Google translate), thus making English easier to grasp. This confidence in a foreign language helps them interpret the new English site – then get stuck into the details.
- Help people quickly grasp the level of accessibility on-site for those with disabilities. This information shouldn’t be vague, so illustrating and annotating the accommodation and course information seemed a natural comprehension aid.
- Bootstrap v4-alpha helps screen-readers, this navigation aid skips footer content improving the likelihood of users being able to readily delve into the content.
In-depth visual acuity study
- Colour Blindness (Daltonism), affects ~10% of people. Testing with affected people, we developed this clear palette that all participants could decipher – even though they have different kinds of colourblindness.
- Designers can overlook visual acuity, incorrectly considering it a non-issue. Fortunately, there are excellent tools to support decision making on behalf of this part of the population.
- Supporting the palette with consistent layout rules, appropriate text size make the process of meeting contrast guidelines straightforward.
- Sound conclusions from Brian Suda’s research became the kernel of the PER palette, highlighting the importance of deliberately designing with colour.
- Further delving into tools like SimDaltonism, by Laurent Fortin might be shocking, but another good tool to assist any focus on accessibility.
Simple mental mapping
Usability is vital for visitors to succeed in their goals. Sites using elaborate navigation confuse people, they get lost in too many options, unclear language or poor interface decisions. Thoughtful consideration has been paid to the hierarchy of information and how this is visually interpreted in the design.
Better information architecture
The project is a teaching facility, where on-site subject leaders each have their own specialisation. Affecting understanding began by reviewing and streamlining all their content and ordered by topic, in thoughtful goal-driven tasks. Each topic has consistent colour, language and layout, these were then tested by new English visitors, experienced practitioners and non-native English speakers.
- To overcome complexity, many hours were spent rewriting content, providing back-translation for the original Italian authors so that they could improve user comprehension. This became the backbone of the language choice for the topics.
- Scale and hierarchy are embedded into well written HTML and CSS, both visually and semantically. Written to aid readability the interface and the content needed to have a high level of learnability helping people overcome unfamiliar terms and grasp new ideas.
- Colour, and tonal cues make separate sections congruent, and off-site content distinctive from the rest of the content. Users may become subconsciously aware of what’s on this site, and what is separate on a social network by seeing the background colour change – subtle, yet useful.
Information architecture should inform UI design
Better information architecture deserves good visual feedback. The interface prioritises clarity, where information is organised for discoverability, being both obvious and subtle.
- A universal menu system across platform… based on previous UI design, this webapp works predictably from one orientation to the next, improving the fidelity of the scrollbar, and it works consistently from one device to the next. This helps users finish their task when picking up from where they left off from smartphone, tablet or desktop.
- The explorable interface provides reassuring visual feedback, and animation on orientation helps users understand how navigation adapts to their device.
- Chunky-finger-sized hit areas make exploring the interactive banners, buttons and menu on the side of the screen predictable.
- Removed some of the default behaviour – such as distinctions in selection, dragging and the right-click pointer rules from some browsers means that clumsy interactions can be prevented, appearing tidier.
- Photographic hints help visitors find their way in the car, showing roads leading to the site.
- To assist routing, the embedded link passes the users current location to Google Maps displaying both where they are, and the final destination. A thoughtful user experience goes beyond simplification: completing user-goals on their journey.
- The interface is clean, without distraction. Behind the interface the content is written semantically, adding meaning to each item, such as: language specificity, addresses, description lists and figure captioned images.
To improve the site’s user experience several key steps were taken. Semantic HTML was written to help readability and SEO, eliminating render blocking JS. And, reducing the need for heavy files as well as optimising images.
Achieving PageSpeed rating: 99%
- This approach is designed without a CMS, multiple page loads, or visual confusion to mislead the user. Meticulous attention to detail means that the page loads quickly and users can learn everything in one place.
- Multiple, highly optimised graphics were nested in JS for resolution detection and tested empirically on different devices and connections.
- Extraneous data is stripped from SVG files offline using svgo-gui v0.0.9. For lazy-loading photos Flickity, from Metafizzy proved reliable without the dragging functionality or additional JS.
- Icons are applied sparingly with bandwidth friendly Unicode. Tests were performed with a broad cross-section of devices to ensure that all characters rendered similarly and predictably. Whilst Unicode isn’t perfect it improves performance by diminishing download size and gives the webapp a native-feel from device to device.
- The outcome of these optimisations combined is: Performance rated “A” via tools.pingdom.com and a PageSpeed rating: 99%.