Liontrust Digital Storytelling
Overview
Challenge
The client wanted to be able to display their reports, press releases and campaign landing pages in an engaging way for their causal users.
Goal
The goal was to try and make what some would consider dense information from paper or .pdf reports come to life in a digital space.
Solution
As a solution I produced a components library that can be reused and reordered into engaging pages, making reports and articles look like bespoke one-off pieces.
My contribution
UI Design
High Fidelity Prototyping
Design System
Year
2022
Use Cases
After developing our component library, the primary focus was to ensure its adaptability to various use cases. To achieve this, I created an array of designs, including an annual report, a quarterly report, a landing page, and a fund page.
The aim was to establish a scalable approach in collaboration with the development team. Starting with the simpler landing page and gradually expanding the scope by incorporating all the components in subsequent projects.
Nav ideation
For this project, we aimed to create an engaging and unique navigation that emerged users in the story.
To achieve this, I began by brainstorming and sketching different ideas on paper. I then moved on to refining my ideas in Figma, experimenting with different styles and aesthetics.
To ensure that my vision was accurately translated into the final product, I created prototypes for the developers to reference.
Component Library
The approach for this project was to develop a comprehensive set of components for the annual report, one of the most intricate documents. This component set was then applied to simpler documents such as articles and quarterly reports.
I really enjoyed getting into the detail of the design system. I also dedicated time to thinking about the best ways to visualise data, as this was hugely important to the client.
Interaction Design
When working on this project, I leveraged my expertise in ProtoPie to breathe life into the static designs. This allowed me to showcase to the client the potential that could be achieved with a focus on creative development.
To ensure ease of implementation, I standardised some of the animations, moving each component down by 50 pixels whilst fading in.
Next Steps
Moving forward, we have planned to expand the digital storytelling component library in a gradual manner. This will enable the team to build the toolkit in sync with the client's requirements, without investing time and effort into unnecessary development work.