• Lead Designer
• User Research
• Prototype Tester
• Information Architecture
• Wireframes
• User Interface Design
• Animations/Interactions

Time was spent researching and looking at similar Visitor Management System SaaS products – several companies at the time of starting this project in 2016 where providing some expensive safeguarding solutions, some where targeting different platforms such as UWP specific builds while we wanted to create an accessible, scalable web based product.  Initial research finding found that kiosks where expensive and took up lots of space which put smaller businesses off.  It was decided to focus on a tablet based solution which could be easily scaled to a kiosk screen if required.

From the different VMS products we analysed there was a gap in the market to provide Photo ID badges to the system to be printed out for visitors and guests – initial research finding found that most business where keen for this feature that wasn’t available on the market.

Sketching the users journey above helped me quickly understand the core functionality of the app, which was then easy to relay back to the development team to review and iterate accordingly.  A fully interactive clickable prototype was created for user testing, and feedback gathered. The feedback was used to inform iterative design changes for the following versions and the user testing process carried out at critical times until the prototype accurately represented the flow of the end product.

Basic features and functions are wireframed to get a feel for how the desktop management system would function, and link to the client facing application.

At this point the Visitor Management System was going to contain two main applications:

• Client facing touchscreen Tablet (iOS & Android OS) Web application (Responsive design for kiosks also considered)
• Desktop Management Console Web application. (Responsive design for different screen resolutions)

The Hi-Fi versions of the Tablet / Kiosk was created using the style guide and grid as shown. For a sense of familiarity Google Material Design foundations and principles were used, this was also used for the Desktop application, to create a cohesive design across the different platforms.

• Lead Designer
• Information Architecture
• Establish interaction through workflows and usability testing
• Wireframes
• User Interface Design
• System setup and execution
• Adhering to branding and style guidelines

Before the design phase could begin it was important to fully understand the business requirements, this was achieved by direct communication with the client on a regular basis at the beginning.  Understanding the internal users of the system and what the users would do to achieve their goals, was key to the success of the project.

The wider picture was to role the system out externally to other Airports in the future so the system had to cater for this and be scalable to be functional in other Airports within the internal DHL network.  Initially I conceptualized and prototyped the initial users requirement and made a hierarchy of what key events needed to the completed and in a quick, functional logical manner. This allowed me to focus on the users flow of the web app dashboard, and I then concentrated on what key information needed to be displayed on large digital signage passive screens for the delivery packer (User).

In order to understand complex processes involved, I mapped out workflows on paper and then digitally reproduced them in order to circulate amongst the development team. With consistent input and feedback from the development team, a few iterations were required and reworked. From the beginning it was vital to involve all of the team to prevent wasted time and money further down the line of the project.

The wireframes below show the web application building block for the basis of the MVP – these where created to help the everyone understand the main interface components within the application.  Various iterations of the wireframes where created in order to give the best User Experience for the end user.

Low-fidelity wireframes helped me work rapidly and allowed a quicker flow of ideas thereby allowed me to gain a broader view of the way the app worked earlier on, ensuring a more cohesive design.

Various screen designs were created which was beneficial in showing the stakeholders the collective design process. Using a 12 column grid with consistent columns and spacing helped keep everything aligned correctly and made the responsive elements easier to work with. Its was too time consuming to design and detail each screen within the app, so a set of style guides (‘style tiles’) was developed for the developers to follow and thereby speeding up the whole production process.  I was always on standby to answer any questions or fix any issues that came up.

The screens above from left to right show adding flight times manually into the system and then showing the full zone detail in a collapsible table.  The interface was kept clean simple and minimal to make for users of different levels to quickly access important information, which was then communicated to the front-line staff.

The DHL digital signage app was built as a web application but was connected to large screens using NTBs (Net Top Boxes). The NTBs allowed us to use out of the box widgets like timers etc that didn’t need developing.  So the main focus of the screen was to be informative to the packers (front line) workers that needed to manage loading packages for different flights.

Option 2 was chosen to develop further from the initial wireframes layout – There was talks about displaying training videos to employees as well so there was a widget left in the bottom right corner to allow for company news, videos etc to be displayed.