How to Be a Good Designer, Not a D***

In Joyojeet Pal’s article, “The Fallacy of Good: Marginalized Populations as Design Motivation,” he states that we should “pay attention to what we do as a practice – designing usable products – instead of setting our goals at the transformative value we imagine offering to the user.” In other words, stay in your lane, fatuous interaction design saviors! He describes numerous “design for good” efforts as superficial, short-term experiments that serve primarily as professional development exercises for the designers, not helpful or even impactful interventions in underprivileged communities.

Numerous others within and without design have argued that many altruistic design efforts prove fruitless for a variety of reasons: because designers are not incentivized to build a deep understanding of the problems they are addressing, because the design challenge timelines are too brief to create meaningful change, because sometimes you don’t know what happened. You just circle back to an old stomping ground and realize that you can’t tell whether no one acted on your design ideas or if they were attempted but then withered away without the iterative process to improve and sustain them.

As a design student aspiring to create positive social impact, examples like PlayPump International and the High Line park in New York City engender both deep anxiety and optimism. Anxiety because all those projects had at least some unintended, negative impacts on the populations they were supposed to be benefiting, but hope because they show the power of design. We are not limited to creating better, more usable products because even the idea of trying to limit oneself to “just” improving usability is problematic. To paraphrase Jon Kolko of the Modernist design studio, our jobs as designers are to create artifacts and affect behavior, and cultures are defined by their people’s artifacts and the behaviors. Thus, Kolko argues, “Every design decision… contributes to the behavior of the masses, and helps define the culture or our society.” Our decisions are going to be transforming (in ways large and small) the lives and cultures of people everywhere, so we might as well concentrate on making those effects as positive as possible.

So moving right past “should we try to create change,” the questions becomes, “how do we go about creating positive change?” I have a couple arguments to make here which are by no means exhaustive of the possibilities, but which have been occupying me in the last few weeks. The first is universal and procedural: that designers must cultivate a deep understanding of the problem spaces they are working in through qualitative and secondary research. The second is that both long-term, structural change (e.g. shifting government regulations) and short-term harm-reducing interventions (e.g. corporate-sponsored charity and giving underprivileged people access to bourgeois services) are valid as targets of designers’ efforts.

Design Research Evangelism

An antidote to the problems highlighted above with superficial design-for-good solutions is rich, deep research. This means having open-ended conversations with all the stakeholders involved in one’s chosen problem area. Robert Hammond (one of the people behind the redesign of the High Line into a park) for instance, reflected that he wished he had asked residents living in Chelsea near the High Line at the start of the project, “What can we do for you?” rather than asking them more binary questions about what colors of paint they would prefer in their park. Then the mix of people walking on the High Line today would look less white and more like the population of Chelsea today, which is 30% people of color. Indeed, once High Line leaders did start asking, a resident suggested holding Latin dance parties there. The ¡Arriba! dance parties have been successful and well-attended by both local residents of color and people from outside the neighborhood.

In addition to embedded, qualitative research, using a tool like the Impact Gap Canvas can give you a good grasp of solutions past and present that have been tried in a given problem space so that you do not end up recreating old failures of exacerbating past traumas. Without doing this thoughtful and time-intensive legwork, designers trying to achieve social good are like drunken party-goers struggling to play pin the tail on the donkey. They might get lucky and hit the mark, but they’re much more likely to poke a hole in the wall or passersby.

What Should the Target Be?

In this blog especially, I am preaching to the choir in talking up design research, but understanding a problem doesn’t necessarily clear the fog about what one should do about it. For that, we ideate and plot our solutions on an impact-feasibility canvas. Here’s one I created to mapping the methods I’ll be talking about today.

Social Change Methods: Impact vs. Effort Required to Implement

Map Depicting Various Methods of Creating Social Change by Their Potential Impact and the Effort Required to Achieve Them

Government

At the top, right corner, the heavyweight of creating positive social impact is changing government programs and regulations. As Aneel Karnani argues in “Fortune at the Bottom of the Pyramid: A Mirage,” the best way to stop companies from selling harmful products to the poor is to impose and enforce government regulations prohibiting or making it harder to access those products. The best way to ensure that everyone has access to high-quality health care is to force the government to provide that access.

That said, changing laws, especially the ones that undergird fundamental systems in our societies, is incredibly difficult and often takes years if not generations. Many hard-working people find their ambitions and optimism ground to dust trying to bring about change in government. Given that reality, designers are right to sometimes make the choice to tackle harm-reducing, smaller scale projects that do not effectively challenge the broader systems that create mass inequities. The willingness to battle bureaucracy and inertia is a finite resource in all of us.

Consuming as Charity

So, let’s take a look at some less impactful but possibly still useful methods for creating change. First: publicized corporate charity efforts that encourage customers to buy certain products because a percentage of the sale will go to some charitable cause. Setting aside the obvious insincerity of many businesses’ philanthropic campaigns, the question is, can they do good? Should I, as a designer, lend my skills to those projects? Problematic though it is to reinforce the ideal of consumerism with all the human and ecological tolls it wreaks, I would lend a hand to some of them. Buffalo Exchange, for instance, a second-hand clothing store with a branch in Austin, gives its customers who bring their own bags to the checkout counter a token worth five cents. The customer can then choose which of three local charities they’d like to donate to and slide their token into the appropriate charity’s box. The three charities currently on offer in the Austin Buffalo Exchange are a local environmental group, a domestic abuse shelter, and a pet shelter. Does Buffalo Exchange benefit from being viewed as a socially conscious company? Undoubtedly. But they are also encouraging their customers to reduce plastic waste by bringing in reusable bags, educating customers about local charities (by asking them to choose which charity they would like to donate to rather than just pre-picking one), and to top it off, they have given over $728,000 to local charities since the program began in 1994. Will the Tokens for Bags program uproot capitalism? No, but it does good in its own way, at a small scale. That seems worthwhile.

“Bourgeois” Social Services

Next, let’s turn to the recent trend of creating high quality services for people experiencing homelessness. Since the early days or public workhouses, souplines, and other services for vulnerable populations, there has been a tendency to design products, services, and facilities meant to help underprivileged people to be, frankly, crappy experiences. This has partly, to be sure, been out of efforts to keep costs low to be able to help the most people possible, but it has also been the result of deliberate efforts to disincentivize people from getting too comfortable with charity. And the clients of these services realize this and often opt out of participating in them because they do not want to be treated poorly.

Lately, though, the news has featured more and more efforts to provide disadvantaged people with the same quality of service that the wealthy expect. One example would be a restaurant in Spain called Robin Hood that charges patrons for breakfast and lunch and then serves fancy, high-quality dinners to people experiencing homelessness. Another would be the Jon and Jill Kerr Conway Residence in Washington, D.C., an apartment building that opened in 2017 to 60 homeless veterans and 64 low-income adults. This beautiful building has a gym, on-site social services, free wifi, the works. And this is just one of a few of these projects popping up around the country. The idea behind these projects is that there is an unquantifiable but essential value to dignity and beauty that will be effective in helping a few underprivileged individuals in the long run. In fact, the idea is that those programs that help just a few individuals will be more effective in the long run at alleviating suffering than programs with lower quality interactions with many more clients.

rendering of beautiful apartment complex
A Rendering of the John and Jill Ker Conway Residence by Community Solutions

These programs are too new for there to be any conclusive evidence about their relative effectiveness, but I am curious to find out what will happen. They do not try to change the way in which modern capitalist culture causes people to build their identities around the products and services they consume and interact with. They do not address the threat overconsumption poses to the environment. But they do attempt to change the lives of individuals experiencing homelessness as well as the perceptions of their neighbors. Indeed, the architect of one of these lovely new apartment complexes for the formerly homeless, Theresa Hwang, said, “Especially as we get closer to downtown, people are always like, ‘I don’t want you to build a complex that’s going to have all these homeless people in it, I don’t want to live next door to homeless people… Architecture really helps sometimes by showing it’s not a ‘homeless project,’ it’s not a shelter. It’s an apartment building.” So perhaps these projects that emphasize beauty and dignity will bring about their own level of systemic change, if only to undermine the NIMBY movement.

As For Me…

Examining these cases of attempts at designing for good has only reinforced the nebulous and situational nature of my task as I choose where I should work after I leave AC4D. Government, large corporations, non-profits – they all have the capacity to help and hurt. There’s no escape from ambiguity, responsibility, and the exercise of personal judgment. How exhausting, and how divine.

 

Ideation to Improve Youth Civic Engagement

This week we focused on the ideation process for our Civic Engagement project. For a quick recap, our team (Adam, Mary Hannah, and Mariangela) focused on understanding how young adults without college educations go about engaging with their community and the government.

The insight and design pattern coding system
The insight and design pattern coding system

We started by applying an insight combination technique which consisted of combining our original insights with design patterns (a design pattern describes a current trend in other contexts, e.g. artificial intelligence).

How we categorized our ideas after our ideation sessions.
How we categorized our ideas after our ideation sessions.

Some of the design patterns that we used were the following:

  • Monopoly
  • Alcoholic Anonymous
  • Cards Against Humanity
  • Grindr
  • Google Drive

Insights that we used:

  1. Young adults need a mentor to negotiate the complexities of growing up.
  2. For young adults, the old ways of connecting with government are remote but nothing has arisen to replace them
  3. Political art provides an accessible starting point for young folk to develop points of view because it wears its bias on its sleeve and organizes facts into a narrative form.
  4. The service industry depends on a workforce that does not attain post-secondary education so that they can continue to pay them a minimum wage.

The combination of the above design patterns and insights allowed us to come up with over 200 ideas.

Ideas

Examples of rapid vignettes we drew during our ideation session.
Examples of rapid vignettes we drew during our ideation session.

So how might we encourage young adults to take the very first step to become civically engaged?

The following are three ideas that the team downselected to after the ideation session:

AustinWorks

Future me is the result of the need for young Austinites to have a mentor that can help them navigate political and professional landscapes. This mentorship would not only allow young adults to get training and find better job opportunities, but also become integrated into a community formed by individuals in similar circumstances. Research shows that having a higher income and more education leads to a greater likelihood to vote, so Future Me would move young adults further along that path to a professionally and financially secure future. 

Austin Youth Changemakers

Changemakers

Austin Youth Changemakers is the result of the recognition that Austin youth are inspired by self-expression and art. We hope to tap into this instinct, beautify construction spaces around Austin, and inspire Austinites to publically share their civic experiences by placing posters with examples of young adults who have created change. Some of the posters will also be educative about civic skills such as voting and contacting one’s elected officials. 

Contact Your Rep Butler

Cartoon Bellhop Man-01
Cartoon Bellhop Man-02 Cartoon Bellhop Man-03 Cartoon Bellhop Man-04 Cartoon Bellhop Man-05 Cartoon Bellhop Man-06 Cartoon Bellhop Man-07 Cartoon Bellhop Man-08 Cartoon Bellhop Man-09

Contact Your Rep Butler was designed to provide mentorship and training to enable Austinites to contact their elected officials. By exaggerating and having fun with the old-fashioned nature of calling someone on the phone, we hope to make calling your representative seem more accessible to young adults and other members of the public who would currently be reluctant to call an official.

 

Next steps

As we grappled with developing novel, fun, and engaging ideas that tied to our research, we often found ourselves stuck. What would actually work? Once we committed to our ideas and fleshed out the details in storyboards and vignettes, we began to question what is actually possible. What would get someone out of their comfort zone? What are ways our designs can provoke behavior change? Our next steps are to iterate on our current ideas, get feedback from the AC4D community, and look for youth to co-design solutions with.

 

Our asks

We would love your help ideating. Please get in touch with us through our emails (adam.chasen@ac4d.com, maryhannah.duhon@ac4d.com, mariangela.marin@austincenterfordesign.com). And if you know anyone between the ages of 18 and 25 that would be willing to work with us, please help us connect!

Rapid Ideation and Creative Problem Solving: Financial Modeling for Normal People

For this final week of Rapid Ideation and Creative Problem Solving, our professor Jon Kolko had a surprise for us. He asked us to incorporate features into our banking apps that would provide financial modeling services for users. Specifically, the app should be able to:

  1. provide a snapshot of your finances and their trends.
  2. allow you to analyze any specific transaction in any account to see if it is historically anomalous in the context of all of your spending
  3. provide a drop-dead simple “what if” modeling system based on “playing with” your recurring payment amounts, so you can see how changes in monthly spending impact your account.
  4. help you figure out what amount of money is she to spend at any given time.

Process

In order to satisfy those requirements, my classmate Adam Chasen and I first decided that the value we wanted our app to deliver was to encourage people to save more, to help them to avoid overdrawing their accounts, and to help them recover when they do outspend their income in a given month.

With that goal in mind, Adam and I brainstormed different scenarios in which someone might find themselves when the above services might be useful. Some of our scenarios included someone getting a new, better paying job, someone facing a financial crisis due to a surprising large expenditure, such as needing to get your car repaired, and someone who has just had a kid and so needs to shrink their existing expenses in order to support their larger family.

From there, we began to make a rough service blueprint for our apps (shown below) by mapping out what data point could actually signal to our banking apps that these changes had taken place. For instance, the app would be able to detect a rise in income if someone’s regular direct deposit amount increased, especially if it increased over a period of two months.

Service Blueprint for Banking App
Service Blueprint for Banking App

Next, we decided how the app would respond in each scenario in order to catch our users at times when they would be more likely to be inclined to actually want to use our budgeting and saving features. For instance, we decided that the app should send a push notification if someone made a purchase that would cause their checking to be overdrawn later in the month when other bills came due. In that situation, the user needs to take action to avoid an overdraft fee. On the other hand, if someone’s income rises, the app can wait until someone logs in to send them a congratulatory pop-up message about it that also urges them to put some of their new earnings into their savings account.

From there, we continued to map out how actions would bounce back and forth between users and the apps depending on the actions that users’ took (or didn’t take)

Ultimately, I decided to develop four flows demonstrating my apps’ features: Not Safe to Spend, Ways to Save, Adjust Budget and Over Budget. These were the flows I made paper prototypes for and conducted usability testing on.

Usability Testing Results

The three biggest takeaways from usability testing were as follows:

Kolko Ideation Last CritiqueKolko no way to know dayKolko Poor Path

Final Iterations (for now)

In the ultimate iterations of these flows, the biggest change was also the most obvious: I made digital versions of my screens. I also took into account my usability testing results in a few different ways. I made sure to depersonalize my language around the Ways to Save and Not Safe to Spend features so that my users would not feel attacked over their purchases. I made sure to always let people know what date it currently was so that they could judge how long they needed to make their budgets stretch. Finally, I rearranged the Ways to Save screen to make it more obvious for users that they should be clicking on the Ways to Save carousel first.

Here are the resulting flows:

Not Safe to Spend Flow
Not Safe to Spend Flow

 

Overbudget Flow
Overbudget Flow

 

Ways to Save Flow
Ways to Save Flow

 

Adjust Budget Flow
Adjust Budget Flow

Next Steps

If I were to continue this project, I would have made digital versions of the screens I designed that would have continued the Ways to Save flow. These screens showed the alerts the user would have received letting them know how much they had saved (if at all) by following their Ways to Save goals. These screens would have been delivered every week or every month depending on the user’s preference.

I also would have built out the flow that would have resulted if someone had pressed on “One-time bump in income” on screen 3.0 of the Adjust Budget flow.

In a more blue sky scenario, I would have loved to have created something that would let users make a specific savings goal (e.g. buy a new car) and then easily see how long it would take them to save up enough to accomplish that goal given their current saving habits and hypothetical savings habits.

What I Learned in Rapid Ideation and Creative Problem Solving

Since this is the last blog post of Rapid Ideation and Creative Problem Solving, it seems fitting to reflect on a few things I learned this quarter.

In this final iteration, I finally understood the value of developing and testing prototypes in low fidelity. Though my first versions of the screens above were quick sketches done with pencils, I was able to get valuable feedback from my participants about the language I was using and whether the layout I was using made sense. Since I was working in pencil, I was able to change my screens in front of my participants during the Q&A time following the think-aloud session, which enabled them to give me more feedback immediately.

I have a better understanding now of what my priorities should be as I’m designing user interfaces, namely that intelligibility needs to be prioritized over aesthetics. This means always making the path to completion obvious to users; they’re on that screen to accomplish a task, not explore (at least in the case of the Velocity Credit Union banking app).

As to the critiques, I am still working on organizing them in a way that is structured, targeted, and not frenetic, but I am better at saying what I need from the audience and setting up my materials in a way that enables them to give feedback. This will be a skill I’ll have to continue to develop as I continue to develop my vocabulary for talking about user interfaces and get critiqued by different groups of people.

Iteration 4 of the Velocity Credit Union App

After getting feedback about Iteration 3 of my Velocity Credit Union (VCU) app , I decided to take a step back by taking a better look at best practices in app design. Accordingly, I bought myself a copy of Web Form Design: Filling in the Blanks by Luke Wrobleswski and settled in for a good read with my pencil ready to mark down the rules of thumb that I had been overlooking while redesigning the Velocity Credit Union (VCU) app.

This was helpful in a variety of ways, but I’ll focus here on the two that had the most influence over how I redesigned my VCU screens for the 4th iteration of the VCU app.

Indicating Errors

In earlier iterations of my VCU app, I created many success screens, but I hadn’t put a lot of thought into how I should indicate when users had input invalid information into the forms on my app.

As you can see in the screen below (Iteration 3: Invite a Friend Incorrect Inputs, Screen 2), I highlighted the field with an incomplete phone number and called it a day. However, after reading Wroblewski’s writing, I realized that this error message could be much clearer.

For my redesign (see Iteration 4: Invite a Friend to P to P, Screen 8.1), I doubled the visual emphasis on the invalid phone number field by adding a red error message that states, “incomplete phone #.” In addition to drawing the eye more strongly to the problem field, this message more clearly communicates in context what has gone wrong: the phone number the user has input cannot possibly be correct because it is too short. This also implies the fix: the user needs to add the digits she skipped the first time round.

Iterations 3 and 4 of an Error in the Phone Number Input
                            Iterations 3 and 4 of an Error in the Phone Number Input

 

I considered also changing the size of this input field so that only a phone number with the correct number of digits could fit there, but this would have meant that I would have needed to separate out the phone input field from the email address input field. I ultimately decided that it was more important to make it absolutely clear to users that you could use your friend’s email address or phone number to invite them to P to P. Having separate input lines for both with some kind of radio dial (or other means of indicating you only need to enter one piece of information) would have added unnecessary visual clutter for an input that users will already be very familiar with.

 

Providing a Clear Path to Completion

My art background is in fine art, not graphic design. Consequently, all my prior training emphasized the importance of using the elements of art to achieve balance and coax the viewer’s eye to travel all over the canvas. In web form design, however, the goal is not provoke a leisurely investigation of the intricacies of a painting, but to enable people to accomplish their goals as quickly as possible with as little confusion as possible.

In Iteration 3, my flow for setting up a recurring transfer did not set up a clear path to completion. As you can see in Iteration 3: Transfer Every Month, Screen 1, the checkbox to indicate whether you would like this to be a recurring transfer is at the bottom of the screen, so you have to hunt for it. In the subsequent screens in the flow, you can see that there is no obvious way to take back that choice to tap on the “Make this a recurring transfer” checkbox. In the next screen (Iteration 3: Transfer Every Month, Screen 2), the user is presented with many possible actions. Should she click on the calendar? On the “Transfer every ________” drop down menu? The “on the __________” drop down menu? There is no visual hierarchy to help the user out. Moreover, if the user selects the correct option and taps on the the “Transfer every ________” drop down menu, it overlaps with the “Next” button, creating visual clutter and anxiety about whether you could accidentally hit “Next” before you’re done. Finally, “Next,” which is the default choice people would hopefully select after completing this form, is on the right side of the screen, forcing the user’s gaze to travel all over the place (See Iteration 3: Transfer Every Month, Screen 4).   

Iteration 3 Monthly Recurring Bill Payments
          Iteration 3 Monthly Recurring Bill Payments

For my redesign of this flow, I made many changes. First, I put a radio dial input at the top of the screen that defaults to a single transfer but lets the user immediately indicate that they would prefer to do a recurring transfer (See Iteration 4: Transfer Money Every Month, Screen 1). Selecting “recurring transfer” hides the calendar and gives you just one logical next step: to hit the “Transfer Every _________” drop down button (See Iteration 4: Transfer Money Every Month, Screen 2). Your selection there reveals just one new option: to click on a day on the calendar (See Iteration 4: Transfer Money Every Month, Screen 4). There is already a default selection that matches the day the user is filling out this form, but she can select another day in the month. Finally, I moved the “Next” button to the left side of the screen so that the user does not have to read the “Cancel” option before getting to the button they most likely want to use.

Iteration 4 Monthly Recurring Bill
Iteration 4 Monthly Recurring Bill

My other goal for this week, aside from iterating on my existing screens, was simply to build more screens to get a more comprehensive idea of what my app should look like in all its possible states. I concentrated on building out the Bill Pay section of the VCU app, which brought me up to a total of 191 screens in all my flows. Here are a few more of the new bill pay flows: 

Pay a Weekly Recurring Bill
   Pay a Weekly Recurring Bill

 

 

 

Pay a Biweekly Recurring Bill
  Pay a Biweekly Recurring Bill

 

 

 

Edit Recurring Bill Payment
 Edit Recurring Bill Payment

This coming week, I plan to tackle the Alerts section of the app, so stay tuned for that in Iteration 5.

Iteration 3 of the VCU App

For my third iteration of the Velocity Credit Union banking app, I changed up my usability testing methodology.

Not entirely – I still used the Think Aloud Protocol, which calls for users to literally say out loud what they are thinking as they accomplish a task. Studies have shown that though thinking aloud slows down users, it does not alter their choices as they accomplish a task. In other words, you can get an accurate picture of the choices people would make while doing a task even if you have them say their thoughts out loud the whole time. This is great for designers in that it allows us to get a lot of insight into where our designs are confusing or annoying people.

The other advantage of Think Aloud Protocol is that it is gentle on the wallet: you can get substantive results after testing with 5 users, and your returns (in terms of new information) diminish sharply after 10 users.

I did change my technique this week in that I organized my screens in a much simpler way, which allowed me to take better notes as people were testing out my app. This gave me much better results as I was able to ask my participants about their moments of confusion after they completed the tasks rather than having to piece together what was happening from my audio recordings.

The tasks I had my users test out were paying a bill to a saved payee, paying a bill to a new payee, paying a friend back for pizza, transferring money from your savings to your checking account, and setting up a recurring transfer.

As a result of my usability testing, I learned about quite a few problems with my VCU app. Here were the top three:

1. Poor Proximity and Visibility of the “Make a Recurring Transfer” Option

“I hit the 15th. How do I make it recurring?”

Details:

  • Users did not notice the small “Make this a recurring transfer” option on the main page.
  • Even if they did notice, they first clicked on the calendar icon and selected a date.
  • All users expressed that they wanted to be able to make payments recurring from the calendar screen without having to navigate back to Screen 6 of the Transfer Money Between Accounts Flow.

Recommendation for Fix:

  • Enhance the visibility of the “Make this a recurring transfer” box by making the text larger and checkbox larger.
  • Enhance its proximity to the date selection feature by placing it on the same screen as the calendar image.

Here’s what changed:

Transfer Flow, Iteration 2

Transfer Bad Version

Transfer Flow, Iteration 3

Transfer Good Version

2. Poor Mapping of the Person to Person Search Option

“Was John Smith already on the list?”

Details:

  • Users’ first instinct was to click the “Invite a Friend” button rather than searching among the saved contacts.

Recommendation for Fix:

  • Remove the “Invite a Friend” option from Screen 3 of the Person to Person flows, so users are forced to search among saved contacts first.
  • Instead, show the “Invite a Friend” option on the search results page so that users turn to that option only if their initial search does not turn up the person they were looking for.
  • Change the heading of the Saved Contacts list from “Saved” to “Contacts” to better suggest that the list includes all your contacts, not just people you’ve entered into this system manually.

Request Money from a Friend Flow, Iteration 2

Request Friend Bad

Request Money from a Friend Flow, Iteration 3

Request Friend Good

 

3. Search Results in Bill Pay Flow Do Not Appear Clickable

“Do I click on Search again? ”

Details:

  • Users found the payees they wanted in the Bill Pay flow, but then did not know what to do.
  • The current signifiers that the search results are clickable are insufficient.

Recommendation for Fix:

  • Add a chevron shape to each search result

Bill Pay Flow, Iteration 2

Bill Pay Bad

Bill Pay Flow, Iteration 3

Bill Pay Good

 

Other Flows

Those were the big shifts, but I also created or revised a number of other flows this week:

Set Up a Weekly Transfer Flow

Set Up Weekly Transfer

Set up a Biweekly Transfer Flow

Set Up Biweekly Transfer

Withdrawal Limit Charge

Withdrawal Limit Charge

Transfer Add Memo Flow

Transfer Add Memo Flow

Deposit Check Flow

Deposit Check Flow

 

I also revised my VCU concept model to reflect the changes in the information architecture of my app.

 

Asset 2

Tune in next week for Iteration 4.

 

VCU App Iteration 2: Usability Testing and Revisions

No flow plan survives contact with the user.

This week, I conducted put the first iterations of my VCU flows in front of three Bennu coffee patrons in order to test their usability. The method I used was think aloud testing, which basically involved asking my participants to say everything they were thinking as they tried to accomplish tasks using the VCU app. Every time they paused, I said a gentle “please keep talking” to get them started again. I had originally planned to test with more people, but these first tests turned up so many problems that I concluded I didn’t need to do any more testing.

Main Problem #1

The first big problem people encountered (quite literally) was that there were no signifiers on the login page to let users know what they should put in the input boxes.

Flow: Check Balance Screen 1, Iteration 1 Note the lack of labels for the input boxes
Flow: Check Balance Screen 1, Iteration 1
Note the lack of labels for the input boxes

One user said, “I’m clicking on the top one because it’s probably the username.”

The fix for this problem was relatively easy. I just added labels inside the input boxes.

Flow: Check Balance, Screen 1, Iteration 2
Flow: Check Balance, Screen 1, Iteration 2

 

Main Problem #2

The second big problem my participants encountered was that the main menu options were not clear.

Flow: New Bill Payee, Screen 1, Iteration 1
Flow: New Bill Payee, Screen 1, Iteration 1

Here are some quotes from my participants:

“I don’t see any that would suit depositing a check.”

“The names of the menu options were confusing. ‘Funds Transfer’ and ‘Bill Pay’ were really similar in my head.”

There were a few factors contributing to their confusion.  “Bill Pay” and “Funds Transfer” sound like they perform similar functions. The word “mobile” does not add clarity to the check deposit feature. 

To fix these problems, I did the following:

  • Changed “Mobile Check Deposit” to “Deposit a Check”
  • Changed “Transfer Funds” into two separate main menu options: “Transfer” and “Pay/Request from a Friend”
  • Subsumed “Credit Card” options within “Services” (in order to keep the full menu viewable without scrolling.

Here’s how it turned out:

Flow: Add Bill Payee Manually, Screen 1, Iteration 2
Flow: Add Bill Payee Manually, Screen 1, Iteration 2

 

Main Problem #3

The third big problem people encountered using the app occurred in the Deposit a Check flow. My participants had a hard time figuring out that the camera icon was a button that they needed to push in order to take a picture of their checks.

Deposit a Check Screen 5 The red box shows the offending button
Deposit a Check Screen 5
The red box shows the offending button

One user said, “I’m confused as to what this camera icon is for. I don’t really know what to do now.”

Flow: Deposit Check, Screen 5.25 Picture Taken
Deposit a Check, Screen 6 (Iteration 2) Note the lack of a camera button and the friendly green glow indicating that the app is about to take a picture of the check by itself.

I concluded that the button was too small and subtle over there in the corner, and I had originally planned to enlarge it. But then I thought, why not just have the app take the photo as soon as the check is aligned with the viewfinder.

I also edited my flows based on the feedback my classmates gave me, and then I added a few new flows. Take a gander:

Quickpay Payment Flow
Quickpay Payment Flow

 

QuickPay Request Flow
QuickPay Request Flow

 

Invite a Friend to QuickPay Flow
Invite a Friend to QuickPay Flow

 

Tune in next week for Iteration 3!

Iteration 1: My Redesign of the Velocity Credit Union Mobile App

Identifying issues with the existing Velocity Credit Union (VCU) app last week was just the beginning of our work this quarter in Rapid Ideation and Creative Problem Solving. The hypothetical information architecture concept map I created last week as a redesign of the VCU app underwent quite a few changes when I actually had to start putting together storyboards showing how people would use the VCU app.

For instance, I realized my original idea for the Bill Pay function was not really taking advantage of current tech. The existing VCU app has you manually enter in the information for every payee you want to add to your Bill Pay list. I simplified that process in my first hand-drawn sketch, but then I realized that I was missing out on an obvious and much easier solution: just allow users to select from a list of popular companies for which the VCU app would already have the billing information. Then, if someone needs to enter a more obscure company in manually, you can give them that option, but if they need to pay Southwest Airlines, for instance, the information for that company is ready to go. Below you’ll see what I came up with as the full flow for scheduling a bill pay. Flow_ New Bill Pay_ Screen 1

Flow_ New Bill Pay_ Screen 2 Flow_ New Bill Pay_ Screen 3 Flow_ New Bill Pay_ Screen 4 Flow_ New Bill Pay_ Screen 5 Flow_ New Bill Pay_ Screen 6 Flow_ New Bill Pay_ Screen 7 Flow_ New Bill Pay_ Screen 8 Flow_ New Bill Pay_ Screen 9 Flow_ New Bill Pay_ Screen 10 Flow_ New Bill Pay_ Screen 11

Flow_ New Bill Pay_ Screen 12

In addition to having the searchable list of common business payees, this flow differs from the actual VCU app in that when you select the date of the payment, a panel that actually looks like a physical calendar pops up. In the current VCU app, you just have to enter in numbers for the date. I chose to include that panel because it helps me to be better able to plan my finances if I can see when weekends or holidays are happening. That way I don’t accidentally make myself late on a payment because I scheduled it to go through on a Sunday.

 

I also built an updated version of the screens you would need to manually enter in a new bill payee.

Flow_ New Bill Payee Entered Manually_ Screen 1 Flow_ New Bill Payee Entered Manually_ Screen 2 Flow_ New Bill Payee Entered Manually_ Screen 3 Flow_ New Bill Payee Entered Manually_ Screen 4 Flow_ New Bill Payee Entered Manually_ Screen 5 Flow_ New Bill Payee Entered Manually_ Screen 6 Flow_ New Bill Payee Entered Manually_ Screen 7 Flow_ New Bill Payee Entered Manually_ Screen 8 Flow_ New Bill Payee Entered Manually_ Screen 9 Flow_ New Bill Payee Entered Manually_ Screen 10 Flow_ New Bill Payee Entered Manually_ Screen 11

This flow differs from the current VCU app in a few ways even after it forks away from where the last flow goes into selecting a common payee from the pre-made list. First, I added a confirmation message at the end letting the user know that they did successfully add a new payee (and giving them one last opportunity to review the information they put in). Second, after that confirmation message, I sent the user back to the “Saved Payees,” which has an alphabetized list of payees the user has paid previously using this system. In the original app the list of saved payees is organized in the order they were last used, with the most recently used appearing at the top. This means that if you add a new payee, it appears somewhere near the bottom of the list, making it hard to find.

Another flow I updated so that you do not have to manually enter in information every time you use it was the transfer funds feature. Now, in the current VCU app, the closest thing to being able to easily send money to a friend is the option to transfer funds to someone else who also banks at VCU, but you have to re-enter their information every time. For my redesign of the VCU app, I made it function much more like Venmo in that there is a searchable saved list of people you could send money to. Take a look:

Flow_ Send Money to Friend_ Screen 1 Flow_ Send Money to Friend_ Screen 2 Flow_ Send Money to Friend_ Screen 3 Flow_ Send Money to Friend_ Screen 4 Flow_ Send Money to Friend_ Screen 5 Flow_ Send Money to Friend_ Screen 6 Flow_ Send Money to Friend_ Screen 7 Flow_ Send Money to Friend_ Screen 8 Flow_ Send Money to Friend_ Screen 9 Flow_ Send Money to Friend_ Screen 10

This makes sending money much easier as no one, not even the person you’re trying to pay, is likely to know her routing and account numbers off the top of her head.

Next, I took a pass at updating the mobile check deposit feature of the VCU app. Here it is:

Flow_ Deposit Check_ Screen 1 Flow_ Deposit Check_ Screen 2 Flow_ Deposit Check_ Screen 3 Flow_ Deposit Check_ Screen 4 Flow_ Deposit Check_ Screen 5 Flow_ Deposit Check_ Screen 6 Flow_ Deposit Check_ Screen 7 Flow_ Deposit Check_ Screen 8

I primarily updated this flow by tweaking the UI. For instance, on the mobile deposit main screen in the original VCU app, every piece of information is centered and the same font. This means there is little visual hierarchy. In my version, I set the “Deposit to” information up and to the left, letting the amount of money you’re depositing occupy a larger and more central area. I did this because it seems like people are more likely to make errors entering in the amount of money their check is for rather than picking the wrong bank account. There are more ways to mess up when typing on a keyboard than when you’re choosing between your few bank accounts. Therefore, it made sense to me to make the check amount number larger and more prominent so that people have more of a chance of catching their errors before they try to deposit and get an annoying error message.

Lastly, I also took a stab at flow for checking you account balance. This was by far the shortest flow:

Flow_ Check Balance_ Screen 1 Flow_ Check Balance_ Screen 2

For this flow, I did a few updates. Most prominently, I moved your credit card balance out of the weeds of the “Services” Menu option and put it here, right on the home page of the app. I did this because keeping track of how much you’ve already charged this month is just as important for many people’s sense of their financial health as checking how much money is in their bank account at any given moment. If you’ve already got a $500 balance on your credit card, it doesn’t matter if you have $350 in your checking account. You still can’t afford those shoes you want.

Secondly, I updated the UI surrounding the header options. Instead of a button that says “Menu,” I used the common triple line symbol indicating a menu. Also, instead of a button that said “More” which weirdly gave you the same options as the top three Menu options (Deposit Check, Transfer Funds, Bill Pay), I included a “Log Out” button. Many people log in just to check their balances, so having a ready to hand way of logging out on the same screen on which you can check your balance made sense to me.

This is just my first iteration of the updated VCU banking app. I’m excited to get critiqued tonight so that I can rip apart many of the things I just explained to you and then make them better. Tune in next week to see the second iteration!

Adrift and Annoyed: Navigating Velocity Credit Union’s Mobile App

I always feel a certain self-righteous pleasure when I walk into my credit union. I chose local! I defied the big banks! I know the names and average check depositing speeds of my bank tellers!

I have always been happy with my credit union and its scrappy intent to serve its customers well. And when, occasionally, it lagged behind its bigger competitors in terms of amenities or convenience, I didn’t mind, because that moment of walking through Velocity Credit Union’s doors and renewing my connection with the people and ideals there made up for everything. And then, of course, it fulfilled the basic functions of a bank, a fact I’m now sure of since I created a concept map explaining how banks work.

Banking Concept Map

But having that baseline level of security about Velocity Credit Union’s abilities in its brick and mortar incarnation did not stop my trepidation when I began our Rapid Ideation and Creative Problem Solving class assignment: to analyze and improve upon our bank’s mobile app. Flawless execution of complicated infrastructure and keeping up with the latest technology has never been Velocity Credit Union’s strength: my first chip and pin credit card came a good third of the year after a family member who banks at Chase got hers.

My unease was well-founded. When I downloaded Velocity’s mobile app and mapped out its every link from the home screen right through to the legalese periphery, I found numerous breakdowns in the user experience (indicated in the concept map below by lightning bolt symbols) , some of them pretty catastrophic. For instance, if you click on the menu option for transaction, an option comes up for “Core Based Recurring…” This is confusing for two reasons: (1) you can’t read the full title of the link (Core Based Recurring Transfers) because it is too long to fit on the screen, and (2) what the heck is a core based recurring transfer? If you dig around in that section of the app, you can figure out that this is a vestige of an earlier version of Velocity’s app. This is the feature that shows the scheduled transfers you set up under that old online banking system. Why aren’t those scheduled transfers just integrated into the new transfer system?

Asset 1-100

Other sources of annoyance included the times links within the app sent you to third party websites (indicated in the map above by the circles outside the dotted line that marks the boundaries of Velocity’s app).  How come when I click “Secure Chat” it takes me to some chat page labelled “Office Survey”? Why do I have to go to Vanweb.Harland.net to order checks from my credit union? All these features should be included in the app itself.

The most egregious error is located at that leftmost lightning bolt in the map above, the one next to “Credit Card Services.” Clicking that link will send you to a page where you can apply for a credit card, but once you get there, you can’t get out without actually applying. The “Cancel” button doesn’t work. The “More” button does nothing. Even “Menu” doesn’t function. You’re just stuck staring at a credit card ad (or clicking through to apply for a credit card) until you restart your phone, forcing the app to go back to the login page. This breakdown is annoying not just because it is inconvenient, but also because it feels like a betrayal of the values of Velocity Credit Union. You go to a credit union because you feel like they’re less likely to take advantage of you. Appearing to have the intent to bully someone into applying for a credit card by making it incredibly cumbersome to back out of applying makes Velocity look like sell-outs. Even if this was a simple coding error, that appearance of avarice is damaging to the Velocity Credit Union brand.

Clearly, Velocity’s app has some room for improvement. The first step in doing so is to create a new concept map illustrating how its navigation and information architecture could be improved.

Asset 2-100

As you can see from the revised concept map above, I streamlined the app significantly in my redesign. Here are just a few of the improvements:

  •  All features (such as check reordering and chatting with a customer service rep) can be accessed within the app.
  • The credit card functions are on the Home screen rather than hiding away in a dead end in “Services.”
  • I distilled all the transfer options into two categories: “Transfer” (for moving money among your own accounts” and “Send Money” (for sending money to someone else’s account).
  • Instead of having a few different areas that provided different forms of help, I put the FAQ and chat feature under the menu option “Support.” I also combined the messaging and alert history screens and placed them in “Support” as well.
  • In the old system, the menu option called “Alerts” let you set alerts for when your balance is getting low, or an unusual transaction goes through, or (curiously) when your anniversary is. In my redesign, I got rid of the feature allowing you to set an alert for your anniversary or birthday, and then I placed all the features allowing you to set alerts related to banking in the “Settings” section.

My next step in the redesign will be thinking through scenarios people using the app might experience and designing the actual screens they will see (as opposed to what I did in this assignment, which was to redesign the overall architecture of the app). I look forward to updating you all soon!

 

Taking a Shower: Designing for the Impoverished

 

The readings this week, which all proposed different ways of thinking about poverty, led me to one conclusion about the attitudes and strategies I should bring to that issue as a designer: the poor are agents, not victims.

For the story I wrote, I chose to explore my role as a designer in relation to poverty through the lens of a small family trying to accomplish a small goal: taking a shower. As you’ll see below, I’ll be interrupting the story periodically with sections in italics explaining how the storyline maps onto the theories our class explored this week.

 

To Take a Shower

“Mom, I’ve got the resume hardcopy,” Katie called out as she opened her mother’s, Donna’s, front door.

“I think we need to get you a new printer.” Katie kept moving deeper into the house. “But you look super competent on here. I’d hire you. Mom?” Katie pushed aside the drapes covering the patio doors. No one in the backyard, and Rocio had forgotten to water the bougainvilleas again.

Katie paused, listening. “Mom? Rocio?” They should have both been here, getting ready for Mom’s skype interview. Mom had lost her job at the Department of Insurance months ago. If she needed something at the last minute, she would have sent Rocio, her personal caregiver, not risked being late by going herself.   

Katie heard a sound in the master bathroom. Were they laughing? “Mom, I’m coming in.” Katie barely rapped on the door before shoving it open. The door hit something soft then rebounded back at her.

“Katie?” her Mom said.

Katie pushed the door open more gently. Her mom was lying there in a robe on the ground. She was crying.

“Jesus, Mom, are you okay?” Katie pulled her mom up to lean her against the sink.  “What happened?”

“I fell.”

“Where is Rocio?”

Her mom started crying again. “I had to let Rocio go last week. I couldn’t afford to pay her anymore.”

“Why didn’t you tell me? I would have helped you myself.” Katie’s mom was disabled. She could still walk a bit, but getting into a bathtub and then lifting herself back out again was out of the question.

Donna shook her head. “You can’t afford that. And I don’t want you helping me take a shower. Neither of us needs that mental image.”

“You should have at least waited for me to get here. What if you had hit your head going down?”

“I can’t have dirty hair for my interview,” Donna insisted.

“We could hide it with a hat.”

“It’s a job interview, not the Royal Ascot.”

“We could angle you so the light doesn’t shine on you so much.”

“I can’t be trying to hide my greaseball head  and sound smart at the same time.

___________________________________

Here I am echoing the ideas of Dean Spears. His research shows that poverty reduces one’s cognitive control because it forces you to make tough decisions constantly, exhausting your mental resources. Therefore, it is our responsibility as designers to make products and services for the poor that demand the use of as little cognitive control as possible. This frees them up to use that mental energy on other tasks, such as figuring out how to navigate the path out of poverty.

___________________________________

 

“You’re being silly.”  

Donna’s face closed down. “No. If I don’t want my daughter to see me naked, I don’t want her to see me naked.”

Katie sat back on her heels. “Well, this isn’t going to work. You can’t be falling down when there’s no one here to help you.”

___________________________________

Roger Martin and Sally Osberg advocate for social entrepreneurs to help the impoverished by perceiving and then overthrowing unjust social equilibriums. Though I found their theories a tad paternalistic, I do think that as designers we need to use our observation and synthesis skills to discern unsatisfactory equilibriums and take action to change them.

___________________________________

“I could do it myself if the bathtub rim weren’t so high,” said Donna.

___________________________________

Here I refer back to Chris LeDantec. He states that our designs should ideally be accessible and emotionally resonant with everyone, rich and poor alike. It would be possible to make a more universally accessible bathtub; that just wasn’t a priority for the original tub designer in this story.

___________________________________

Donna mused, “Or if I had one of those mini-elevator machines that can raise and lower you.”

“Yeah, that would be nice,” Katie said. They both knew they could never afford to install something like that. “They make those plastic shower chairs that let you sit down while you take a shower.”

Donna shook her head. “I know. That doesn’t help us right now though.”  

___________________________________

This section calls back to the pro- capitalist ideas of  Allen Hammond and C.K. Prahalad. They advocate for tailoring products for the poor so that they are not locked out of the broader economy because businesses assume that they cannot participate. In this story, someone has created a cheaper alternative to a mechanical elevator seat, though Katie and Donna unfortunately do not have access to it right now.

___________________________________

Katie sprang up. “Wait, let’s try this.” Katie walked out the door and returned in a minute with one of her mom’s lawn chairs. Katie put the lawn chair down in the tub. “This way you won’t have to stand up the whole time or get up from sitting down.”

“Help me up.” Donna held her arm out. Katie pulled her up and maneuvered her next to the tub. Donna reached out to the chair and started to lift herself over the tub edge. She eased back. “No, it’s too hard to get around the chair arm. Get me a stool.”

___________________________________

Returning to LeDantec, he proposes that designers view the poor as more than just consumers. Rather, they have agency, knowledge, and skills to bring to bear to help co-design their own solutions.

___________________________________

“But I don’t want you tippling over mid-shower.” Katie leaned her mother up against the sink.

“Go get my desk chair. The arms on that raise and lower.”

Katie set the lawn chair by the toilet and went to get Mom’s desk chair. It wedged nicely into the center of the tub. Donna heaved herself up and Katie kept a hand on her elbow as Donna gripped the chair’s far arm and edged her feet up and over the side of the tub. Donna settled into the seat and raised the chair’s other arm up. She looked snug in her robe, squashed securely between the chair’s arms.

Katie handed the shower head down to Donna.“Are you good now?” she asked.

“Yup.” Donna was already turning the taps.

“Okay, I’m going to be right outside if you need anything.”

“I’ve got it now.”

___________________________________

Muhammad Yunus’s ideas sneak in here at the end. He states that designers should make products and services that work to remove the structural obstacles that prevent the impoverished from accomplishing their goals, like becoming healthier or opening a business. In this story, Katie and Donna have co-designed a solution to Donna’s immediate problem, she can no longer afford to pay for someone to help her take a bath. This enables Donna to tackle her other big problem, unemployment.  

___________________________________

Katie pulled the door shut. “Well, Mom, do you want to practice?” She affected a deep interviewer voice, “Tell me, what experiences have prepared you for this position, Ms. Butler?”

“Go away! I’m trying to shower!”

The End