I designed a tablet-optimized application that provided information to workers in the field. My design was based on the learners’ characteristics, needs and work environment and allowed for engaging interactions through touch gestures.

Read the full story on the desktop version of this website or send me an email to

Learn how mobile-friendly content helped a company reduce the number of accidents in the field

The context

In 2014, a company asked me to design a job aid to assist novice workers in the field and avoid potential injuries. They wanted to deliver safety instructions through their corporate-issued iPads. At that time, a few companies were starting to develop mobile learning solutions and my client was not expecting anything very different from their eLearning courses. The main goal of the company was to deliver information through their tablets and they didn’t care too much about the design, technical specifications or formats as long as they could achieve that.

Through a series of simple steps, I could have optimized the original PDF document for display on mobile devices and I could have solved the problem. But, instead, I set up myself to design a unique mobile learning solution.

My role

Mobile learning design and developmentInstructional design

Important note: To comply with my non-disclosure agreement, I have omitted confidential information in this case study.

The Challenges

Focusing on the mobile user

The first challenge was to leave behind my old habits as an eLearning designer. Before this project, I used to design with a clear understanding of the conditions and the environment where users accessed learning content. The standard environment for the digital leaner was a computer at his desk.

But when designing for mobile, I focus my solutions on the user, his needs and the context of performance (these are the key elements of mobile learning as explained in Villar, 2013) rather than on the standard environment. Mobile users seek to accomplish a specific task through their mobile devices, and they are immersed in a variety of contexts while doing so.

So, I started by observing how the target audience behaved in the context of performance. By observing and collecting data about the workers in the field, I was able to identify their main characteristics and their problems in that context. I started to visualize possible ways to display the information and to create interactions between the content and the users. My key questions at this point were:

  • Where will the learners be accessing the content?
  • Do they need to know any specific information in order to perform a certain task in that context? Can I use something from the context to enhance learning? What contextual conditions can affect learning?

The end-users of my mobile solution would be working in the field, outside the office and far away from a comfortable desk to access information from a computer or to read text-heavy manuals. They would be using the tools and needed to access safety considerations in a quick and easy way.

After carefully reviewing the safety instructions manual and some videos, I could identify that most safety considerations were related to specific parts of each tool. So, I would draw workers’ attention to those specific instructions by using different layers of information.

Also, Internet connectivity was very limited. And, as workers were surrounded by environmental and heavy-equipment noise, audio should be avoided. Therefore, the final solution would only display on-screen text and images.

Overcoming misconceptions

The second challenge was to help the company overcome the misconceptions around mobile learning. Many companies are too attached to old systems and solutions so I had to provide guidance on why Flash should be avoided, why eLearning authoring tools were not suitable for this project and how to track success of the solution outside a Learning Management System.

For many years, Adobe Flash was the most reliable and the most used delivery method for most web-based experiences and also, for eLearning content. But, Apple´s devices did not support Flash. So, I had to design a solution that could be displayed on iPads and in any other device, if needed.

After undertaking an in-depth research, I chose Adobe Edge Animate to design an iPad-optimized application as this tool had some key functionalities to facilitate content design, development and delivery across different browsers, platforms and devices.

And, to track the success, I developed a system with HR personnel to keep records of the injuries and accidents after the implementation of the application.

Deciding on what is relevant

To design the content that would be displayed through my application, I started with a comprehensive strategy for cataloging, evaluating and rebuilding all the information about safety considerations.

A content inventory helped me carefully review the existing materials: how much and what type of legacy content already existed? How much of the original content should be kept? Was there any information gaps to be addressed?

Having a complete list of all the resources available and having in mind the learners’ characteristics and needs, I was able to focus on what content should be edited, deleted or created: What type of information or support did the end user need? When and where did he need that information? How and where did he want to access that information? 

The answers to all these questions allowed me to restructure content into discrete, malleable information chunks. I organized the information for each tool and displayed the safety considerations related to specific parts through “tappable” layers.

Testing on real devices

To test my application on the real performance environment and under the real delivery conditions, I used Edge Inspect. By using the Google Chrome extension of Edge Inspect on my PC and the iOS app on my iPad, I was able to preview my design on the target mobile device, browse content in sync with my computer and make real-time changes, when necessary.

Offline access

Finally, the output of Edge Animate was a number of files, including an HTML file and CSS and JavaScript files. To ensure offline access, I advised the company to install a free iPad app called FileApp that could store any type of file so it could remain accessible offline.

The technologies used in this project were the best tools to fulfill its specific goals. I believe that each project is different and therefore, requires a unique approach.

The Result

A tablet-optimized application that provided relevant information to learners right in the context of performance and integrated seamlessly into their tasks was the result of this project. The design of the application was based on the learners’ characteristics, needs and work environment and also, on a mobile-first thinking that allowed me to make use of the mobile device’s built-in capabilities and to enhance interactions through touch gestures.

Key Takeaway

Real immersion, contextual application and immediate evaluation of their actions, enable learners to construct knowledge and solve problems anytime, anywhere.

How can you reach your audience at the exact point of need through mobile-friendly content?

Request a quote