simPRO eForms App

Project done with simPRO Software

UI/UX Designer for the Add-Ons Squad:

Team responsible for the releases of Add-ons and integrations.
I was the UI/UX Designer for two squads (Projects and Add-Ons) for almost a year.

Key Deliverables I produced for this Project:

  • IA / User Flows
  • Wireframes & Prototypes
  • UI Design Solution
  • User Testing
  • Development Documentation
  • Look & Feel Test Cases
  • Duration 8 months (2019)

    Project Overview

    Some screens of the eForms App project

    What’s the deal with the eForms app revamp?

    Back in 2016-2017, the company decided to launch a new app that would help the users on site generate quotes on-the-go and present several suitable options for potential clients: The Sales App. I was involved in the early stage of the development of this app, so I’ll comment a bit about it as well, because it deeply informed how we revamped the app I’ll be talking about in this page: the eForms App.

    Screenshot of the eForms Form Creator
    Screenshot of the eForms Form Creator (Web based)

    eForms App already existed as an integration of the main software. Users had the ability of creating Forms on a web based eForms Form Creator (different from the Form Builder, hope you don’t get confused). From the eForms web base platform you could send the forms to the eForms app, so users could open them, fill in information on site and send it back to the system.

    Screenshot of the old app
    Screenshot of the eForms App at the beginning of the project

    simPRO wanted to revamp the app so it matched the nice and slick solution we managed to achieve with the Sales App, so they kicked off the project of revamping eForms app to match the same Look & Feel.

    We were able to collect the insights of the challenges through the following methods:

    • Ideas portal
      Users submitting requests for specific features
    • Previous findings we collected when we did the user testing with the Sales App
    • Feedback
      collected directly from implementation staff and users

    Challenges

    We needed to keep the same functionalities that the original eForms app had but in order to make it similar to the Look & Feel we had in the Sales App few bits and pieces of the IA had to change.

    That also meant that we needed to categorise the forms a little bit differently in the app, adding few screens that the user wasn’t familiar with, so we needed to keep a user flow that was as straightforward as possible.

    We wanted to add a few more functionalities to the app (zoom in/out, generate mandatory fields) so that meant integrating them in the web base editor so it could cascade to the app.

    Process

    In this project, the Product Owner was located in the UK. It was a bit of a challenge because of the time differences, but once we were able to figure out how the right hours to collaborate communication wasn’t a problem anymore.

    Prebuilds Process
    Evidence of Remote User Testing (Heat maps) recovered during the Sales App user testing

    During the development of the Sales App (the parent app for eForms app), we ran a few card sorting exercises, usertesting with wireframes and prototypes that helped us map the user journey through heat maps. The Sales App had a big evaluation process with users and implementation staff. The Sales App informed the way we solved the IA for the eForms, because we ended up integrating it as a module that followed the same logic and similar user flows in the navigation.

    The The First iteration loop (lo fi prototypes) got paper prototypes and wireframes that we bounced back and forth first with the product owner. He collected feedback from some of the implementation staff at the UK offices regarding the first ideas. Once we were happy with the main user flows, we included other members of the team (lead developer, QA testers) to get their feedback.

    We also had a Second iteration loop (hi-def prototypes) which was a bit shorter because a lot of the UI components were taken from the Sales App. At this stage, the developers created an MVP for us to start testing and iterating during several cycles. We were able to catch a few scenarios I wasn’t aware we would face (thanks, QA!).

    Most of my time in simPRO I worked in the web based solution, so having to do a full revamp of an app felt like a huge mission. Getting those nitty gritty final details in an app first felt like a huge challenge, but at the end it was quite fun and I love being part of the project. Some of my new learnings involved making the right UI decisions depending on Android and iOS. We used a framework that helped us generate components for each operative system quite smoothly, which helped so much during the implementation.

    A lot of Look & Feel test cycles happened so we could detect and fix anything that didn’t quite match the context. After several cycles, we developed an app we were happy with and the feedback in general was excellent.

    Solution

    We ended up with a lighter app (in comparison to the original) that was very simple to use and very straightforward. The navigation was quite smooth and users were able to find the forms they needed very easily.

    If anything, the app felt very simple. Some staff members would question if we had included everything the previous app had, and yes, we did!

    eForms Prototype
    Prototype covering one of the main user flows

    As much as I would love to share a very detailed prototype of the solution, I don't want to get in trouble for showing too much because #copyrights. Instead, I'll leave here the link to their help guide, which includes a video with a walkthrough around the feature: eForms App Help guide

    Feedback & Improvements

    The good things

    The Look & Feel of the app in general was widely applauded. Most of the complaints regarding the original app was that it felt quite old and was very slow. The new one felt simple and light in comparison. Having the Sales App as the parent app helped so much to define a lot of the IA and the UI components. This new app felt very integrated to the simPRO family, and was fast and easy to use.

    The 'not so' good things

    We developed the mobile phone version first and we used the same css/sass files for tablets. While in mobile phones it looked great and just the right amount of padding around some of the elements, in a tablet some screens seemed to have way too many white areas that could have been used in a smarter way. The icons as well felt a bit small, I think in general the arrangement and proportion of elements on the tablet version should have changed a little to improve the UI. The time frames were tight, so we ran out of time to develop a solution adjusted for tablets only. Shortly after, I went on maternity leave and then left simPRO, so I am not sure if they implemented a better solution for tablets. It’s not that we had a bad solution. It’s just that it could have been a better one.

    simPRO Software logo
    simPRO Software

    Private sector

    simPRO Software is a SaaS solution, designed specifically for traddies (or at least, that’s how it started. It has now diversified). This system allows you to create leads, jobs, quotes and invoices, manage stock, assign specific jobs to employees, assign jobs to contractors, schedule asset maintenance, a bit of everything really.

    All copyrights of the solutions belong to simPRO Software.

    Portfolio

    Favourite Work

    Check out my other projects too