hero image2.png

Making the Bay Area cleaner with UX design 

Client:

GRID Alternatives

My role:

UX research, UX strategy, business strategy, client management, principle UX design for grant application process

Duration:

3 week design sprint from August 6th, 2019 - August 23rd, 2019

Team:

Ilya Benjamin, UX Designer, Robert Charnley, UX Designer


Opportunity

 

Applying for a grant to upgrade a car is a pain.

Clean Cars for all is a program that focuses on providing money to income-eligible California drivers to retire their older, high-polluting car and replace it with a zero- or near-zero emission replacement. GRID Alternatives case managers are the bridge between Bay Area constituents and clean government resources. In addition to the great things that they do for San Francisco, its people, and environment, they assist a growing number of grant applicants that have issues in the grant application process. Our UX team teamed up with GRID Alternatives to enhance the grant application experience and help them scale a growing program.

Our main challenge was to reduce usability issues in the grant application process and improve the conversion rates from applicant to grantee by staying within the technical constraints of the BAAQMD design system and the Fluxx.io out-of-the-box features.


Approach

 

How do we design within the constraints and make multiple organizations happy?

When we received our project, it was necessary to understand how our client, GRID Alternatives, fit within the larger context of the clean air grant landscape. We learned that GRID was a subsidiary partner to the Bay Area Air Quality Management District (BAAQMD) and GRID didn’t own the digital products used in the grant process. To be successful on this project, we needed to understand the grant landscape and who the stakeholders were, what were the system constraints and limitations, and who were the target users and their experience.

Several considerations existed for this project: 

  1. Our client was GRID Alternatives, however the grant application portal is hosted by the Bay Area Air Quality Management District, who provides the technical infrastructure and is the primary funder of the program

  2. Bay Area Air Quality Management District contracts with a 3rd party vendor, Fluxx.io, to provide grant management support 

  3. GRID Alternatives provides project/case management for the program.

Constraints:

  • We had to maintain consistency with the design system of the Clean Cars for All program site

  • The 3rd party grant application software, Fluxx, had many limitations in their out-of-the-box software


Problem

 

“I don’t have the time or effort to complete this tedious application”

Users were apprehensive to complete the grant process due to the form’s unapproachable language, unclear communication of eligibility and what the grant process asked for, and inconsistent standards in the grant form. Due to these friction points, the grant experience was arduous, disconnected, and complicated.


Solution

 

Designing a welcoming grant application experience

Create a unified experience

Our team redesigned all unapproachable content between Clean Cars for All website and Fluxx.io portal. Landing page in the Fluxx application portal is one that teaches the user how to use the Fluxx portal.

Clarify ambiguous expectations and Fluxx features

Clearly state what the applicant will need to complete the grant process.

Improve learnability and trust with a new form flow

Simplify the form flow to improve trust, learnability, and to funnel qualified applicants through the grant process.


IMG_5727.jpg

Research

The grant application process is inconsistent, unapproachable, and difficult to complete

A usability test of the Fluxx.io grant application system and the point where users experienced a critical error leading to abandonment

A usability test of the Fluxx.io grant application system and the point where users experienced a critical error leading to abandonment

Contextual Inquiry & User Interviews

Completing the Clean Cars for All grant application is mostly completed on a desktop device. We spent the majority of our first week and a half getting to know the grantees of the program and GRID Alternatives case managers. We asked a lot of questions, attended an Oakland Clean Cars for All event, and began to collect information into post-its for eventual affinity mapping.

Usability studies

We created a research plan, conducted two remote usability tests, and a third usability test in person. We tested understandability of the Clean Cars for All website versus two similar websites, we tested three additional goals in the Clean Cars for All website, and conducted usability testing of the Clean Cars for All application in Fluxx.io.

Key observations

  • The Clean Cars for All website is an easy site to navigate, however it was difficult for users to quickly understand if they were eligible for the grant and what to expect in the grant application process.

  • The third party grant system, Fluxx.io, had significant usability issues, with 100% of testers having non-critical issues, and 33% of testers abandoning the application altogether.

Our design team attended the Oakland Clean Cars for All event and conducted interviews with grantees that have completed the grant process and upgraded their vehicle to an eco-friendly vehicle

Our design team attended the Oakland Clean Cars for All event and conducted interviews with grantees that have completed the grant process and upgraded their vehicle to an eco-friendly vehicle

Our team conducted contextual inquiry at the Oakland Clean Cars for All community event

Our team conducted contextual inquiry at the Oakland Clean Cars for All community event

Our team mapped the user flow and journey to refine our understanding and determine next steps for synthesis

Our team mapped the user flow and journey to refine our understanding and determine next steps for synthesis


Affinity Map

Our Findings

A lesson in what makes us human

We invited our clients, GRID Alternatives, to join our team in a co-design session. In that session, our clients and our team completed an affinity map, empathy map, and journey map. From that meeting, we got a much deeper picture of our target user and began to deeply empathize with them. A memorable quote from our empathy mapping was:

“My mother was diagnosed with cancer and I have to drive her to chemo.” 

This quote became our north star and guided the creation of our archetype user. Our archetype user, the Discouraged Decider, was someone who:

  • Is time-constrained

  • In need of a vehicle upgrade for security and reliability

  • Needs support with involved applications

  • Listens to the TV and radio

  • Is Goal-directed

  • Needs high return on investment on new activities

The result of our meeting was a convergence of information that helped us identify the key pain points that would be the basis of our problem and hypothesis.

Our client-partner, Vanessa, affinity mapping alongside our team

Our client-partner, Vanessa, affinity mapping alongside our team

Our co-designed empathy map

Our co-designed empathy map

A synthesis of our two target users

A synthesis of our two target users


new pic - design.png

Design

Making the Clean Cars for All application a friendlier and approachable experience

 
 

Eliminate unnecessary steps, make language approachable, give the user all opportunities to succeed in the grant process

The current grant application process. Friction points are denoted in red.

The current grant application process. Friction points are denoted in red.

arrow
Our proposed grant application process addresses pain points and removes friction.

Our proposed grant application process addresses pain points and removes friction.

Pragmatic form design and UX writing

We front-loaded the grant application form so users can confirm their eligibility at the beginning of the grant application process, instead of needing to complete five separate actions before confirming eligibility. We redesigned the landing page experience to so that the user feels welcomed and is taught how to use the Fluxx.io application. We also introduced images to several of the application pages so users knew how to complete the application, knew what to expect, and had the resources available to receive help. 

Revising the existing form flow was an excellent immediate solution. A well-researched and well-tested form laid the groundwork for our long-term solution: scaling the application for a growing population of applicants. By re-designing the Fluxx application, we were able to work around limitations that the Fluxx.io third party vendor presented.

Key improvements

  • Simplified flow so the user could quickly confirm their eligibility

  • Improved experience for users looking to understand what to expect

  • Reduction of all critical errors by 100% with the introduction of

  • Reduction of non-critical errors by 60%

Confirming eligibility first

Users are greeted with language that confirms they are in the Clean Cars for All Fluxx 3rd party grant system.

Principles used:

  • Be concise

  • Begin with the objective

  • Make the copy consistent

  • Write in the active voice

02 aagain.png

Welcoming and approachable language upon confirmation

Using UX writing and matching language between the system and the real world, we introduced more colloquial language and made it apparent within the Fluxx.io’s system settings to let the user know if they are eligible or not.

We also removed demographic questions because it caused unease and distrust when asked so early in the application.

Principles used:

  • Make the state of eligibility clear

  • Match language used in the system with the real world

  • Write in the active voice

  • Arrange form fields from easiest to hardest

01.png

Avoiding phishy emails and lessening distrust

Once a user creates an account, they are then asked to confirm their account via an email that is autogenerated from the Fluxx.io grant application system. The previous version of the email language resulted in 100% of usability testers being uneasy in clicking the link because the email looked like it was a phishing email. We redesigned the email language to be approachable, remind the user about what they are doing, and providing cues that this email is part of the grant process.

Principles used:

  • Design for trust

  • Recognition rather than recall

  • Demystify language by removing acronyms and writing out the full words

  • Match language used in the system with the real world

03 again.png

Removing barriers by creating a user guide

When users confirmed their application via email, they were dropped on a page that was extremely content heavy with non-accessible 14px font size. 100% of users who tested this page commented that it was too much information, not legible, and not useful. Due to restrictions in the Fluxx portal regarding how content can be displayed, we created a user manual that was rendered in the portal as separate images. We also created alt text to be compliant with WCAG 2.0 accessibility guidelines.

Principles used:

  • Heavy usage of imagery

  • Legible and accessible text

  • Friendly and understandable language

  • Conform to the brand guidelines

  • Focus on the task

  • Be specific

04 new.png

Making the application portal the go-to place for all information needed by the applicant

The Clean Cars for All application portal had limited information about the grant process. We heard from users that because the grant process takes a couple of months, that it was more efficient for them to call the GRID case managers than searching around on the Clean Cars for All website and application. To improve the scalability of this program and to reduce the need to call GRID case managers, we created additional content regarding what to expect throughout the entire process.

Principles used:

  • Heavy usage of imagery

  • Legible and accessible text

  • Friendly and understandable language

  • Conform to the brand guidelines

  • Provide useful links found on the FAQ section of the Clean Cars for All website

  • Draw the eye with colorful content blocks and a timeline of grant activities

image change.png

Working within the constraints to serve the Bay Area

We spent a few hours looking through the Fluxx.io community support website to understand the opportunities and limitations of this 3rd party system. From our understanding, we could change button colors, add additional form fields, and insert images. We used these opportunities to make buttons more visible and consistent with the Clean Cars for All brand. We used the same principles from the user guide Fluxx portal page and created image snippets that explained how to edit, save, and submit the application. We also made the document buttons more discoverable by changing the buttons from an outlined button that offered medium emphasis to a contained button for higher emphasis as they use a color fill and shadow. While hierarchy and placement were limitations, we did find the discoverability of the document upload buttons increased by 70%.

Principles used:

  • Stack form question and form field on top of each other instead of side by side

  • Buttons should be easy to find among other elements, including other buttons.

  • Buttons action and state should be clear

  • Text fields should stand out and indicate that users can input information.

  • Text field states should be clearly differentiated from one another.

  • Text fields should make it easy to understand the requested information and to address any errors.

image change2.png

"We are incredibly impressed. We are going to change the way we work with our clients"

This design project culminated with overwhelmingly positive feedback from our client, GRID Alternatives. They were excited to receive recommendations that could be implemented immediately, and were delighted at the creativity we demonstrated to work around the limitations of the grant system. They also appreciated our engagement with their partnering organization, BAAQMD, and expressed appreciation with being involved in a project that affected them directly. 

What’s next?

We looked at the bigger picture and understood that the major limitation in implementing changes was insufficient funds for BAAQMD’s software engineers. As part of our recommendation, we recommended a partnership with the Code for San Francisco non-profit civic-hacking organization. With Code for San Francisco’s help, we recommended that the following changes be implemented:

    • Implement changes to the content to improve engagement and satisfaction from target users

    • Introduce imagery and more iconography to improve satisfaction and learnability of the program

    • Implement new flow for the Fluxx portal to reduce burden and effort of learning eligibility

    • Pair modifications we made with a robust email campaign

Key takeaways

When in doubt, communicate with the client

We hit a few obstacles when it came to understanding our users and the grant application process during the first week of our sprint. Due to the intricacy of the organizations behind the Clean Cars for All grant, we were running in circles and going too deep in the weeds in trying to understand the problem landscape by ourselves. We course-corrected as soon as we involved our clients in the conversation. We gave them room to teach us about what they know best, their business process, the landscape, and their clients. Once we increased communication frequency, we were able to move speedily through the UX process.

Testing early and often

We were, at first, unsure how to test the grant application. It required account creation, email verification, and uploading of personal data. In week two, we finally tested doing the application ourselves and found a few resources that allowed us to conduct baseline usability testing. With grit and persistence, we were able to have three usability testers show us the pain points in the application system.

 

university

Reimagining the University AI Assistant

The project

This was an entrepreneurial idea that was iterated across four courses within a team-based graduate school setting. The four courses that developed the context for this project were:

• Software Product Definition

• Requirements Analysis

• Software Product Strategy

• Software Economics 

When/Where:

Carnegie Mellon University, Masters of Software Management

October 2018 - May 2019

Team

Karl Enguerra, Apple Engineer

Junhan Chen, Language Technologies Engineer for Siri at Apple

Shreya Rawal, Senior Technical Consultant at ServiceRocket

Sid Ramesh, Data Scientist at Microsoft

My contributions

User interviews, customer segmentation, market analysis, business model canvas, requirements analysis, competitive analysis, value proposition, technical architecture, marketing strategy, software economics, presentations, storytelling 


The higher education space is underserved

The Registrar’s Office plays a critical role in the operations of universities in the United States. It manages and distributes information to people across the university, for a typical week in a Registrar Office with 4 staff members in a medium size university:

  • 80-150 messages and tickets from all over campus

  • Toward beginning of quarter, additional 50-150 emails / tickets regarding course & schedule,  50-150 emails regarding grad admission, per day

  • Toward end the of the quarter 100-200 messages regarding degree progress for graduation

Most of these requests are repetitive. As a result, students, faculty and staff have to wait days to weeks for a response from the Registrar’s Office because of the use of manual solutions and inefficient tools. 

 
fishbone
 

AIUR’s differentiator is that it offers deep specialization in university data

There has been a boost in machine learning, deep learning, and natural language processing (NLP) based solutions in education. The education-based AI market is projected to grow from $537.3 million in 2018 to an expected $3.6 billion by 2023, indicating that stakeholders in the education space are increasingly becoming more open to mining and monetizing big data.

Despite the growing opportunities, an AI-powered intelligent assistant targeted towards the education industry is uncommon. While many of the current players have unique advantages, there is currently no “de facto education registrar assistant”, while other products are either service-based companies which do not specifically target Registrar Offices, or are other companies mainly focused on sales and marketing.

AIUR, therefore, will focus on differentiation by increasing customer willingness to pay relative to rival’s offerings with the deep specialization in understanding university data and the ability to extract immediate value with that data through our AI-powered platform.

AIUR’s edge will principally be vertical, outperforming rivals’ products on dimensions for which customers would agree that “improved understanding of the higher education space is better.” 


What are our hypotheses about taking AIUR to market?

Hypothesis 1

We believe that if AIUR is successful in its ability to understand university data, then AIUR will enable universities to save money by its ability to provide answers to frequently asked and redundant queries. This in turn will free up the Registrar's Office Staff hours allowing them to work on non-repetitive tasks instead of needing to increase their resources to address increasing demand.

H1.png

Hypothesis 2

If AIUR is able to access university data at any time, then AIUR will significantly lessen the response time due to a 24x7 availability to populate answers with an AI-powered search for frequently asked questions.

H2.png

Hypothesis 3

If AIUR is accurately priced, then AIUR will be priced based on student population size.

H3.png

architecture

What does AIUR look like under the hood?

AIUR provides building blocks for any university to organize its large volume of unstructured data and deploy a smart assistant that its students, faculty, and staff can interact with at any time. The minimal viable product of AIUR offers personalized, accurate answers to university constituents’ wide range of questions.

The primary goals of AIUR are to:

  • Create a product that leverages Natural Language Processing (NLP) and an API platform-as-a-service (PaaS) specifically for the higher education industry.

  • Simplify the experience that university data providers undergo to securely and easily access and distribute data for university-related projects

  • Provide self-service options for customers

  • Provide access to internal university databases

  • Expose core data to internal users in a controlled manner

  • Expose selective data to external users in a controlled manner


AIUR: Offering personalized, accurate answers to university constituents

soln.png

AIUR is a fully compliant PaaS solution providing building blocks for any university to organize its large volume of unstructured data and deploy a smart assistant that its students, faculty, and staff can interact with at any time.

The goal of AIUR is to offer personalized, accurate answers to university constituents’ wide range of questions by leveraging cutting edge machine learning and natural language processing.


What is our product release cycle and MVP?

We went through a planning poker exercise, translated effort into time estimates and developed a release plan.

 
mvp.png