DHL

Web App & Digital Signage
By baileyminmin 6 years ago

DHL

Client: DHL

Type: Web Application & Digital Signage

Responsibilities:

  • 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

CHALLENGE

DHL needed a time management system for their staff within the DHL Facility at Bahrain Airport, to provide visual representation of all incoming and outgoing consignments with scheduling functionality. The scheduling processes were previously managed with spreadsheets and paper signage was used to relay information. Flight schedule information needed to be coupled with DHL’s internal timing systems, neatly conveyed via branded and visually engaging content shown on large-format digital signage screens at each loading bay.

SOLUTION

DHL time management solution is a responsive mobile application, that communicated directly with big screen displays. The solution is an internal web application to allow for flights to be added onto the system, initially the system was deployed for Bahrain Airport.  There were 12 strategically placed 55″ LED digital signage screens around the loading bays in the airport.  Each flight added to the system was assigned to a zone and queued in order, there is a logical traffic light timing based system, displayed to help employees be more efficient.  Reports and analytical data can also be extracted from the system for analysis and review.

OUTLINING FULL BUSINESS REQUIREMENTS

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 scaleable 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).

System – Information Architecture

WEB APP PROTOTYPE

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.

Initial Wireframes – with action descriptions

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.


WEB APP HI-FI SCREENS

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.

Web App Hi-Fi Screens

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.


DIGITAL SIGNAGE WIREFRAMES

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.

Digital Signage Layout

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.


HI-FI DIGITAL SIGNAGE TV DISPLAY

The end size of the TV was a 55″ which was as big as we could fit into the different loading zones.  There where 12 loading zones in total so each screen was strategically positioned to allow for optimum viewing either overhead or against nearby zone walls.


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.


FINAL SCREEN DESIGN

LESSONS LEARNED

SCREEN SIZES

Working with different screen sizes proved difficult as we wanted to the web application to be usable as a desktop web application and also on a tablet.  Multiple testing was done to make sure the most important relevant information was shown to the user.

INTERACTION TESTING

For the web application to work on both a desktop and tablet web toolkits had to be used for both touch and mouse inputs and allowing for the different animations and states of buttons etc.

MORE USER TESTING

There was a very tight deadline so there wasn’t much user testing before the final deployment of the system.  More testing and user feedback would have made for a better user experience.