Company Background

MD Calibration


MD Calibration is a company in the logistics industry that run calibration tests on faulty equipment. They are responsible for the solicitation and approval of equipment for the purpose of verifying its fit for use. In this project my services were engaged to develop a blue print schematic of the project for the purpose of improving accuracy in the quotations and planning before the engagement of developers.

1. PROJECT OVERVIEW

The main issue of their business was an absence of functionality to digitize their procurement process and to increase their operation efficiency through the usage of some sort of logistics backend CRM and CMS. A big part of the project revolved around familiarising myself with the industry work flows of the business. The project was very heavy UX based and there was a lot of back and forth sessions with the product owner to better understand the objectives and requirements.

THE UIUX BRIEF

The brief of this project revolved around identifying weaknesses and vulnerabilities in the workflow process of the business and finding creative UX solutions to solve the mountain of dynamic data that was running through the platform.

The main UIUX of the project was focused on digitising the old office documents and designing tools that could aid in the creation of new ones.

DESIGN CHALLENGES

Digitising traditional invoices and form related documents

  • There was an overwhelming amount of documents to be converted via data entries into a new internal storage. A lot of planning needed to be done to allocate the relevant documents to relevant departments through the functionality of drop down accordions, search options in the form fields.

    • Worksheet blocks

  • There are almost infinite options when it comes to categories of calibration. To solve this I needed to create a lego block system that would serve as a means for the owner to create custom worksheets in the software that could be updated and referenced.

    • Overall better lifestyle features

  • How can the product owner track the day to day and receive visual cues that the business was running efficiently or be notified that there is a road block or ticket that needed a pending approval. I started brainstorming and referencing other solutions for some sort of overall time tracking system that would be the master monitor of all the tasks happening in the business.

    • Heavy Documentation

  • Because the software uses data entries and the information has to be dynamic. Creating reference trees of the flow of information was very challenging and required a mix usage of prototype references and site map documentation.

    • My role

    Lead UIUX Designer

    Project timeline

    3-5 months ( Excluding Development time )

    2. My Design Process

    Step 1. OVERFLOW

    Collecting requirements

    Had many discussions with the product owner to create the foundation information architecture of the project.

    Step 2. OVERFLOW

    Creating User journeys

    After understanding the business flow I began creating personas of the different levels of access and their respective user journeys.

    Step 3. FLINTO

    Prototyping core functionality

    Drawing wireframes was not enough to communicate the ideas I had with the product owner. I started employing low fidelity prototypes to simulate solutions for the complex UX problems

    Step 4. SKETCH

    Look and feel

    Although not as important as UX we started laying out look and feel of the UI elements base of a new branding guideline I created from different ideas of the web.

    Step 5. PROTOPIE

    High Fidelity Prototyping

    I felt that a high fidelity prototype was required in this project to navigate the overwhelming flow of information so that developers could have a means of better understanding the overall picture of information to facilitate their planning of software architecture.

    Step 6. ZEPLIN

    Documentation

    Because of the scale of the project. I created design systems for all the components that were constantly reused in the project. I included all the source zeplin links and labelled them according to the sitemaps for easy reference.

    3. UNDERSTANDING THE PROBLEM


    Drip feed access

  • Depending on the Users levels of access different menus will be locked or hidden based of their rights and privileges

    • Main Activities
  • There was going to be heavy usage of the database pulling and exporting documents of calibration reports and client information. Navigation needs to reflect this requirement and designed around accessibility to these important pages in the flow

    • Lab Technicians custom worksheets
  • Instead of categorising metric units and tasks I decided to approach custom worksheets in the perspective of a tool. Building block templates for invoices and table and menu creation for worksheets

  • Items can be saved as a draft or modified and saved as a new instance


    • Persona type:
    Admin ( Business Owner)

    Persona type:
    Lab Technician

    Persona type:
    Customer

    User Journey Admin ( Business Owner)

    A breakdown of the different actions and navigation for the Business Owner.

    User Journey Lab Technician

    A breakdown of the different actions and navigation for the Lab Technician.

    User Journey Different Roles

    Different Roles using the software

    4. INFORMATION ARCHITECTURE

    I layout the information architecture by categories. The purpose is to provide developers with a base model map to consider the software architecture of API points and where to fetch and pull data. It is by no means a means to and end. A lot of this ended up getting changed during development but providing developers with this information early helps prevent future pitfalls and greatly speeds up the development time.

    5. INITIAL IDEAS

    Time Tracking Main Page

    Time tracker is the screen which captures all the daily progress tasks. It is my concept of having a birds eye view of the company. You can dive into the process flow by selecting any of the cards in the timeline. The colour bar represents if a task is completed, stuck or rejected.

    Sub tab system for main categories

    To contain the overwhelming amount of information users can navigate to sub related fields via the tab cards. Also testing the use of date breadcrumbs.

    E-Signature send off

    Important documents need to be verified and approved by manager level officers. This is a demo prototype to reference the functionality to developers.

    Modal Alerts

    Visual feedback for action tasks to user.

    (click thumbnails to see more)

    6. Production wireframes

    Below are the final production wireframes for the project. (In some projects I cannot showcase all of them due to confidentiality issue).

    7. Design Systems

    8. Final Thoughts

    Overall the project was very challenging, it took a lot of extra hands to complete. It forced me to step outside my comfort zone in terms of learning a completely different industries terminology and process. It was very UX heavy which I enjoyed. The project taught me the value of communication and critical thinking as I challenged myself to find unique ways to battle problems with UX solutions that otherwise would have cost the business owner a lot more money if they employed a technical solution. Through constant development a lot of the times we were able to discover that some features that they initially thought they wanted would end up being overkill for the development and budget.

    Key takeaways

    Allocating time for UIUX research and prototyping at the beginning can appear to most business owners as a luxury however this project has shown me that a lot of start-ups fail to see the immense impact it has on efficiency and communication of the end product. If more companies and startups choose to start every project allocating a respectable time for prototyping and research they will be able to save a lot of costs and development time.