Miracle Studio

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

Overview

Problem Space

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.

Project Description

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.

Roles

UX Researcher, UX Designer, UI Designer

Process

  • User Research
  • Information Architecture
  • User Testing
  • User Experience Design
  • User Interface Design

Tools Used

Sketch, Invision, Microsoft Visio, Adobe Photoshop, Flinto

Project Management Tools

Microsoft Visual Studio Online / Azure DevOps

Duration

Ongoing – over 18 months – with two week sprints

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. 

The login page
Dashboard: The first screen you see after login. As we'll see later, doesn't have the most relevant options for the user
Pages & Forms: All the different forms and pages in your app can be accessed, edited and managed through this screen
Add New Connectors: Through this screen you can connect with other data sources
Device Management: This screen manages any mobile devices running the app. You can send notifications to a device or disable the app on a particular device through this screen.
The Form Designer: This is where all the forms are designed. As we'll discover later, this screen isn't the most intuitive and user-friendly.

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

Conducting Usability Tests

With users from our clients, along with the feedback received from support requests, usability tests were conducted to gain qualitative 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, while others defined their own tasks that they were having trouble with. 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

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

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

TASK SCENARIO

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

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.

Conducting a Heuristic Evaluation

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.

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

First 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

The Design System

In order to maintain consistency throughout the product, an ever-evolving style guide was put together. This contained all of the design elements and their different states that occurred within a product, which included components such as buttons, typography, color, input fields, icons etc.

WRAPPING UP

Key Takeaways

A product is not able to live up to it’s full potential, if the behaviors, needs and goals of the users are not taken into account. In the end, this project helped me understand that iteration is a huge part of the design process. It’s only when you test your product with real users and listen to their feedback, that you’re able to design a solution that provides value to them.