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
What is Miracle Studio?
Team
- 1 UX Designer
- 1 Product Manager
- 1 scrum team x 8 people
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
- 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
- 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
- Usability Testing
- 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.
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 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).
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)