Legacy Application Modernisation
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, my team closely collaborated with an internal Fujitsu team to develop a high-fidelity demonstrator of the improved logistic system.
Note: Certain elements of the design have been censored due to the nature of the project.
Project Role
UI Designer
Duration
3 months
Tools
Figma
Miro
Problem Statement
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.
🕵️The Research
Workshops
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.
*Due to the nature of the project further information can not be provided.
💡 Define
Low-Fidelity Wireframes
Over a total period of 3 months, I regularly collaborated 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.
A features and requirements list was created as an output from these workshops and acted as the foundation for the wireframing.
Keeping it Simple
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.
Final Low-Fidelity Design
For this, the key metrics were adapted into a similar design, just with slight improvements that overall really changed the look.
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.
Interactive Prototype
Note: Due to the nature of the project, there will be no demonstration of the interactive prototype.
This project required the design to be used for a demonstration for a piece of pre-sales work. Showcasing the tools functionality and improvements in terms of the process optimisation and user centric design. My role was in helping design the high-fidelity screens and doing sanity checks ensuring that it met best design practice.
