Improve sustainability and scalability
Dive into the benefits of SVG illustrations and CSS/JS animations, and leverage the power of streamlined workflows and it sustainably.
Reading time about 3 min.
Project start: March 2023
Timeline: 2 * 6 Months
Contractor: Sthree, Valteche
Client: Luzerner Kantonalbank (LUKB) is the leading bank in Canton Lucerne. As a classic, full-service bank, LUKB offers all the services you expect from a modern bank for discerning clients.
Services: UX, UI, Illustration, Figma Design-System
Platform: Web-based kiosk application
The job to be done
How might we, optimize animation assets and guarantee a smooth user experience?
The illustrations supplied by an external agency were often too large, resulting in longer page loading times and uneven animations. One of my tasks was to make some adjustments, export and reduce the file size of the illustrations, and hand them out to the development.
The work was cumbersome and error-prone and mostly needed some iterations. So, I took the chance to optimize my workflow and suggested optimization to my superiors.
The Result
Images with fewer kilo-bytes do not mean less Quality.
Before
After
I reduced file sizes and simplified implementation by developing guidelines and best practices for SVG illustrations and CSS/JavaScript animations. This made changes and new features easier to add. Users benefited from faster loading times and smoother animations, creating a more natural experience.
Before
After
Reducing file size by up to 96% Reducing error loops to almost zero Reducing cost per iteration by 70% + Ensuring flexibility and scalability Some overall sustainable benefits:
- Travel around 230 km in an electric car or consume 2400 coffees without guilt.
- Save approximately 4500 CHF on illustration changes over three months.
- Increase team happiness through mutual learning.
My Role
Freelance UX/UI Consultant and Designer
As a UX/UI Designer, I contributed to developing an internal kiosk application for customer relationship management and consulting. I collaborated closely with the UX team, subject-matter experts, requirements engineers, and other internal and external stakeholders, including developers. Additionally, I developed a cross-application design system in Figma, which included a library for the consulting tool. I also led workshops to implement this system in the future design process and development.
Tools: Figma, Sketch, Illustrator, Rhino 3D, Miro
In short, the design process
Research to improve workflows
Effective UX often begins with well-defined solutions. It's crucial to create sustainable workflows that involve stakeholders and providers, like the collaboration between design agencies, internal UI Designers, and Developers. Unfortunately, optimizing this collaboration to achieve the best possible outcome is seldom prioritized.
- Grasp the main requirements and limitations.
- Identify the correct problems
- Analyze the provided Illustration Files
- Research of Technologies and Tools
- Ideate Solutions and Test Prototypes
- Optimize Workflows, considering repetitive Work and changes
- Provide guidance and specifications
Insights into the Optimization
How I tackle the challenge.
It may sound a bit eco-friendly, but it's important to me to do my best to reduce carbon emissions. It doesn't matter if I'm fighting for a few bytes. I'm excited and proud of my work when it also results in a better user experience.
What the project taught me
When implementing visual storytelling and animations, thinking about an efficient and streamlined workflow is critical.
Any Change, especially working above interdiziplinäry borders, is a challenge we must accept because it makes things more effective, maintainable, scaleable, and environmentally friendly.
What I learned
- When changing common workflows, you have to be humble and patient.
- You can solve many problems without increasing the effort with the proper techniques.
- As designers, we must ensure that our data is useable and practical to implement.
What I would do differently
- I would involve all stakeholders in the end-to-end workflow as early as possible, assuming it's within my responsibility.
- I would take more time to explore the business benefits, convincing key decision-makers that sustainability and improved workflow management are profitable. Additionally, I'd emphasize how these changes create a better user experience.
Thank you for reading
Related projects
Dive deeper into my work
Inspire and challenge the audience
Collaborate
… SOON
© 2025 Matze Lenz. All rights reserved. Imprint