Modernisation of a legacy application to demonstrate tool functionality
Due to an enterprise program, a legacy application was on the risk of becoming obsolete, in order to ensure that the application would meet modern standards of design and functionality, I closely collaborated with an internal Fujitsu team to develop a high-fidelity demonstrator of the improved logistic system.
Role
UX/UI Designer
Tools
Figma, Miro
Duration
12 weeks
The Problem
Research
Over the span of two days, SME’s AND other key stakeholders facilitated a workshop to determine the main scope of the project. This included the user stories and demonstrator narrative. This set the foundation for the UI screens which would be developed for the demo.
Without direct access to users, I leveraged regular collaboration and iterative feedback loops with SME’s to ensure the technical viability and success of the tool. Using their expertise to prioritise features which were to be showcased in the demo. The main goal was to create four different high-fidelity prototype which showcased four separate use cases and application.
Design
Low Fidelity Wireframes
Final Low Fidelity Wireframe
Ensure that the modern redesign of a legacy system is able to enhance usability and streamline workflows to ultimately improve user satisfaction and operational efficiency without losing it’s functionality.
My focal point for this project, was to help create low fidelity wireframes that could be leveraged for prototyping
My main focus was on create low-fidelity wireframes for the key metrics that would be displayed at the top of the logistics page. It was one of my first times wireframing so I used Miro, an application I was familiar with.
I sort of went wild, and just focused on what sort of information would the user want to see, based on feedback from SME’s and how best this could best be visualised so that users could see information just at a glance. Whilst none of these wireframes made the final design, they did inspire the final design.
A learning point from this wireframing was the importance in keeping designs simple. In an interface as complicated as a logistics screen, information can be lost easily since they have to visually compete with each other for space and user attention.
This was the final low-fidelity design that was used and adapted into a high-fidelity prototype in Figma. I helped deliver this and this went through multiple iterations and feedback loops. There was a huge emphasis on spacing and getting the design to a higher standard than normal so we could quickly translate this into Figma.
I learnt the importance of attention to detail and how much of a difference it can make to a design, whether it be low or high fidelity. It definitely helped with my understanding of the difference between a good design and a great design.