Paperless business processes, made 61% more efficient for users

Paper forms can be very difficult and costly to manage for a business. Not only is there always a risk of lost or damaged forms, but it is a very difficult and tedious process to extract meaningful data out of paper based forms. There is also the added cost of managing storage for the paper-based forms.

Moreover, there is a much bigger impact of using paper-based forms on the environment that can be reduced by making processes paperless.

Role

UX Design Lead

What is Miracle Studio?

An enterprise mobile app development platform focused on making business processes paperless.

Team

Timeline

November 2014 – August 2016 | 21 months

Deliverables

User Interviews

User Interface Kit

Prototypes

Usability Testing

Design Documentation

A no-code enterprise app development platform

Miracle Studio is an enterprise mobile app development SaaS platform that allows the replacement of outdated paper-based processes with mobile forms.

Through the drag and drop interface of Miracle Studio, you can create cross-platform mobile forms without writing a single line of code. You can then download and run these forms on users’ devices via Miracle Mobile Apps.

The apps created through Miracle Studio work on smartphones and tablets, helping companies easily collect information across their organization, share it instantly with others and gain real-time insight on their business operations.

Phase 1

Building a Minimum Viable Product (MVP)

The project started out with building a minimum viable product (MVP) that could be quickly shipped out to customers for early adaption. Like many MVPs, the early product was a bit lacking in features and functionality.  The primary goal of this MVP was to gain an understanding about our customers’ interest without having spent the resources on building the full product.

At this stage, some primary research had already been conducted by the management team. From a design perspective, the focus was on creating the user interface of this MVP. 

Focus of the Minimum Viable Product

The two main deliverables required for the minimum viable product were:
  1. Admin Area: An admin area that could manage all app resources and functions such as design resources, Integrations & connections, device permissions and other App settings
  2. Form Designer: A basic drag-and-drop form designer where you can add/remove form components to the page, edit their properties and have a responsive preview of the form in a tablet and mobile.

Design Limitations for the Minimum Viable Product

At this stage, the project and company was engineering-driven and the decisions around design were taken based on what was possible in development. The engineering team was using a third-party framework, which did not allow for much freedom in terms of customizing the design of certain areas.

The other limitation was the tight timeline. The entire focus was on getting the product out there as soon as possible. After I was brought on to the project, the minimum viable product had to roll out within two months. So, there wasn’t a lot of time to carry out a lot of research in this initial phase. A lot of the user experience design was based on assumptions and the very minimal research we could carry out.

However, after the minimum viable product was rolled out and the overall experience was evaluated further by users, the stakeholders decided to invest more time in carrying out user research and also build the entire functionality in-house, without relying on any third-party frameworks. From a user experience and design perspective, that allowed for more creative freedom and building an overall better user experience.

Designing the Information Architecture

Card Sorting

To determine the arrangement and flow of the different pages, I conducted a hybrid card sorting exercise using Optimal Workshop with 8 participants to test how well they understood or related to the menu items and terminology. The participants’ task was to sort 12 cards, which would become our menu items. There were 4 groups already created but participants could create their own groups if they felt the need. 

Designing the Structure

The results of the card sorting helped us determine the high-level structure of the minimum viable product. Based on that high-level structure, a detailed information architecture diagram was developed for the platform.

The First Version

After having a clear structure, we started with the process of designing each screen. As mentioned earlier, there were limitations around capabilities and the timeframe for this first version. 

PHASE 2

Evaluating the Minimum Viable Product

Once the Minimum Viable Product was rolled out, two clients from the construction industry in Perth, Australia, Georgiou and Asphaltech adapted the platform for their health and safety forms. After the initial deployment and training, there were customer support requests on various areas, which identified that the product had many areas with room for improvement. For the purpose of obtaining insight on problem areas within the product, two methods of research were employed:
  1. Usability Testing
  2. Heuristic Evaluation

80% of the work happens after the first version is shipped out.

Amin Bashi

VP of Product, CareGuide

Customer support requests compelled us to conduct a detailed audit of the user experience

Using Jakob Nielsen’s 10 general principles for interaction design, a heuristic evaluation was conducted to find usability problems in the user interface design of the minimum viable product, so that they can be attended to as part of the iterative design process.

The heuristic evaluation is always difficult for a single individual to complete as one person is usually never able to find all the usability problems in an interface. So, a workshop led by myself was conducted explaining the 10 principles for interaction design to the rest of the team, who then proceeded to evaluate the different screens of the interface individually for each of them.

With this team exercise, we were able to find several areas of improvements within all the screens in our interface.

Usability testing with 18 users revealed that the Form Designer was our biggest problem area

With users from our clients, along with the feedback received from support requests, usability tests were conducted to gain qualitative and quantitative insights into what is causing users to have trouble. These insights then helped determine how to improve the design.

Participants were recruited from our clients’ organizations for the usability tests. The studies were conducted remotely over a video call and screen sharing software as the participants were in a different part of the world. The video camera was engaged to detect the subtle cues and body language as the users completed the tasks.

Some participants were given tasks scenarios to complete. Examples of those can be seen below.

TASK GOAL

Create a new app

TASK SCENARIO

You are looking to create a separate app just for your safety inspections. Go to Miracle Studio and create a new, empty app.

TASK GOAL

Convert a standard paper-based form into a mobile form​

TASK SCENARIO

Using the form designer, build the provided paper-based Order Requisition form into a mobile form and publish it in your app.​

TASK GOAL

Display relevant forms in the relevant category in the app.​​

TASK SCENARIO

Find a way to to organize the forms within your app.​

TASK GOAL

Send a push notification to everyone using the app

TASK SCENARIO

The company’s having a monthly town-hall and a notification needs to be sent out to everyone about it.

TASK GOAL

Make a connection between Miracle Studio and other back-end systems​

TASK SCENARIO

Connect your company’s Document Management System with Miracle Studio​

TASK GOAL

Edit an existing connection from Miracle Studio and other back-end systems

TASK SCENARIO

Change the database associated to the connection between your company’s Document Management System and Miracle Studio.

TASK GOAL

Migrate the forms of one app to another

TASK SCENARIO

You have created an app that you’re going to use as a base for another app. Migrate the forms from an existing app to the newly created one.

TASK GOAL

Add a new setting

TASK SCENARIO
Add a setting where the user of the app can define the maximum number of attachments per form.

TASK GOAL

Remove a device using the app

TASK SCENARIO

An employee has left the company. Disallow their device to use the app.

Qualitative insights from the usability test

The Form Designer

The form designer was not intuitive enough for users to be able to quickly create forms. They were taking up much longer than anticipated, were having a hard time getting the formatting correct, some of the longer forms with different controls had them frustrated.

The Dashboard

The dashboard displays the number of apps, categories and forms. If there were multiple apps created in an account, it wasn’t clear if the count of categories and pages was just from a single app or all the apps combined. In essence, the dashboard was displaying information that was either confusing or redundant.

Organizing forms into categories

When creating categories & organizing forms into them, users had to go to the categories screen to organize, which meant more steps than necessary.

User efficiency metrics from the usability test showed us the product needed work

The Task Success Rate on some tasks was low and signalled that those user flows lacked clarity. Users were not clear on the next steps to complete each task. The high Time on Task also pointed towards the same problem. The confusion was making the users take longer to complete the tasks, if at all.

Based on the above metrics, we were able to calculate user efficiency.

0.31

tasks completed per minute

PHASE 3

The Redesign

After gathering all of the insights from our research, the redesign process started. In the redesign process, each area of the product was looked into and redesigned one by one. 

The form designer

The biggest frustration people had around our product was with the form designer. They did not find it intuitive to use. In particular, once a control was selected, the properties panel that displayed was unorganized and was not easy to navigate through.

During this exercise, the form designer was redesigned to improve the usability of the form designer, ensuring that the properties panel was easier to navigate through.

A new form designer with an organized Properties panel

The login flow & dashboard

Apart from the evaluation of individual screens, the overall flow was also reviewed. In the initial flow, when the user logged in, they immediately arrived at a dashboard, which provided information that was confusing about where the user was within the system.

Considering that you could create multiple apps on the platform,  it wasn’t clear which app’s settings you were editing when you landed on the dashboard. Therefore, after the login page, there was a screen added, where you would select the app first, and then go on to that app’s specific dashboard. The dashboard itself was redesigned to add more meaningful options that assist the user in the app creation process.

Old flow

New flow

The new login flow and a dashboard with more relevant options

The other screens

Keeping in mind the feedback from the user testing, the heuristic evaluation and the competitive analysis, each screen was reviewed and redesigned.

Designs were created in close coordination with the development team, for a variety of different use cases and the different states of individual elements (hover, active, inactive, error). 

A clean user interface for the other screens within the platform

Testing the new design showed significant improvements is user efficiency

We reverted back to the same set of users to test the new design. What we saw  was higher Task Success Rate on the problematic tasks and the Time on Task for each was also significantly lower.

With the new design, user efficiency saw a 61% increase.

With the older design, if people were completing 3 tasks in 10 minutes. Now they were completing 5. If they were taking an hour to complete 18 tasks, now it was 30.

0.5

tasks completed per minute

The outcome of the redesign

31%

increase

in task success rate

18%

decrease

in the average time to complete tasks

61%

increase

in user efficiency (tasks per minute)