The People’s Portal

  • ConnectWise provides its partners—Information Technology professionals—with a web portal for managing their clients’ service requests (i.e. reporting a printer issue or onboarding a new employee). This web portal had not been performing well and we were tasked with improving the experience for both our partners and their clients.

     

    A collection of the mobile UI designs for People’s Portal.

    Goals

    Design a better service request experience for both the service provider and the client.

    ♦   Discover what problems the service providers and their clients are having with the current experience.
    ♦   Increase the adoption of the web portal.
    ♦   Drive new sales and increase the retention rate.

    My Role

    I was one of two designers working on this project. I created the standards for the visual style and did the illustration work. We worked through the problems as a team and shared responsibilities designing the solutions & validating. We worked closely with our partners, developers, product manager, and QA team to deliver the overall experience.

     

    New welcome screen with illustration by yours truly.

     

    Identifying the problems

    During our first round of interviews, we asked each service provider & some of their clients to tell us a bit about their company and asked some questions about what their experience with the ConnectWise portal had been like so far.

    These were the main problems we found:

    ♦   Service providers were having trouble getting their clients to use the portal.
    ♦   Clients were frequently forgetting passwords and resorting to emailing or phone calls.
    ♦   Phone calls were inefficient for service providers as they had to enter client information manually.
    ♦   Client emails were often vague and created a lot of extra back and forth communication.
    ♦   Service providers were getting frequent phone calls or emails from clients to check on their progress which would interrupt their workflow and result in duplicate tickets.
    ♦   The web portal was not responsive and offered a poor experience on a mobile phone.
    ♦   The UI was outdated & cluttered—both service providers and their clients had trouble finding what they were looking for.

     

    Persona and journey map.

     

    Design Solutions

    After gaining insights into what some of the main problems were, we put together our first draft of the design. We started from the ground up and prioritized delivering a simple and delightful experience for the service providers clients in order to increase adoption for both parties. Using the web portal needed to be just as easy if not easier than sending an email or making a phone call.

     

    Early sketches for creating and viewing tickets.

     

    Forgotten passwords

    The first thing we had to solve for was forgotten passwords, the majority of clients were not accessing the portal frequently enough to be able to remember their passwords and quickly resorted to an email or phone call.

    Solution: We implemented a single sign-on experience that the service providers could set up for their clients so they could use a password they were familiar with and wouldn’t have to log in every time they visited the portal. We also implemented a backup measure in case the client forgot the password which let them sign in with a token sent to their email or phone.

    Outdated, cluttered, and non-responsive UI

    The old UI was clunky and did not meet accessibility standards. Clients were having trouble identifying where to create a ticket due to the overwhelming amount of information on the first page. If the client did find the button to create a ticket, they were presented with a dialog containing a long form. There were several types of service requests they could select from which had been pre-determined by the service providers; this often resulted in confusion from the clients when they weren’t sure what their problem was. The service providers also had the ability to fully customize UI colors which sometimes resulted in an expression of creativity that wasn’t always easy on the eyes.

    Solution: We stripped down the UI to the essentials, bringing the primary actions clients could take front and center. We also split up the create a ticket form into different pages and narrowed the service request types for a more confident selection. Lastly, we designed the people’s portal to be fully responsive and placed restrictions on what could be customized in the UI, protecting both service providers and their clients from unintentional accessibility issues.

    Some screenshots of the old UI including the home screen, ticket list, create a ticket, and ticket view.

     

    Vague emails

    Often times client emails would be missing important details a service provider needed to know to resolve the request. This resulted in extra back and forth communication, phone tag, longer resolution times, and frustrated clients. We needed to help our service providers gather as much information as we could from their clients without them having to fill out a long form.

    Solution: We asked the service providers what important details are needed from a client initially to aid in a faster resolution. We designed the forms to guide the clients on providing more detail in their descriptions by giving them a well-written example along with some tips on what details to include.

     

    Mobile experience for creating a new ticket.

     

    Validating our designs

    We put together a prototype of the design and conducted the second round of interviews with service providers and their clients. Overall the feedback was positive, clients were happy with the updated UI and had no trouble finding their way around and completing tasks.  We still had a few kinks to work out though. Service providers were concerned that without the ability to customize categories for clients to pick from, they wouldn’t always be able to automatically organize and allocate tickets to the correct resources. We needed to come up with a way to solve for this without placing the burden on the client, who may not always know which category their ticket falls under.

    Solution: We implemented a way for service providers to organize their tickets based on keywords entered in the client descriptions. This way, the service providers could use their technical expertise to determine which keywords would automatically route tickets to the correct resources.

     

    Ticket list view


    Conclusion

    I feel confident that we are on the right track from the feedback we have received so far. Moving forward, we will continue to scale the portal to fit the needs of service providers and their clients. Future versions will include things like invoicing, quotes, educational resources, and project management. We also hope to include machine learning at some point to help track issues and provide more automated solutions for clients.