Datacom – Unilode, work order repair process design
About This Project
UX/UI design undertaken for a MVP product with Unilode, a company associated with international air freight. The product is for the management of their work order repair process. Based on a old legacy system, this new product was being updated using new technologies, along with an improved user experience and modern interface.
The set up was a Agile environment working in Sprints.
The brief included introducing process improvements and efficiencies, resulting in more streamlined and efficient user experience. Working alongside the client stakeholders, myself and a Business Analyst took part in a series of discovery workshops. From these I mapped out:
- User journeys and requirements
- User flows
- Information architecture
- Persona requirements
- Rough wireframes
The workshops included rapid prototyping sessions to understand more fully the product requirements. I then created low fi wireframes in Sketch based on our findings, which were presented internally and then onto the client stakeholders.
Once iterations were done, I then went onto create hifi wireframes and UI design components for sign off. Once complete, these designs are uploaded to Zeplin for the developers to use for front end application.
UX/UI processes explained:
Flow Charting
Flow charts were created as part of the Discovery workshop process. The journey was looked at on the old system. From there a new journey was mapped out based on personas and new work flow requirements. The flow charting helped to visualise and simplify the process pathways, helping with the initial planning process.
Scenarios and user requirements
I studied and workshopped user case scenarios, to give us a better understanding of user requirements, functionality and user journeys.
Persona needs and requirements
There had been 10 different personas created, due to the complex workflows and specific user requirements. Personas were studied and user needs mapped out so that their specific processes could be worked into the work flow.
Information Architecture
Structuring and loose sketching of page and system requirements. The purpose, functionality, content and information hierarchy were discussed during rapid prototyping sessions. From these, page design was loosely created, setting the blueprint for the hi-fi wireframe designs. As usual during this whole process I was constantly iterating and refining designs to arrive at the finished solution.
An example of the existing legacy system
UX/UI Design and Hi-Fi Wireframe Prototypes
The wireframes were built in Sketch using established components and design patterns, I then would customise the screen to fit the particular functionality required. If new components were designed, these would then be saved to the master component library. Colour ways, typography, component architecture and behaviours were also established. Finished pixel perfect files were then uploaded to Zeplin and handed over to the developers to start building.
