Product Design

Case Study - Designing a Client Portal

 
Hero-Image_Large.png

Objective

The objective of this project was to create a desktop portal for architectural clients to follow their project from initial bid all the way through to project completion. Clients needed to access their project from an online portal in order to read messages, receive important project updates, view photos, read documents, and pay their invoices all from one place.


Approach and Deliverables

When I was brought on as the Lead Product Designer, my task was to design the end-to-end experience of completing a structural engineering or architectural service. At the start of the project there was no customer portal in place for the customer to review the details of their project, attach documents, or pay invoices. Understandably so, this left clients feeling like they weren’t part of the process.

The Hub’s minimum viable product (MVP) needed to be delivered by September in time for an October launch. The launch would be rolled out initially for existing customers and for internal use only. Eventually the product would be made available for other engineering and architectural firms to use independently.


Tools Used: Figma, Illustrator, Framer X, InVision

Responsibilities: UI & UX, User-testing, Prototyping

Project Timeline: 2018 - 2019

Position: Lead Product Designer


 

Research

During the research phase, I identified the core problems the Hub. aims to solve for clients, project managers and architects. While there was no portal for clients to access their projects, I was able to gather information on the way projects were currently handled internally. Additionally, I studied the relationship between project managers and clients, gathered feedback on the current process, and discovered where there were gaps. The top five pain points I found were:

  1. Clients were often in the dark about project status or delays - The current way to let the client know about a project status was an email sent out by a project manager. Even with an email update, the user couldn’t log in to see project information or updates from the PM in one unified place. Many updates included files attached to the email to show progress or a change, which would get lost or missed by the clients.

  2. Managing multiple projects is a burden - Many clients have multiple projects going on at the same time. Contractors working on behalf of the client could have several projects going on at once. They needed a way to track all of their projects in one unified place. Keeping track of different emails for different projects was ultimately a burden to the client.

  3. A file system that works for both the client and PM - In the engineering and architectural space, clients need to upload documents related to the project while a project manager, engineer, or architect may need to upload final documents for project completion. Creating a place where all documents for the project are shared was extremely important.

  4. Time - Completing projects in a timely manner is not only important for clients, but also for the engineers, architects, and project managers working on the project. With the disjointed communication system, files and invoices would fall through the cracks adding unnecessary time to project timelines.

  5. Paying was, well… a pain - Paying was also a pain point for clients. Communicating pay increases for additional services on one project proved difficult with the standard invoicing system used. For most projects three or more invoices would be sent throughout the projects lifecycle meaning there needed to be a place where all invoices could be seen and paid. Additionally, invoices were often lost in email inboxes leaving them unpaid for an extended period of time.


Initial Analysis

Problem Statement - The Hub does not have a solution for clients to keep track and manage ongoing engineering projects from the initial bid to the final payment for a completed project.

Use Cases

  • “I need a structural engineering assessment of my home in the living room within 3 weeks.”

  • “I’m a contractor that manages multiple projects at once.”

  • “I’m a home owner and I need an addition to my home which will require several engineering and architectural services.”

  • “I’m an apartment owner that’s used Hub services before and plan to use architectural and engineering services in the future.”

Solution Summary - The Hub will provide a dependable, easy to use, and cohesive dashboard to keep track of multiple engineering projects from start to finish. Additionally the Hub will satisfy not only the needs of the customer but enable engineers and architects to communicate where they are in the project process.


Ideation

Based on the features, we began to construct the user experience flow, taking into consideration the following:

  1. First time user versus returning user experience.

  2. A client with one project versus a client with multiple projects.

  3. Differing projects (a simple engineering project, home remodels/ additions, retrofits, corporate projects such as office buildings and solar installations), what would be needed for each.

  4. Quickly viewing status updates and the ability to communicate with all parties in the project.

  5. Paying Invoices.

Rough sketches and wireframes followed.

Wireframes.png

 

High Fidelity Designs

 
Client Dash.png
Preview (1).png
 

Final Takeaways

The Hub. design was a complex working tool that took several months to design and create in order to seamlessly achieve the design objective. After multiple design iteration sessions, we were successfully able to design the client portal in a way that took into account the various use cases, while also improving and adding many new features after the launch of the minimum viable product.