Recent Work: Website for A Human Atlas
One of our favourite web projects for 2020 has been the design and development of a new interactive home for the internationally acclaimed Human Atlas projects by world-renowned artist, Marcus Lyon.
Lyon is a British artist whose works are held in prestigious institutions worldwide, including the Smithsonian Air & Space Museum, the Museum of Fine Arts Houston, and the Arts Council Collection of Great Britain. He marries together science and sound with traditional art forms, through the themes of globalisation, identity and dance. As a portrait artist, he has photographed a diverse range of public figures from Queen Elizabeth II, to Bill Nighy and the last four British Prime Ministers.
A Human Atlas
The Human Atlas projects are research-based, interdisciplinary explorations of people within a specified geography. Each project is built on an extensive nomination process. A carefully curated group is assembled to nominate individuals who are championing and driving social impact in all its forms: from public servants to entrepreneurs, from non-profit leaders and activists to artists and scientists. The projects then map these remarkable individuals through photographic portraits, app-based oral histories, info-graphic mapping and ancestral DNA. Human Atlas projects take on many digital forms but always begin as a published limited edition book and an interactive exhibition.
Somos Brasil
Completed in 2015, Somos Brasil tells the story of 104 extraordinary individuals who are creating social change across this remarkable country. This social impact art project, limited edition book and exhibition search for a deeper understanding of Brazilian identity through photographic portraits enhanced with personal sound testimonies and ancestral DNA mapping.
We:deutschland
2018’s We:deutschland explores identity across Germany at the outset of the 21st century. The book and exhibition bring together 50 remarkable individual’s visual, spoken and genetic identity to cast light on the personal, social and cultural diversity of the nation. The body of work amplifies the remarkable stories of those featured and offers insight into a country where 20% of its population have a significant migration story.
i.Detroit
i.Detroit (2020) is an exploration of 100 extraordinary change-makers from the City of Detroit. The three-year project was built from a six-month nomination process, where a diverse group of Detroiters nominated people from their own communities who represent the very best of service to society – individuals from every corner of the city who are making significant contributions to Detroit, the region and beyond.
The website
Working on the Human Atlas project was a dream come true for the Tenacity Works team. Not only did we get to work again with the inspirational Marcus Lyon, but we also had the opportunity to collaborate with Jim Sutherland and the marvellous folks at Studio Sutherl&.
IA, UX and UI Design
We worked closely with Marcus and his team to figure out an elegant structural commonality between the various Human Atlas projects. The user experience needed to be simple and approachable, allowing for easy access from project level to the portraits, DNA and quotes of each individual participant.
We followed our usual process starting with high-fidelity wireframes, which were tested extensively and shared across the project team for multiple rounds of review. This stage was followed by interface design and the creation of a Human Atlas design system to standardise components across the site within Figma. As always, we workshopped and tested the UIs extensively before they were signed off for the development phase.
Development
The development phase on a project of this size usually takes between four to six weeks. Working with the approved interface designs in Figma, our development team sets about creating the front-end markup for the site. Once this is complete we begin integrating the front-end markup into a custom WordPress theme based on our Tenacity Framework. Our framework is the core building blocks on which all our bespoke sites are built and is based on our nearly fifteen years of experience working with the WordPress platform. Once development is complete, we run extensive QA testing and feedback loops via Asana before handing over to the client.
Images
Loading speed was a crucial consideration given the hundreds of images being served across the Human Atlas projects. After much experimentation with a range of dynamic image compression tools, we settled on JPEGmini Pro allowing us to bring down the file sizes dramatically without sacrificing quality or luminosity of the images. The end result meant the whole site loads fast, improving user experience and SEO.
DNA
The genetic identity aspects of the three Human Atlas projects are represented visually in very different ways. We worked with Studio Sutherl@ to find a uniform way of representing the data for each participant in a clear and web-friendly manner.
Audio
Marcus and the team recorded interviews of each of the participants in the Somos Brasil and i.Detroit projects which meant we had to integrate a lightweight, accessible audio player into each individual participant page.
Mobile
We anticipated most users would be accessing the site via mobile, so we spent a lot of time testing the experience across a wide range of devices and data speed scenarios. Keeping our media sizes down and serving the site as lightly as possible were key drivers in our mobile experience decision making.
Conclusion
Keeping a site with such an incredible depth of content simple and easy to navigate is the key measure of success for us on a project like this. The site has been hugely well-received and continued to perform perfectly during the surge in traffic over the launch of i.Detroit in mid-October.
The site framework is fully extensible which means we are standing to work on the next project, De.Coded, whenever Marcus and the team are ready!
Check out the project at AHumanAtlas.com
Do you need assistance with your website? Get in touch!