Department of Labor Apprenticeship Data

Context

The Office of Apprenticeship wanted to consolidate their data in an enterprise data warehouse and create 13 dashboards to help answer questions about Diversity, Equity, and Inclusion (DEI).

• The project had been going on for a year when I started, but it didn’t meet client needs.
• The contract was extended a year with a very specific punch list of items to fix that covered the whole project timeline.
• There wasn’t time or scope to address anything I could learn from users.

Team

• Office of the Chief Information Officer: Federal Project Manager, UX Designer (me)
• Contract Dev Team: Project Manager, Product Manager, 2 Data Scientist Developers, UX Researcher (part-time)
• Office of Apprenticeship: Day-to-Day Product Owner, Program Manager, Division Chief, Administrator

Problem

How do we get user-centered design built into the process?

User research: Round 1

• I built trust with the Project Manager by wireframing on a separate project, so he let me start doing UX work on this one.
• Because one dashboard was going public, it was a good first candidate for user interviews.
• There was a focus group with some of the people involved in this research and I was able to build the case for 1 on 1 interviews because most of the talking in that focus group came from one person and it became clear that we didn’t get the value we wanted from the other focus group participants.
• I started this round with people who work at state apprenticeship agencies because we didn’t have the ability to find people in the public.

Study goal: Start getting feedback from users and building trust with the team.
Participants: 9 participants from state apprenticeship agencies.

Findings

• Filtering controls: Multiple users were confused by having both filters and breakdown next to each other.
• Plus sign: No users were able to discover the control to be able to view county level information.
• Clickability: Few participants discovered that they could click on the bar charts.
• Map prominence: Participants broadly liked the map and wanted it to be the first or primary visualization presented to users. Many didn’t discover that clicking on it filtered the numbers above.

Screen that we tested:

Prototype to address issues:

User research: Round 2

After building trust with the first round and setting up infrastructure to recruit public participants, I conducted a second round of research with public participants.

Study goal: Learn whether the changes we made improved the experience and get feedback on additional changes.
Participants: 4 researchers, 3 economists, and 2 journalists.

Findings

• It was easier to use than in the first iteration.
• Download function was difficult to find.
• State type definitions were confusing.
• Participants thought we didn’t have county-level data because it isn’t available for the default display setting.
• Wage data wasn’t discoverable.
  

Tested prototype:

Final design

View the built page on apprenticeship.gov.

Outcomes

Incorporating user research resulted in:

• I was asked to design some of the later dashboards in the roadmap to get early feedback.
• The dashboards I designed required less iteration with the client than previous dashboards.
• The Office of Apprenticeship hired a UX intern after my team’s engagement.
• Leadership was much happier with the outcome of the project than with the previous iteration.

ONRR.gov Redesign

Context

After we were successful at redesigning the Natural Resources Revenue Data portal, my team continued that work when we were given responsibility for the agency’s main website (onrr.gov). That site is the public face of the agency and a portal for companies who lease lands from the government to report their resource production and pay the amounts they owe the agency.

My team worked in the open and documented everything on a wiki and in a blog. Links in parentheses below go to pages on those websites.

Redesign process

My role in the redesign was to lead all UX and content strategy activities with help from 2 program analysts and several UX interns. The project used agile methodologies and I led user and stakeholder interviews throughout. I also acted as product manager and scrum master for much of this process because we had a year where we had no dedicted product manager on the team.

Discovery

• Content audit & sitemap
• User & stakeholder interviews (Blog post about getting stakeholder buy-in)
• Product visioning (Product framing)
• Persona definition (Blog post about personas)

Old site maintenance

• Update site in Dreamweaver and html
• Move work tracking from ServiceNow into GitHub
• Prioritize 3,000 documents that needed to be made accessible (Blog post about making document accessible)
• Work with document owners to make documents accessible

Redesign

• Conduct card sorting and tree testing to define new information architecture (Blog post on card sorting)(Blog post on tree testing)
• Redesign site to fit new information architecture
• Rewrite all site content to plain language standards
• Test prototypes with users and iterate designs
• Redesign contact information to work for those who are contacts (Blog post about contact info redesign)

CMS setup and customization

• Research CMS options
• Conduct user research with future CMS users
• Work with developer to customize CMS to be able to handle everything in the design
• Add all content to the CMS

New site maintenance

• Plan workflows for commonly updated content
• Ensure content updaters know the process for using GitHub to track issues

Before and after

Here’s what the homepage looked like before and after the redesign.

And what it looked like after the redesign.

Learn more

You can read about the work I did at the Office of Natural Resources Revenue in my team’s blog.

Tax Data Visualization

Read a User Experience Magazine article about this project.

Problem

Enable tax professionals to explain to clients how they arrived at their refund or balance due.

Process

Solution

• Designed a graph view that shows where the client’s money goes in a tax return.
• Collaborated with a visual designer to ensure the visual design conveyed the message.
• Tested with clients and tax pros to ensure the graph facilitated the conversation.

Tax Summary

Results

• Designs performed well in usability studies.
• Launched as a beta the first year and then released nationwide the following year because it performed well in the field with both tax professionals and clients.
• Additional screens to visually explain tax data were designed the second year as a result of the success of this screen.

iPad Tax Prep

Problem

• Provide a way for users to file their taxes using an iPad.
• Using the tax engine and interview screens from online, find a way to make a native iPad UI that makes the app feel like it’s on an iPad and improves the experience for users.

Process

Solution

• Used years of research about navigation within tax prep products to design a left hand navigation menu in the native iPad UI.
• Collaborated with a visual designer to create a look and feel that indicated the product was still in the H&R Block At Home family, but looked like an iPad app.
• Worked through which pieces of the online interview screens needed to change to be compatible with interactions commonly expected on the iPad.

Main UI

Landscape

Portrait

Results

• Designs performed better in usability studies than any previous product we’ve tested out of the box.
• Satisfaction scores for the iPad app are higher than for the online product it’s based on.

1040-EZ Mobile

Problem

• Provide a way for users with simple tax returns to file using their smart phone.
• Allow users to take a picture of their W-2 for simplified data entry.
• Ensure consistency with online tax preparation application.

Process

Solution

• Collaborated with visual designers to optimize the tax prep process for the phone.
• Figured out ways to simplify the tax interview that we used in the online product for the small real estate on the phone.
• Defined interaction for incorporating photo taking functionality into the W-2 interview.

Screens

Main UI

Income

Photo Data Entry

Results

• Designs performed well in usability studies.
• Average rating of 3.5 stars in both the Apple and Android App Stores.

L.L.Bean Responsive Site

Problem

• Conversion on tablets was lower than desired.
• Many features on the site were difficult for users to interact with on tablets because they had small tap targets.

Process

Solution

Responsive site optimized for tablet users on viewports down to 600 px wide.

Tablet Screen

Portrait

Landscape

Desktop Screen

Results

Designs performed well in usability studies with tablet users.

Block Mobile

Problem

• Revamp the existing phone app to add new functionality for uploading documents, viewing prior years returns, and logging into an account.
• Ensure consistency across platforms for the new functionality - i.e. if a user logs into an account to upload a document from the mobile app, the experience should be consistent with how it works online.
• Fix usability issues with the existing app.

Process

Solution

• Redesigned basic information architecture of the app to incorporate the new functionality.
• Designed interactions for the new functionality.
• Fixed known usability issues.
• Enabled direct action to be taken on the Home screen for common user tasks.

Home Screen

Before

After

Document Upload Screens (New Feature)

Results

Designs performed well in usability studies.

ATI Nursing Education

Users

Nursing students use ATI’s products to study and gauge their readiness the NCLEX board exam.

Problem

Improve user engagement, accommodate mobile use and support easy access to assessments, tools and content.

Process

I worked on several ATI products over several years with Useagility. We conducted user research to understand user needs and developed a base design to meet those needs for the first product we worked on and then replicated similar designs across other products in their product family. I was the lead UX designer for the first product geared towards students and several of the subsequent products geared towards students, faculty, and ATI coaches.

Solution

• A card-based design that emphasized the learning loop made it easier for users to understand how to navigate the pieces of the product on a variety of devices.
• Visuals to indicate how far the student is along the process towards being ready for the NCLEX exam.

Screens

Homepage

Learning Loop

Readiness Assessment

Results

As a result of our work, ATI saw student outcomes improve, along with an expanded client base, greater engagement with educational material and significant increases in their net promoter score (NPS) and client satisfaction scores.
Within two days of implementing the new designs, ATI had 500 students logging in—and received zero support calls. Two days later, 1,000 students had accessed every area of the site and made only five calls—half of which were students complimenting the changes.

PlanIt Impact Architecture Reporting Tool

Users

Architects and city planners use the PlanIt Impact to evaluate the environmental impact of their designs.

Problem

Simplify a complex process to integrate open sustainability data with third-party structural design applications, making it easy for users to assess – and share – the environmental impacts of their designs.

Process

With my teammates at Useagility, we interviewed several users to learn about what their needs were and did a few iterations on the design before it was built by their internal developers. I was the lead deisnger and responsible for conceptual and detailed design for each iteration.

Solution

• Responsive web application that imports files from architectural software to evaluate sustainability of a design.
• Allows users to compare sustainability across multiple design options.

Screens

Homepage (mobile)

Comparison report

Results

The final step prior to development was to incorporate the results of the concept testing into a fully-functioning prototype, including data integration and visualizations, then test it with users again. In this stage, we validated the responsive and adaptive features we designed for mobile devices and ensured the data visualizations were clear and intuitive.

L.L.Bean Customization Tool

Problem

• The existing page to create a custom item used Flash and was unusable on tablets.
• The screen also didn’t look like it was part of the rest of the site.

Process

Solution

• New screen using a third party configuration tool.
• Screen laid out to look like other product pages.
• Responsive to the viewport on tablets.

Screens

Desktop

iPad Portrait

Block Mobile iPad App

Problem

Create a version of the Block Mobile app optimized for the iPad.

Process

Solution

Improved organization and layout of features to take advantage of the real estate and functionality available on the iPad.

Home Screen

Find an office

Tax Estimator

Results

Designs performed well in usability studies.

POMCO Emergency Alert System

Users

College students who want peace of mind when walking alone on campus.

Problem

POMCO provides personal safety tools utilizing a key-chain device linked to a mobile app for college students living on campus. In order to enable students to make an emergency call to campus security with the push of a button, the POMCO team needed a more user-friendly process to get students up and running quickly.
The POMCO team needed help educating students about their personal safety device and app as well as designing an intuitive user interface for campus security dispatchers to use when receiving an emergency call from students.

Solution

Using thorough end-to-end process analysis for both online and offline POMCO components, Useagility distilled the set-up process and tested it by simulating real-world campus safety situations before updating the front- and back-end web site and app and designing a quick- start guide especially for students. I was the lead designer on the project.

Screens

Before

After

User flow

L.L.Bean Responsive Email

Problem

Users viewing L.L.Bean transactional emails on their phones had a difficult time reading the contents of the email.

Process

Solution

• Responsified existing emails and incorporated new business requirements related to matching transactional emails to the llbean.com order summary screen.

Transactional Email Screens

Mobile

Desktop

Block Live

Problem

• Provide a way to replicate the in-office tax preparation experience at home, taking advantage of video chat capabilities.
• Users needed to be able to find a tax pro that was available when they wanted to prepare their tax return, upload documents to share with their tax pro, and view and approve their return once completed.
• Also included a mobile app to take pictures of and upload tax documents.

Process

Solution

• Concepted and designed a new product from the ground up, working with business partners and visual designers.
• Built and tested several iterations of high-fidelity prototypes with users to ensure the viability of the concept and usability of the product.
• Worked through detailed design and made trade-offs with development to ensure delivery within time and budget constraints.
• Worked with the vendor who designed the mobile app to ensure the process between Block Live and the mobile app worked smoothly and ensured the app conformed to guidelines and design patterns established in the main application.

How It Works Screen

Results

• Concept and design performed well in user research studies.
• Pilot and beta releases launched.

L.L.Bean Account Redesign

Problem

• Account interface was dated and confusing for users based on an external usability review of the site.
• Account functions weren’t present on mobile site.

Process

Solution

• Redesigned account screens that work well for all users on all devices.
• Most common user tasks are bubbled up to the main My Account page for easy access.

Screens

Before

My Account Main Screen

After

Desktop

iPad Portrait

Mobile

Hallmark Baby Responsive E-Commerce Site

Users

Online shoppers who are purchasing clothing for babies.

Problem

Hallmark is more than a greeting card company – it’s a brand engaging customers emotionally with a variety of digital and tangible products.
When Hallmark needed an upscale ecommerce site for Hallmark Baby, Useagility customized their Demandware ecommerce platform to deliver an engaging and efficient customer shopping experience.

Process

I worked in tandem with another designer on this project. The other designer designed the desktop wireframes and I adapted the responsive designs for other viewport sizes. We used Demandware’s extensive documentation and templates to ensure the designs could be implemented using their framework.

Solution

Useagility worked closely with the Hallmark Baby team to understand their goals for the shopping experience before exploring the capabilities of the Demandware solution and creating customized responsive wireframes and prototypes using Axure.
Defining desired workflows and functionality through clickable prototypes gives development teams like Hallmark Baby’s clear specifications for what they should build, allowing quick site implementation to capitalize on brand momentum in other markets.

Product selection page

Wireframe

Implementation

Product detail page

Wireframe

Implementation

TaxCut Support Site

Problem

• We had been asking our customers to tell us which of four support providers they needed. Users didn’t understand how we’d structured our support organization, they only knew what was preventing them from finishing their taxes.
• The site presented vaguely labeled, redundant content, such as FAQs and Q&A, which made it difficult to discern where to go find the content users were seeking.
• The primary means for accessing content was through a search that didn’t provide relevant results and we were unable to customize to improve.
• All contact information was removed from products and users were required to view a self-help article prior to viewing contact information.

Process

Solution

• A topical browse view that visually communicates the organization of the support content based on a series of card sorts conducted with users.
• Elimination of most of the redundant Customer Support content.
• Rewrites of KB articles and titles to better match the user’s understanding of issues.
• Development of a methodical approach to content maintenance based on user evaluation and data analysis.

Main Customer Support Page

Before

After

Results

• Two usability tests and one summative card sort validated the browse view design. Users easily scanned for the article they needed to solve their issues.
• Significantly decreased contact volume in spite of an increase in traffic to the support site.
• Fewer page views per visitor for the support site.

Zumba Instructor Network Portal

Problem

• Users had difficulty navigating the portal for instructors.
• The layout on screens within the portal was inconsistent and difficult to understand.

Process

Solution

• Templatized the screens within the portal.
• Added a navigation menu to make it easier to find content.

Edit Account screen

Before

After

Training History screen

Before

After

TaxCut Welcome Sequence

Problem

• Users were overwriting returns because they didn’t know how to start a new return.
• Users were creating multiple copies of a return and checking e-file status from a copy that wasn’t sent.
• Getting started took more steps than necessary.
• The process for new and returning users was the same.
• Importing a prior year return took more steps than necessary.
• Update availability information was not readily available before beginning a return.

Process

Solution

• Single Welcome screen that isn’t tied to a return and lists out available returns and other important information, such as update availability.
• Shortened import process that displays available returns to import, since 60% of users import.
• Update functionality available outside of return preparation task.

Welcome & Update Prompt

Before

After

Import Screens

Before

After

Results

• Online prototyping and a summative usability study confirmed an improved experience.
• Reduced contacts about issues with checking return status and overwritten returns.

TaxCut Support Reports

Problem

• We had a difficult time identifying user issues that should be fixed in the product.
• Multiple reports had to be reconciled to determine what the issues were and the severity of the issues.
• We couldn’t get a holistic view of the issues.

Issue Identification Process

Solution

Combine 5 reports into one.

Combining reports allowed us to

• Understand the total number of users who experience an issue.
• Take action on the issues in the report.
• Clearly see the effect that posting a given write-up has on volume.
• Identify trends in volume.
• Identify high-volume issues that need to be fixed.

How I got to one report

• Conducted a card sort with support agents to get accurate categorizations.
• Tied knowledgebase articles to the categories agents use.
• Developed a plan for ongoing maintenance of categories as new issues arise.

Results

• Increased accuracy of support data.
• Better understanding of exactly what issues users experience.
• Improvements to the product.
• Also helps QA troubleshoot technical issues.

City Year Redesign

Problem

• The site was confusing and overwhelming for users.
• Users didn’t know where to start or where to go for specific information.
• Subsites, such as the Application and Donation processes were confusing, as well, and buried within the main site.

Process

Solution

• Revised information architecture to match card sort results.
• Standardized page layouts.
• Reworked subsites and processes to clarify purpose and process.
• Reorganized application process into logical groupings to make it clear what needs to be done and in what order it will be done.
• Made it clear that the user is in the application by taking away the site navigation.

Registration screen

Before

After

Application process

Before

After

Results

Summative usability study confirmed an improved experience.

DeductionPro Donations

Problem

• Users who donated more than one type of item to a charity had to enter each item individually on a separate line.
• Users didn’t understand what the Details button was for or how to access the details required for donations over $500.

Process

Solution

• Added the ability to enter a series of items for each trip to a charity.
• Clarified the detail entry process.

Donation Entry Screens

Before

After

Results

A summative usability study and walkthrough confirmed reduced confusion over the details and increased time to enter noncash donations.

Cruises Only

Problem

• A new client wasn’t satisfied with the organization of the ship information pages on Cruises Only’s site, so they requested a redesign before they would use the service.
• The information architecture wasn’t intuitive.
• Users weren’t able to easily drill down into detailed information they were looking for.
• Users couldn’t easily scan pages to find information they were looking for.

  Process

  

  Solution

• Revised the information architecture to match common user tasks.
• Changed the layout of pages to enable easy scanning and drilling.
• Templatized the pages for use with all of their clients.

  Information architecture

  Before

  

  After

  

  Informational page

  Before

  

  After

  

Drill down page

Replaced a long scrolling page.

Results

• The client was satisfied with the redesigned pages.
• Summative usability study confirmed that the redesigned pages are easier to use than the previous ones.

Natural Resources Revenue Data Portal Product Framing

Context

The Office of Natural Resources Revenue (ONRR) is a U.S. Department of the Interior agency that tracks revenue received and distributed from the management of natural resources on public lands and waters.

• I worked on an open data site with revenue data from oil & gas leases on federal lands.
• The Extractive Industries Transparency Initiative (EITI) was the driver for the website.
• Shortly before I started in this role, the United States pulled out of the EITI.
• As a result, we had to rethink what the site would become and had a lot more freedom to respond to user needs. My team worked in the open and documented everything on a wiki and in a blog. Links in parentheses below go to pages on those websites.

Team

• Agile Team: Product Owner, Developer, Content Strategist, 2 Program Analysts, UX Designer (me)
• Leadership & Stakeholders: Program Manager, Director & Deputy Director, Department of the Interior Political Appointees, Public & Congressional Affairs Manager, Data Retrieval Team, Freedom of Information Act Team, Royalty Policy Committee

Problem

How do we reframe the site to meet user needs? (Full problem statement)

Understanding user needs

I conducted several rounds of user research that resulted in this vision statement.

“We are informing policy debates and raising public awareness by building the definitive source of timely and useful data about how the government manages federal energy and mineral resources, revenue, and disbursements.” (More about the vision)

The dots below represent users I interviewed grouped by how they accessed and used the data. They grouped into 4 user types: Question Answerers, Agenda Supporters, Storytellers, and Domain Learners. These user types informed the vision and drove all the decisions we made about the product going forward. (More about these user types)

Design implications

Before we reframed the website, it was a very static site based on the requirements of the U.S. Extractives Industries Transparency Initiative. (Blog post about reframing the homepage)

After learning that several types of users wanted to slice and dice the data without having to download a spreadsheet, we started iteratively working the website towards the ability to filter the data.

Early iterations

The first iterations of the filter tool were based on an old tool that internal users had asked us to bring back. It involved picking filters before seeing the data. In user research, we learned that people wanted to see the data before picking filters, so they could understand the scope of the data.

The second iteration attempted to group the data, but also didn’t provide enough visibility to the data for users.

The third version offered visibility to the data, but users didn’t quite understand how to drill down.

Final design

We ended up building this version where you can see all the data before filtering and add multiple grouping columns. We also added a download function after learning that users wanted to download just what they’d filtered the data to. It performed well with users and is still on the live website.

![

Outcomes

The reframing of the website and redesign resulted in:

• Improved usability
• Increased site usage
• More targeted downloads
• Improved accessibility
• Increased resources by giving us 2 contract developers to make further improvements

Learn more

You can read about the work I did at the Office of Natural Resources Revenue in my team’s blog.

The Maine Ballot

I haven’t had time to put together a detailed case study for this project. You can learn more about it in on the Civic Tech Chat podcast, the OpenMaine blog or my colleague’s blog.

Website: maineballot.org GitHub: Maine Ballot repository