An enterprise mobile app development platform focused on making business processes paperless.
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.
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.
UX Researcher, UX Designer, UI Designer
Sketch, Invision, Microsoft Visio, Adobe Photoshop, Flinto
Microsoft Visual Studio Online / Azure DevOps
Ongoing – over 18 months – with two week sprints
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.
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.
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.
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.
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.
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.
Create a new app
You are looking to create a separate app just for your safety inspections. Go to Miracle Studio and create a new, empty app.
Convert a standard paper-based form into a mobile form
Using the form designer, build the provided paper-based Order Requisition form into a mobile form and publish it in your app.
Make a connection between Miracle Studio and other back-end systems
Connect your company’s Document Management System with Miracle Studio
Display relevant forms in the relevant category in the app.
Find a way to to organize the forms within your app.
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 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.
When creating categories & organizing forms into them, users had to go to the categories screen to organize, which meant more steps than necessary.
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.
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 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.
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.
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).
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.
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.