An end-to-end solution to give users access to account data in real time
Background
Before having a portal this Fire & Life Safety company relied on fielding customer data requests via phone, email, and even fax. In addition to causing mass frustration for customers, this old-school approach was taxing on employees, created overhead costs, and was not a scalable solution. In order to modernize the process, and attract new clients, the company needed to think about a digital destination for customers.
My Involvement
- Lead UX Designer
Tools Used
- Figma
- Miro
- Azure Dev Ops
- Notion
Timeline
- 7 Months (2021)
Team
- Engineers (9) | UI and DevOps
- Technical Leads
- Solution Architect
- Project Manager
- UX Director
Problem
How might we give customers access to their data in real time and improve self-service in order to reduce frustration and company overhead?
Questions I Had
- How often do customers need to access their data?
- How do we best serve the different types of customers – ie Regional Manager vs Facility Manager
- How does a customer define “transparency?”
Challenges
Some of the challenges faced in this project were a limited timeline until MVP needed to be delivered, incomplete discovery work done by another vendor, and key stakeholder turnover.
Constraints
This portal needed to be built mobile-first, and needed to be delivered at a hard date (within six months).
Our Users
User research was conducted by an outside firm who interviewed multiple rounds of users. I partnered with my UX Director to boil down the initial research and narrow in on the insights below.
Regional Manager —
I need self-service access to high-level data, I want to understand the business at large.
Facilities Manager —
I need transparency into work orders, to be in the know, and vendor accountability.
Process
UX Methods
- Wireframes
- High fidelity mockups
- Data visualization
- Prototype
- User Feedback Sessions
01 | Discovery + Definition
Our team inherited user research from an outside vendor. Using those insights I helped define our customer profiles and their initial needs. This drove feature definition for our backlog, and helped inform the site map architecture.
02 | Design
I began iterations on wireframes to help plot out features we knew customers needed. I established a design pattern that could be implemented across the portal for consistency. Designs were presented to stakeholders and users for feedback, and consistently iterated to satisfy business requirements and users’ needs.
03 | Development
Our team of engineers started building out features. I worked cross-functionally with our UI engineers to further define and develop the portal interface and functionality, as well as the QA team to ensure the portal was functioning as intended.
04 | Delivery
I tested the portal’s features with users via moderated user feedback sessions. I built a clickable prototype, wrote out the script and interview questions, and partnered with an additional UX designer to help moderate so that the questions came across without any bias. All findings were synthesized and I used the insights from these sessions to help further define and validate our design decisions before delivery to the client.
Sitemap
I led an effort to create a site map to help plot out and validate features and navigation architecture for the portal. Doing this allowed us to define the most important features, and create an architecture pattern we could use across the entire portal.
Wireframes + Iteration
I started with sketches on paper to rapidly create some rough wireframes. These sketches were eventually turned into lo-fi wireframes which I used to get feedback on from our internal team as well as the client.
Assumption: Users are most concerned with upcoming maintenance at their facilities.
Findings: While a valid concern, users wanted to see the list of work orders as the main feature.
Assumption: With complex levels of data, users would need to be able to filter
Findings: Not only did users want the ability to filter, they wanted to be able to filter specifically for their business. ie by hotel brands, regions, facility, etc.
Solution
The end-to-end customer portal MVP was built and delivered on time. This solution hit our goal of creating a self-service hub to reduce customer frustration and lower overhead costs.
The data was visualized to allow for quick understanding for regional managers who wanted a high-level snapshot, and also gave more tactical users access to more detailed information.
Dashboard
I created a user-centric Dashboard that features multiple widgets. This view helps a user see important high-level insights in which they can click-through to see details.
Data Visualization
To help users see high level information quickly and in an easy-to-understand way, I created data visualization widgets that serve users the information the need to see the most. This need for high-level information was validated by research and interviews.
Modules
Every module I designed is broken out into its own page. The top features a high-level data rollup, followed by a sortable table with more detailed information. The entire can to be filtered, helping a user get the information they need.
Mobile Design
With all designs I had to make considerations for mobile-use and design mobile layouts. For some pages this meant converting tables into cards, for example. This allows users who are on-the-go to be able to access information at any job site.
User Interviews
I conducted several rounds of moderated user interviews. Using a prototype I built, we discovered:
- The interface was intuitive and easy-to-use
- Businesses wanted the ability to filter data by custom parameters (vs universal filtering)
- Users wanted the ability to mass download site reports for auditing purposes
Impact
25
Decrease in Account Manager Workload
1
Major Accounts Won
+2
Increase in Revenue
Lessons Learned
- With more time I would’ve built a more comprehensive design system. This would save on any back-and-forth with developers, and make it easy for future designers to iterate on this project.
- I would improve the integration of design and Agile. Ideally, it would be nice to have more time to collaborate and iterate before sprints.