Various innovative front-end approaches were taken to the redesign of the eLife website. Paul Mollahan, Services Director at digital consultancy Digirati, explains these approaches and their benefits to eLife and its users:
As mentioned on eLife’s blog post, Welcome to eLife 2.0, the reading experience of its online articles is at the centre of the new design. eLife aims to transform how important scientific findings are communicated and shared. Content, quite appropriately in this instance, is truly king.
Many content-oriented websites expect their users to interact with busy interfaces with various, usually conflicting aims: “read our main article, but also click on this ad, check out everything on our busy sidebar and click on this other unrelated call to action on your way out”.
Focusing on the reading experience is a step forward in serving the needs of users, which is something we always focus on at Digirati. So, we were very pleased when eLife invited us to work with its product team to help produce the necessary front-end assets and set the technical foundations for this user-centred approach.
Getting a bit technical
We used the design system technique pioneered by Brad Frost called atomic design, which is an approach that builds up the user interface (UI) from the most basic building blocks or 'atoms', combines atoms into molecules, molecules into organisms, and those organisms into templates and pages.
The mustache templating library was the foundation of the patterns produced for the project. It is highly compatible with an atomic design approach as components can be made up of smaller sub-components. A great feature of mustache templates is that structured JSON data can be passed into them, providing a simple means to display and test patterns with real content.
In addition to the templates, there was an accompanying YAML file (a human-readable, structured configuration file) that acted as the ‘source of truth’ for the components, defining the possible configurations that can be passed to each component – a form of ‘contract’ between the front end and back end. This approach created a very empowering front-end workflow, ensuring that the data, structure, logic and markup were central considerations.
On the back end, PHP view models were created for each corresponding front-end component, ensuring that the back-end code was as composable as the front end.
Unit tests were written to test the view models against the YAML definitions, ensuring that the view models would always be compatible with the front-end patterns.
In addition to robust automated testing and code quality checks as part of the front and back-end build processes, additional cross-browser testing and quality assurance tests were carried out to ensure a great experience for the end user.
Better collaboration and communication within teams
The pattern library approach provided a successful way of working with the eLife team. It became a common language for stakeholders, designers and developers (both front end and back end) and allowed for better code ownership and team communication.
In addition, members of our front-end development team regularly travelled to Cambridge to work alongside eLife’s product team. The benefits of such close collaboration included improved development decision making, as well as more easily validating assumptions and testing and signing off the work.
To sum it up, the pattern library has helped eLife to organise all of its new UI essential elements into one central repository where teams can pull information that is crucial to their work. This more accessible design information results in less miscommunication and misinterpretation, and we envisage this to be the case for the eLife team as the site evolves in the future as well. Atomic design and pattern libraries have enabled eLife to achieve a user interface production method that allows for evolution, consistency, efficiency and a common vocabulary for the organisation’s internal teams and partners.
For more information about Digirati, please visit: https://digirati.com
eLife continues to gather feedback on the new site, and we’d love to hear from you. If you have any comments, please contact us.
