Folio
The Basics
Folio is a shared services financial web application supporting 17 federal Agencies across the U.S. government. Folio enables its member Agencies to request, track, and report annual IT funding to the Office of Management and Budget (OMB). The contract is managed by the General Services Administration (GSA).
Feature Enhancement: Calculated Fields and Visual Indicators
My Role: UX Designer, Lead Visual Designer
Project Timeline: 6 months
Other Team Members: Lead UX Designer, Product Owner, 8 software developers, 3 QA testers
Client: General Services Administration
Project Goals
-
Enable users to conduct an at-a-glance assessment of their IT investment portfolio to determine the overall health of the portfolio using visual indicators, like icons, shapes, and colors, and read-only data fields aggregating information from other data entry fields. The ultimate goal is for Folio to be a one-stop-shop portfolio management tool instead of being a vehicle to submit data to OMB.
-
Help the Product Owner narrow down scope of enhancement to maximize user priorities against technical complexity. Previously, Folio had only rolled-out large, stand-alone features. The calculated fields/indicators enhancement was an exercise in casting a wide net of possible "mini" enhancements and then narrowing them down to those that worked best for the majority of users.
​​
-
Ensure new features meet Section 508 accessibility standards (WCAG 2.0 AA). The visual forwardness of this enhancement required the UX team to understand basic principles around color contrast requirements, alt-text, and ARIA labels and relay these considerations to software developers.
Double Diamond Design Process
Diverge
Converge
Diverge
Converge
The double diamond is a framework of generating ideas and targeting solutions. The scope is wide in the divergence stage, so any and all ideas are recorded and explored as potential solutions. In the convergence stage, the scope narrows so only the ideas that seem to best solve the problem at hand are pursued. This model can be used in both the research and prototyping phases of the design process. The graphic above shows which UX activities were conducted during each divergent/convergent stage.
User Interviews
The UX team conducted 10 virtual user interviews with individuals across 6 federal Agencies (e.g., Health and Human Services, Department of Interior, Department of Education) spanning 3 workforce roles to get a sense of users’ initial ideas on what new features would be helpful to them in their jobs and how it would make their workflows more efficient.
Key Takeaways
We validated that portfolio managers have a desire to assess the health of their Investments at a quick glance.
Users asked for features that would use color as a way to alert to an investment that needs attention; for example, an investment that is running behind schedule or spending over budget would flash in red.
​​​Users also requested that Folio embed data aggregations and calculations that would reduce the need to use an external calculating tool (i.e., Microsoft Excel) to assess the health of a portfolio.
Design Studio
To get more insights into what users wanted, we held a virtual Design Studio exercise with about 35 power users with the aid of the online collaborative whiteboarding tool called MURAL to solicit ideas and check our assumptions about what would be valuable and beneficial.​
​
-
Participants were given 10 minutes to come up with as many ideas as they could and write one idea per sticky note and place it in the correct area of the sunburst, which represented each Folio area (e.g., Risks, Metrics, Costs).
​​
-
Participants placed a "thumbs up" icon next to the ideas they agreed with, similar to dot voting.
​​
-
Participants generated 30+ ideas across 7 areas of the Folio application.
User Requirements
After the research phase, the UX team collaborated with the Product Owner and GSA clients to narrow the number of possible ideas, and then we looped in the development team to further refine these requirements based on technical feasibility. This exercise allowed us to assess the business implications of the enhancement and focus on designing for the ideas with the highest impact on user experience.
Prototyping and Usability Testing
The UX team created interactive prototypes in Axure for over 10 new features and held several rounds of usability testing with 12 end users representing 8 federal Agencies. Testing these screens helped the UX team:​
​
-
Understand the intuitiveness of the new features and use cases for each
​​
-
Validate the usefulness of these features to users in their roles
​​
-
Assess how visually impaired users perceived the new designs (e.g., check color contrast)
​
Overall, the new and updated screens tested well, with some minor changes needed to clarify certain fields.
"This cuts the work I have to do in half!"
"I like this. No, I love this."
"The colors make it so much easier to know where I need to put my attention."
Stakeholder Engagement
Throughout this enhancement, the UX team facilitated stakeholder meetings, called Tiger Teams with representatives from each of our 17 member Agencies. During these sessions, we solicited feedback on preliminary wireframe designs and gauge the usefulness of each feature to our users in their role. We also conducted an exercise whereby participants allocated virtual money to indicate which features they wanted our team to build first, which we used to determine development priority.
4 Meetings
across 6 months
35+ Attendees
via Google Meet
7 features prioritized
1 added to backlog
Final Low-Fi Wireframe Designs
Developer Handoff
The Folio team has a strong collaboration culture – meaning that software developers are involved in most, if not all, stages of the design process to vet designs against feasibility and gauge code complexity. Each feature story for this enhancement was assigned to a developer, who was responsible for overseeing that each user requirement was accounted for and coordinated with UX and the PO throughout the development process to surface any major roadblocks.
​
As the team’s main visual designer, I created high-fidelity mockups of our designs in Sketch and added them to our Style Guide – which is the main form of documentation in the handoff process to developers.
Low-Fidelity Wireframe
High-Fidelity Mockup
Style Guide Specifications
Final Thoughts
1. This enhancement increased Folio's business value to its customers.
Prior to the calculated fields enhancement, Folio's primary purpose was to enable federal Agencies to submit their proposed IT budget spending to the Office of Management and Budget (OMB) to comply with federal regulations. Now, users are able to perform data analysis on their portfolios directly in the app, inching Folio closer to its vision of being a one-stop-shop portfolio management and submissions tool.
​
2. The enhancement was a success and reviews were very positive, especially from portfolio reviewers.
Our team did not collect metrics on the direct impacts of this enhancements, but anecdotes from our users indicate that as a result, basic in-app analysis of their data is much easier to conduct than it was prior to the release of this enhancement, allowing portfolio reviewers to speed up their workflows.
​
3. I learned the value of balance and compromise in developing impactful products and features.
I learned from working on this enhancement, and Folio more broadly, that solutions emerged from balancing everyone's needs, e.g. between larger Agencies and smaller Agencies. One of our team's biggest challenges was striking a balance between providing design value to our customer's varied needs while staying within scope and technical constraints.