The first step to ship my TD Mobile Banking App Re-design: sizing

This quarter, I am returning to my redesign of the TD banking application for my product management course. In this course, we are shifting from user-centered designer to product manager. We will ask ourselves what it will take to actually build this product, how do we communicate with developers to determine cost and length of time, and then, eventually develop a roadmap to an MVP. In this blogpost, I am going to discuss my process to size the banking application. This means, I will break down the banking app into unique features, components and controls (to be discussed below) in order to have a discussion with a developer to determine how long the product will take to make. More generally, I am now focused on how to ship my product (now that I’ve determine what I should make).

This blogpost will include:

  • Identifying unique features, components, and controls
  • Documenting the system
  • Sizing
  • What I Learned

    Identifying unique features, components, and controls

My first step in determining what it will take to ship my product will be to move from the ‘blue sky’ thinking of design to the grounded land of ‘constraints’. I have heard from many designers that conversations with developers is often a ‘downer’ as they say give their perspective on what’s possible given budget and time constraints. Of course, every developer is going to provide a best guess (which will be wildly inaccurate) but will at least give an approximation to work from. In order to prepare myself for this conversation, I had to re-analyze my system using a new framework: where are there unique features, controls and components in order to help develop a way to describe everything to an engineer as well as look for opportunities for efficiency.

To do this, I first posted up all my flows so I could get a zoomed out perspective of the entire application. I then searched for all of the features (green stickies). This was challenging since I didn’t have a strict definition of a feature. I spoke with several mentors and tried to ad-hoc synthesize what I learned. I decided that features are well-defined features in which users accomplish whole or partial tasks. For example, when a user is within the Transfer money flow, they add an external account. At this point, I assumed that this was a feature.

Posting up the flows

Then, I scanned my system for unique components and controls. These are elements users interact with in order to accomplish a task. The challenge for this was to find all of the industry standard terminology for each component or control. I learned that some of the ones I made in my application were not actually standard.

Documenting the system

After I finished identifying the unique features, components and controls, I zoomed back into the details of my system. This involved removing all of the elements I highlighted in green and orange from their context so that I could record a description of each in terms of the information they include, where the information comes from, as well as how it fits into the larger system. This process helped me to think about my banking application from a new perspective. I had to ask myself how a developer might see think about element. The record I am including below represents my best guess the entire inventory of unique features in my application. After I met with a developer, I learned that in some cases I did not include a feature I should have or that there were sub-features within a feature I had already named. For example, in I discovered that in general, any form had to interact with APIs outside of my system. I did not realize that before.

System documentation 6 System documentation 5 System documentation 4 System documentation 3 System documentation 2 System documentation 1

Transfer 1 Transfer 2 Transfer 3 safe to spend 8 safe to spend 7 safe to spend 6 safe to spend 5 safe to spend 4 safe to spend 3 safe to spend 2 Safe to spend 1 settings Quick Pay 3 Quick Pay 2 Quick Pay 1 Deposit check Alerts:Notifcations 2 Alerts Notifications 1 Check balance Edit Bill Error Login


The final step in this process was to meet with a developer. This was an opportunity for me to learn what goes on in the ‘black box’ – or the system behind my wireframes. As I build my design, I knew was either ignorant of typical bank application features or made many assumptions when I built the safe to spend feature.

Turns out I was right on both accounts.

During my meeting, I learned a lot about how simple flows that I assumed were old hat by now like authentication was actually quite complex. It took way longer (80 hours) than I thought it would. This is often how it went as I showed the developer all of my flows. He also exposed me to some important vocabulary. For example, my interaction with the developer pushed me to begin trying to understand APIs a lot more. My goal will be to be able to explain what an API is to the class at some point (hopefully as we present tonight).

In total, my banking application will take 218 days in total to build. Of course, this estimation is wildly inaccurate. The developer repeatedly told me he was padding his time because he did not know what variables would come up. He constantly talked about how risky many of the features would be and that he could not predict all the ways it could go wrong. Below is a detailed list of how long each flow will take as well as particular notes on different features. Below that, I have included all of my flows.

Sizing Documentation – Sheet1

What I Learned

I have been reflecting on this experience so that I can take away meaningful insights. First it was a challenge to be able to even determine how to describe my banking application not from the perspective of a user-directed flow. But, after working through this process, I have begun to form some theory.

First, I believe that features are made up of forms and controls, as displayed in the concept map below.

digital elements

Second, forms and components interact with humans and features interact with data. Both combine to accomplish flow tasks. The concept map below illustrates this concept.

Nested features

Third, my banking application is a series of nested features and it is my goal to be able to explain it on all levels. When speaking with my developer, I need to know all of the features as well as the nested features that can be reused over and over again. Below is a concept map that illustrates nested features following the transfer flow I spoke about above.


How to have an impact on identity development: an untested theory

As I write the first blogpost on theory for my last quarter of AC4D, I must start with a disclaimer:

What you are about to read is purely theoretical. It has, of yet, been untested in the field. Any semblance to truth or facts are incidental. Please read with caution.

Keeping this disclaimer in mind, the reader should know this blogpost will be a discussion of how I am making sense of the articles I read housed under the headline “The Best of Intentions”. I will first discuss a framework for how I am understanding how a person might develop their identity according to design theory. Second, I will pontificate on ways an Interaction Designer might use his skills to build products that have an impact on identity development. I will conclude with the kinds of projects I might value as move forward in my career.

Identity Development Framework

The 15 articles we read these last two weeks focus on particular kinds of actors that are within/have impact on the build environment: design practitioners, interactions designers, design educators, design clients, marketers, MNCs, bleeding-heart consumers, and economically and socially disadvantaged populations. I was not satisfied cleaving this conceptual space as if all actors that we are discussing aren’t just humans within a larger socio-historical construct. Namely, from a design theory perspective, all of these actors have been impacted by the human-created world. Designers, though they self-importantly claim they can have a broad impact on the world, are also subject to the same dynamics at play as does as bleeding-heart consumer or an economically disadvantaged person (though, designers do have more power and privilege).

Looking back to first quarter’s theory course, I recall Vitta discussing how consumers project their identity onto the material world. He says that there is a “…loss of identity for the individual who is submerged on one side in an avalanche of goods” and that, “…he or she is constrained to use these goods not for functionality but as images of himself or herself to be projected toward the outside world as the sole contact with others.” This calls to mind Phy’s critique of (Product)Red. (Product)Red is a charity campaign in which consumers purchase consumer goods for a higher cost so that companies like Gap make a profit and what remains goes to AIDS charity in Africa. Phy says that, “”…consumers are sold on the ideas or commodities that exemplifies what they want to represent in their society through means of materials they own. With this in mind, the (Product) Red campaign takes on a … tactic to encourage consumers to purchase their products as a means of ‘doing good for the world.” Thus, a person’s identity is developed through their consumption.

On the other hand, one can see that a person’s identity is developed through their choices of what and how they produce. This is evident in the various discussions in the articles (as well as all year long) about the importance of using theory to inform my choices of projects as a designer. Of course, this can be seen from the perspective of the impact that the decisions a designer has on future users. But it also about how I may identify as a designer. For example, Pal says that, “practice working with atypical user populations or use-case scenarios, offers benefits to designers…making us more well-rounded…and attractive.” Thus a person’s identity is also developed through their production.

As you can see in the concept map below, moving further from how production and consumption constitute a person’s identity, we see that a person’s identity is also shaped by their relationship to giving and receiving. I define giving and receiving as the relationship a person has to the things they produce and consume. It is the emotional casing that an individual has about the things they produce and consume. Take the above example of (PRODUCT)RED, well-intentioned consumers make the choice to purchase more expensive products because they believe it is good to give to charity as well as purchase (potentially useless) stuff. This is also a discussion explored in an article by Karani in which he critiques the idea that selling to people at the bottom of the pyramid (BOP) should be seen simultaneously as lucrative and as a way to eradicate poverty. However,

The poor are vulnerable by virtue of lack of education (often they are illiterate), lack of information, and economic, cultural and social deprivations. A person’s preferences are malleable and shaped by his background and experience. We need to look beyond the expressed preferences and focus on people’s capabilities to choose the lives they have reason to value.

This can also be seen in the example cited by Anderson wherein homeless people sell “Street Spirit” for $1 instead of just asking for money. The theory is that people feel differently about giving to the homeless if they get something in return.

Of course, a person’s relationship to giving/receiving is informed by large systemic issues involving social, economic and ability factors. However, people are people and my theory is that one’s identity is developed through the ways in which they produce and consume, how they feel about giving and receiving and are informed by the larger systemic constructs out of their control.

Blogpost Concept Map

How Interaction Designers Might Use Their Skills to Shape Identity

As an interaction designer who might shape identity development, I will present three design pillars. The first design pillar is that of competence, or the belief that a person has that they can do _____(fill in blank with any skill). The second pillar is that of connection, or the ability to connect otherwise disparate entities. The third pillar is that of inclusion, or the ability to make all individuals part of a whole. I believe I can apply these three pillars to the way I outlined identity development to have positive (or negative) impacts on users. Ultimately, I believe that if I design using these three pillars, I can use interaction design to help more people have access to higher qualities of life.


The need for competence starts with how a person either does (or does not) consume and produce. Take Hanson’s belief that because the internet is an unlimited supply of information, “..people become confused or distrustful, they resort back to their basic impulses, their instinctual drive to be tribalistic and self-absorbed.” In this case, Interaction Designers have had a negative impact on a person’s sense of competence. However, more positively, according to Sen as quoted by Karani, designers can help build up a person’s competence helping more people have access to, “basic education, elementary health care, and secure employment are important not only in their own right, but also for the role they can play in giving people opportunity to approach the world with courage and freedom.”


The need for connection is between people, a key problem Interaction Designers can impact. Take the example of New Story highlighted by Peters in which people donate directly to a family in Haiti. Donors can watch as the project evolves. The cofounder of New Story is quoted to say that keeping the process visible was that, “trying to provide the most transparent experience to the donors, that also helped us provide it to our partner and our builders.” Keeping all individuals connected help to change a donor’s relationship to giving change and led to a super successful campaign.

Connection is also present in an article by Gordon and Papi Thornton in which they describe more effective ways to train future designers and have a positive impact is that they need to “promote a full understanding of a problem and its context to ensure that students understand what is working, what isn’t, where the gaps in impact lie, and they they might plug into existing efforts to solve…problems.” Students (anyone trying to solve problems) should try to learn about the (lack of) connections that are currently at play before innovating.


Inclusion (or lack of it) is felt through identity development. I believe it is an Interaction Designer’s role should learn from the mistakes made when designing the High Line and ask if the design, “Is…even something you want?’ Going out and getting permission, and then having the community shaping every ask, has [to be] critical.” It should be the role of researchers, according to Hempl, “…to allow subjects– users, customers, people — to speak for themselves.” It is incumbent upon designers to include all stakeholders when making design decisions, and look to those who are the least included to build inclusive decisions.

I believe that as an Interaction Designers should have an impact on a user’s identity development by developing designs around competence, connection and inclusion. The theory is that as Kolko says, designers, “…build culture through our objects, services and systems as we define behavior through interactions.” Interaction Designers may have a positive impact on a person’s identity as they change behavior around consumption, production, feelings about giving and receiving and ultimately, the larger systemic issues that constrain us all.

Possible Future Projects

As think about applying the theories I’ve developed at AC4D, I imagine the future ideal projects I may want to work on. Broadly speaking, I believe that if I design with the above pillars so that I may have an impact on identity development, I will help more people have access to higher qualities of life. I believe that people will be able to have access to more meaningful and supportive communities, quality of life services such as health care and education and the privilege to plan for future-oriented action.

As I said in the disclaimer, none of this has been tested but it sure as heck makes me excited to see what happens once I leave our small school and try to practice what I preach.



Go-To-Market Plan: KeyUp

Over the past 8 weeks, team MMA has been clarifying and de-risking KeyUp, a service that connects young adults without college degrees to middle-skill careers. We have co-created with young adults, interviewed stakeholders, and found influencers who have been actively seeking opportunities to work with us. We have found that there has been a lot of movement around this problem space. From Texas Workforce developing a strategic action plan to finding out that Impact Hub’s newest accelerator is focused on workforce development, we feel confident that we are building a solution to a problem our stakeholders are desperately seeking.

Co-creating KeyUp with young adults
Co-creating KeyUp with young adults

In this past week, we met with key players in the community who were practically ready to start showing KeyUp to their clients. This has had two consequences for our team: 1) we feel it is urgent to develop a draft of all of the wireframes for our system and 2) we have had to take time to reflect on whether or not this is something we believe we want to continue past 4th quarter. Of course, these are awesome calls-to-action. We know that we can have a positive impact in a way that can help many people and are proud that the research we started in October about civic engagement has inspired us to find something worth creating.

Representation of middle skill careers created by Youth Build
Representation of middle skill careers created by Youth Build

How fortunate, then, that this week we developed our go-to-market plan. It was all about taking our imagined solution one step closer to a realistic state of existence. We have a timeline of product development to shoot for, a potential budget, and a better sense of our competition. We are also prepared to rebut what our naysayers may come at us with as we thought about 30 potential critiques of KeyUp and how we might respond. This has been a helpful exercise as a team because it has forced us to get deeper into the details as well as help us get even more aligned.


We are excited for our last class as we develop our pitches. We will be using our concept and the go-to-market plan to compete for a $2,000 prize at EdTech Fast Pitch on March 1st. We will also have to determine as a team if we should apply for Impact Hub’s Workforce Accelerator.

We would love your help in preparing our presentations and wireframes. We would love critical feedback. We know that’s the way the AC4D alumni expresses its care and support! Email us at

KeyUp: A recruiting service for young adults to find middle skill careers

This week was a turning point for our project. After last week’s flurry of stakeholder outreach , our experiments this week laid to rest the last of our concerns about the fundamental desire on the part of working young adults to connect with training programs and services to help them get through school. Our meetings with stakeholders in person or over the phone also confirmed their interest in a digital service to help training programs and non-profits to connect with young people. With that out of the way, we created paper prototype interfaces and continued to develop our landing page.


This week, these were the hypotheses we tested in order to de-risk the development of our service:

  1. If stakeholders believe there is a need for our service and will support it, then they will express that in our meetings and follow up with us afterwards.
  2. If our target users are interested in our product, they will agree to meet with us to co-create an app interface for our product.
  3. If our target users attend recruitment meetings for Capital Idea (a non-profit that gives people scholarships to get training for middle-skill careers), they indicate robust interest in getting to middle skill careers and using programs offered by local non-profits to do so.

To investigate those assumptions, we conducted the experiments detailed below.


Experiment 1: Stakeholder Outreach, Meetings, and Follow-up

To address the risk that stakeholders in the job training/employment community might not support our project or see how it could integrate into their own processes, we decided to request meetings, speak with them, and then see if they were willing to follow up with us afterwards

Success Criteria

We hoped to schedule meetings with at least five stakeholders,  and then meet with two stakeholders who would then follow up with requested information afterwards.

Actual Results

As of the afternoon of Friday the 9th, we had scheduled four new meetings for the next week. We also met with two stakeholders this week, a professor at the Ray Marshall Center for the Study of Human Resources at UT and the executive director of the Austin Youth Chamber of Commerce. They both expressed enthusiasm for our product and offered to follow up with more information and contacts to support us. Alyssia Woods of the Austin Youth Chamber then actually sent us an email afterwards offering to introduce us to people at several relevant local organizations with whom we had not already talked.

In summary, stakeholders continued to be interested in our product and see a need for it after meeting with us, sharing their expertise, and hearing our plans.

Experiment 2: Intercept Interviews

Success Criteria

We hoped that at least 5 people would inquire further about our product after hearing about the concept and being asked to cast their vote for what the product’s name should be.

Actual Results

We briefly interviewed 16 working adults this week at the Barton Creek Mall. From those interviews we learned that our participants found our original working title, “Sidestep,” confusing, often responding that it sounded like a dance move or like a job you could have on the side.

The most popular proposed name was “KeyUp,” which participants thought sounded catchy. It also reminded them of the actual purpose of the product, saying, “it makes sense for what you would want to do,” and “it sounds like an improvement.”


Connecting young people to services: reflections from stakeholder and user interviews

This past week, Mary Hannah, Mariangela and I delved deeper into building relationships with key stakeholders and gleaning insights from intercept interviews with users. As a recap, we started our research last quarter investigating how young adults without 4 year college degrees civically engage. We found that the channels through which young adults can access government and services are antiquated, remote, alienating and require a lot of work.

This quarter, we have decided to address this distance between working young adults and ways in which they might civically engage by taking a step back and looking at the socioeconomic vulnerability that prevents young adults from civically engaging. Many working young adults are so concerned with making ends meat that they do not have the bandwidth to make change in their communities. These young adults could be accessing services to help them find careers with growth potential that would put them in a more stable position. However, they are not. Thus, as you can read in last week’s blogpost, we are developing solutions to facilitate this possibility.

In order to build our solution, we are spending time de-risking our service through experiments. The hypotheses we tested were:

  1. If stakeholders are willing to reach out to us, that indicates enough interest on their side to affirm that our product will have buy-in. (Stakeholder hypothesis)
  2. If young adults lack awareness about programs that could be helping them get training, we can fill that void. (User hypothesis)
  3. If there are channels through which we can intercept young adults, then we will be able to perform experiments to determine interest in our service. (Channel hypothesis)

Results from the stakeholder hypothesis:

After brief conversations and email exchanges, Austin-area nonprofits and government organizations that serve young people are all setting up meetings with us. There have been referrals to other organizations and, frankly, excitement that we are trying to figure out a solution to a problem that has vexed their organizations: community outreach. In total, we have 13 new partners we are building relationships with.

We heard that people are currently keeping track of the multitude of options offered to young people through meetings, bulletin boards, and Excel spreadsheets. We also heard a story that in the middle of a presentation about joining Americorps, an entire class of students surreptitiously applied through their mobile apps. However, the organization had to deny a majority because they did not actually meet their requirements (ability to travel and citizenship).

How young people can find out about job opportunities at the local library
How young people can find out about job opportunities at the local library

Our stakeholders are looking for ways to find applicants that meet minimum requirements to join their programs but spend a lot of time tabling and canvassing with little success.

Results from the user hypothesis:

After completing another round of intercept interviews, we found that young people are indeed anxious for opportunities even if they require some school, yet they are unaware. When we discussed options with young people, they opened up when we spoke about the possibility that you do not have to be ashamed that you did not get a college degree. They shared their hopes and fears and eagerly wanted to know more. We left them our business cards to get in contact with us. Alas, this did not work. (See next results paragraph.)

Results from channel hypothesis:

Young adults are not writing us emails after we give them our business cards. However, we do not know why. We are going to try several different strategies to build relationships with these young people. First, we will try sending the first message. Second, we will try through text. Third, we will intercept these young people as they are searching for jobs at the library.

Next steps:

  1. We want to do participatory research with young people to find out what they want to find out in a search of future careers as well as how they might prioritize the categories they search.
  2. We will continue to build relationships with key stakeholders so we can learn from what they have done to reach young people as well as what they would want from a recruiting service.
  3. We will iterate on our landing page. The first draft of the header can be seen below.
Header from our landing page
Header from our landing page


Testing Our Problem-Solution Fit: Do young adults want a service to help them find a stable job?

Last quarter, we (Adam, Mary Hannah, and Mariangela) investigated how young adults who do not attend college do or don’t civically engage in Austin. Last week, we ideated possible solutions to help them become more engaged. After evaluating our ideas, we all recognized that until these young adults had stable and secure jobs, civic engagement seemed out of reach. Thus, we determined that we will develop a solution that will encourage more young adults who do not attend college to secure mid-level jobs. In this post, we will describe:

  • Our hypotheses: what were the biggest risks we needed to test in order to determine problem-solution fit
  • How we tested and what we learned
  • What we will do next week

Our hypotheses and what we learned:

This week, we hypothesized the following statements and decided to test them because they were our biggest risks.

  1. If there are at least 50 training and certificate programs in Austin, then designing a service to connect young adults to these programs will ultimately support their upward mobility.  
  2. If there are channels through which we can intercept young adults, then we will be able to perform experiments to determine interest in our service.
  3. If working young adults want career advice that is not delivered face-to-face, then we will be able to design an interface to support their continued success.
  4. If current solutions are not sufficient, then we will be able to innovate a new service that will fulfill a need.

How we tested and what we learned:

Of all the hypotheses we needed to test, we realized the riskiest were hypotheses two and three. How could we find and attract young people to use our service? So, our first attempt at doing this was to design a poster and intercept people around the city to get their reactions. Below you see our first poster.

Pasted image at 2018_01_20 08_49 PM
Our first poster

From these initial tests we learned that our poster seemed like an infomercial. Though the young people we spoke to liked the idea of getting support to find a job, the poster itself did not inspire confidence. Thus, we decided to get a better sense of what copy would inspire confidence and clearly communicate our future service.

Next, we designed four lo-fi posters to get feedback from students on the ACC campus. Instead of making too lofty a goal like “find a better job,” we shifted to focus on the fact that you don’t need a college degree to get a job.

One of four posters
One of four posters

From this we learned that though students recognized the value of our message (no need for a college degree), they got lost in what we were offering.

So we decided to focus on what words young people might use when describing their current situation and what they aspire for. We designed a card sort activity in which our participants ranked their current barriers and motivations.

A participant doing our card sort activity
A participant doing our card sort activity

From this we learned that young people do not want to feel stuck and that they need to have opportunity for growth. One local laundromat owner also affirmed that many young people change their perspective on life once they have a family. He was a young father and felt the need to care for his family.

Finally, we settled on two posters, each at a different level of fidelity. Below is the higher fidelity poster.

A final draft of our poster
A final draft of our poster

Simultaneously, we tested hypotheses one and four. Though we initially spent time scrubbing the internet searching for all the training programs in the city, we found a much greater resource: Texas Workforce Solutions, the company that manages unemployment benefits in Texas.

We also heard from our participants a desire for a job fair that featured employers who do not require a college degree. This led us down a path that explored how the city is currently supporting unemployed residents as well as other innovative solutions that exist in other cities. We immersed ourselves in what it is like to be receiving unemployment benefits, learned from people who work at the Texas Workforce Solutions, and explored their website. We also discovered a city plan to get 2,000 economically disadvantaged residents of Austin into middle skills jobs by 2021.

We learned that there are services for young people to get more stable jobs, and that currently, they are not accessing those services.

Next week:

We are going to launch a landing page in order to hone in on our unique value proposition. We will go deeper in our research to determine the most important part of a young person’s journey to finding a stable job in Austin. We will also develop relationships with key stakeholders in the problem space and investigate what came of the Texas Workforce plan to move economically disadvantaged residents into middle skills jobs. 

Developing ideas to help young adults to become more civically engaged

This week we focused on the ideation process for our Civic Engagement project. For a quick recap, our team (Adam, Mary Hannah and Mariangela) researched how how young adults without college education go about engaging with their community, how they conceived of civic engagement and when they might politically engage.

Last quarter, we developed opportunity areas. And so, this quarter, we started developing concepts by applying an insight combination techniques.  This consists of combining our original insights with design patterns (design pattern: describes a current trend, based on problem/ solution sets in other contexts).

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

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

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

The combination of these design patterns with the following insights made us come up with over 200 ideas.

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

Insights that we combined with patterns:

  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.

Ideas we developed:

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

There are several actions that an individual can take to become civically engaged, one of them is voting. But research has shown that two of the main reasons why individuals don’t vote is the fact that registration takes work, and because individuals with college education are more prone to proactively look for information about politics (Brookshire, Bethany. (Nov 2016) 4 reasons why people don’t vote).

So how might we encourage young adults to take the very first step that would eventually drive them to vote?

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


Future me is the result of the need for young Austinites of a mentor that can help navigate political and professional landscapes. This mentorship would not only allow young adults to get training and find better job opportunities, but also to get integrated into a community conformed by individuals in similar circumstances.


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. We also hope to design posters that are artful and educative.

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, fleshing 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 (,, And if you know anyone between the ages of 18 and 25 that would be willing to work with us, please help us connect!

How I built a system to help users save money

This week, I had a whole new experience when the bank I have been building wireframes for chose to integrate a new core product as fast as possible. The new product has four key features: user financial trends, analysis of specific transactions to see if they are historically anomalous, a “what-if” financial modeling system, and an ability to figure out when it is safe to spend at any time. The last time I wrote, I said I was going to build out my screens, do usability testing with 8-10 people, and build out my flows. Though I did accomplish this, I am going to focus on how I developed the new product, how I tested it, what I learned, and present my new screens.

In this week’s post, I am going to discuss

  • my process,
  • revised information architecture concept model,
  • testing,
  • testing outcomes,
  • screens and
  • next steps.

My Process

Since the new product I have been tasked to incorporate in the mobile banking application is about financial analysis, I decided that its fundamental purpose is to help a customer save. Thus, at its core, the mission of the new product is to help users save money. After doing some background research, I found out that Americans are not saving a lot of money at all. To me, this means the product should help Americans move from living paycheck-to-paycheck to a state of financial stability which I will define as having saved three times the amount of money you spend each month.

So now, I have framed the challenge in a new way. I am not longer trying to fit four different products into my banking application. Instead, I am going to determine how can a banking application help a financially illiterate person gain the confidence to begin saving their money and get out of the situation where they are living from paycheck to paycheck.

This led me to ask questions like, “Why don’t people save money? What are barriers to financial planning? How can a mobile application support decisions that lead to long term saving?”. There are products out there that help a user budget. So why isn’t America jumping on board and living within their means, putting away a little bit every month, learning to invest and take on other habits that will lead to long term financial stability? Of course, there are many factors a banking application has no control over. It can’t change the very real circumstances that Americans live everyday. What can it control? How can it help users to change their behavior in simple ways?

Thus, I started to reframe the challenge again. I asked myself, “How can the banking application create a situation in which the user feels like saving’s support is invited? What circumstances would a user be in, in which a he or she would more likely value a little nudge that would lead to better financial health?” This was a fruitful line of questioning because I recognized that though a user may intellectually recognize that saving money is better, he or she may not emotionally be able to grasp it. There are many barriers to behavior change and there’s no way a banking application can help a user to become better at saving if it does not take those into account.

To help me systematically think this challenge through, I built a service blueprint using sticking notes. Along the vertical axis in purple sticky notes, I wrote the headings: triggers (data), system triggers, triggers (user), system’s response, customer service response, and next steps. By triggers (data), I am referring to all the data a banking application can track including frequency of a kind of purchase, location of purchases, the collective spending habits of users in a similar location and income bracket, and individual user spending habits. By system’s response, I mean what is the frequency, quantity or time that will lead to a moment in time a user may want help. By triggers (user), I mean what will the user be doing in the real world as well as in the banking application when the system is stepping in. By system’s response, I mean what will the system say to invite the user into the interaction. The rest of the terms are about how the user will go about accomplishing the new goal instantiated by the system’s response.

For example:

Triggers (data) – system is tracking how much the user is typically earning each month (biweekly paycheck) as well as when bills are usually paid

System triggers – a user does not get a new paycheck for 1 month

Trigger (user) – user logs in to the banking application

System’s response – a modal pops up and makes a friendly comment in which it says it has noticed that something isn’t okay and ask if the user would like some help figuring out how to make sure they have enough savings to pay a bill coming up in two weeks. Sign up for our new service.

User response – sign up later or sign up now.

A visual representation of how I thought systematically thought about Safe to spend

In the end, I built out the product with a few use cases in mind. I specifically focused on a person who is living paycheck-to-paycheck. I wrote a few stories to figure out what the user may be doing and what his or her goal may be. I used this to help me revise my information architecture map. Then, I sketched my wireframes and built them. Finally, I ventured out into the field to do my usability testing.

Revised information architecture map

In order to revise my information architecture map, I first tried to incorporate feedback I’ve gotten that the original map was unsightly and seemingly disorganized. Though I’ve used the map for my own sensemaking, it also needs to be something I could hand off to a developer so that way they can understand the lay of the land, so to speak. After I revised its appearance for clarity, I added in the new feature I developed called Safe to Spend.

Revised information architecture map
Revised information architecture map


I attempted two forms of usability testing this week. First, I tried usability testing as I have always done. This was super pertinent since I am just at the beginning stages of building up my idea. It is important to get other people’s perspectives – to see if they can make sense of the flows. Getting to hear someone think aloud as they attempted to figure out the new feature, I learned about what I did not consider, about how I displayed information, and the copy I wrote. Getting a handful of people to test my screens, I get to learn about where I need to make design considerations in a rapid and cheap way. I was able to get really actionable feedback.

A user tests Safe to spend with a paper prototype
A user tests Safe to spend with a paper prototype


I learned a lot of important ways to revise. I chose the top three. They are visualized below in the next section.

The second way I tested my application was through cognitive walkthrough. This involves trying to use the application from the perspective of a first time user to try and understand if he or she can achieve their goal. I tried to figure out if the user wants to save money, would they understand how to move their way through Safe to spend. You can see how I visualized this process below. Using this method, I was able to reflect on cases that I had not previously considered including user states of mind and cash flow.

Cognitive walkthrough visualization
Cognitive walkthrough visualization

Testing outcomes

Below, I have visualized the top three errors I revised in my screens.

Test documentation 5-01 Test documentation 5-02

Test documentation 5-03

Safe to spend screens

Below are the Safe to spend screens. I labelled each flow with the task that it accomplishes plus indicating which of the requested features it addresses.

A flow for how a user turns on Safe to spend
A flow for how a user turns on Safe to spend
What if I want to cut down on spending - flow
What if I want to cut down on spending – flow


What if I delete subscriptions? - flow
What if I delete subscriptions? – flow
What if I spend less frequently - flow
What if I spend less frequently – flow
Get a snapshot of my trends- flow
Get a snapshot of my trends- flow
Intercept messages that tell me when I've spent more than usual, can save or how many more times I can do something during the week.
Intercept messages that tell me when I’ve spent more than usual, can save or how many more times I can do something during the week.
What happens when the system doesn't recognize your transaction
What happens when the system doesn’t recognize your transaction

Next steps

For my next steps, I want to develop my banking mobile app into it is fully complete, revise my information architecture map so that it is both clear and consistent, as well as build out the safe to spend feature. My hope is to create a full product that I can use in my portfolio.

Wireframing: Iterating on visual design and workflow

This week, I took what I learned from last week’s critique and applied the numerous suggestions to my wireframes. In last week’s blogpost, I discussed how I’ve been evolving my visual design skills. I went deeper into this aspect of my flows as I tried to also figure out how to make my workflow more efficient. I also said that I would build out more flows that a user would experience and see if there would be any new features I would want to add. I added flows but did not add in any features.

In this week’s post, I am going to discuss

  • Improving visual design
  • Revising wireframes
  • Improving workflow
  • Revised wireframes
  • Next steps

Improving visual design

As I discussed last week, I am not a trained visual designer. I am learning one significant aspect of visual design is training my eye to see details. Before entering AC4D, I rarely spent time thinking about how to evaluate graphics from the standpoint of readability and accessibility. I certainly didn’t ask myself how one document may be more attractive than another. Since practicing this kind of detailed evaluation, I have only begun to realize what I don’t know and that the most valuable way to getting better is by getting feedback from others (especially those who have more training). I am hoping that I start to develop my own aesthetic so that when I leave the program I can be more independent and assertive when it comes to my own graphic design decisions. For now, I am working at a snail’s pace trying to modify what were once ugly screens to slightly higher fidelity screens.

This week, I spent hours modifying old screens so that they are less “chunky” and “amateurish”. Below is an example of how I modified the hamburger menu so that it looks more realistic. You will notice that in the new screen the typeface is less harsh, there is more white space, and that there are clear breaks between categories represented by faint lines.


You can see another example below. It is an example from the Bill Pay flow. I made all elements left aligned, the typeface smaller and as well as changed the text from a regular weight to a light weight. I am beginning to understand the subtle grace a wireframe (or document or form…) one can develop by using weight and size.

newvsold-01I also made my wireframes more consistent by making sure that all buttons looked the same, affordances were set up in the same manner from screen to screen and all hamburger menus were on the right hand side of a screen.

Revising wireframes

In addition to modifying the visual design of my screens, I revised the Alert flow based on user feedback from last week’s testing. I have been challenged by the alerts flow and seem never to get it right. I will be testing this flow during critique (again) as well as during usability testing.

Test documentation 5-01


Improving workflow

A huge part of my struggle this quarter has been getting better at visual design. Another is being able to work more efficiently and accurately. This week I was more intentional about trying to improve my workflow. I spent time creating groups, symbols and writing down key information that I needed to repeat across each flow. I also tried to time box more effectively. Honestly, I am not sure how much this all helped because in the end, I found out that Sketch, the application I use for wireframe design, is a little buggy and when you copy and paste symbols, it will make a new symbol instead of copying the instance. This then sent me on a rabbit hole to try to fix the work I tried at first. Though I have been told that symbols ultimately will slow down a team of designers, I want to figure out how to use them because it takes so much time to make one small change to each screen!

Revised screens

Below, you can see my revised screens as well as the new flows I have added.

Login flow
Login flow
Bill pay flow
Bill pay flow
View bill flow
View bill flow
Check balance flow
Check balance flow
Alerts flow
Alerts flow
Deposit a check flow
Deposit a check flow
Quick pay flow
Quick pay flow
Transfer flow
Transfer flow
Settings flow
Settings flow

Next steps

Next week, I plan to do usability testing with twice as many people (8-10) so that I can make up for not doing it this week. I also plan to add into in the edge cases and error screens.


Usability testing: how I used paper prototyping

This week, I did my second round of usability testing. I revised screens according to what I learned from critique and from testing and then, made my concept map reflect the changes I’d made. If you recall, in last week’s blogpost, I said that I would build out some more of my flows and try testing with a paper prototype instead of a digital one. I met those goals and learned more about how I want to do my testing next time.

In this week’s post, I am going to discuss:

  • Paper prototyping
  • Improving visual design
  • Revising the Navigation and Information Architecture Map
  • Revised wireframes
  • Next steps

Paper prototyping

Last week, I used a digital prototype to do my usability testing. I found that there were some challenges to using this to test. It didn’t always work, often frustrated my participants, and constrained what I could learn because users could only follow the flow as I had set it. Paper prototyping had none of the same challenges.

I found that paper prototyping to be a better way to get the feedback I wanted. I didn’t have to spend much time building the prototype. If I continued using the digital prototyping application, I would have spent hours making new links since my wireframes were revised since the first time I set up the links. This means it’s pretty simple to get out there and get feedback. A significant challenge was managing the paper as my users clicked on each screen.  I was simultaneously shuffling papers around as well as taking notes. However, this really only slowed down the process and didn’t change the data I would have gotten.

Of course, my participants didn’t think the app was real. Whereas when I used the digital prototype, my users thought that they were using a real bank app. But, I do not think that changed the validity of the feedback I got. They may have appeared skeptical at first, but once they began they would tap the paper (or not as sometimes there would be significant wait time as they tried to figure out where to go).

A participant completes a task with a paper prototype
A participant completes a task with a paper prototype

I also only focused in on three flows this week, alerts, paying bills, and adding contacts. I did this to narrow what I would learn. One significant take away was 60% of my participants do not use their banking application for these functions. One even said how novel it was to think that the bank would send notifications.

During critique, I had asked my classmates to give me feedback on visual design.  Therefore, in addition to the revisions I found during testing, I also changed how the wires look. Below are the three main problems I fixed this week.

Test documentation second-01 Test documentation second-02 Test documentation second-03

Improving visual design

Since starting the program at AC4D, I have found visual design challenging. I never had training in graphic design so in addition to all the skills I am practicing, I am trying to learn how to build effective and aesthetically pleasing screens. In order to get better at visual design this week, I took two practical steps. First, I printed screens of other banking apps and then traced on top of them. This helped me to get a sense of size and space. Second, I found more screens and uploaded them to Sketch. I traced them there to gain a greater sense of accuracy when it comes to the sizes and placements of objects on a screen. I used this process to help me redesign many of the screens. I will also have to follow through and continue to redesign screens in future iterations. Below, I have placed the old and the new homescreens side by side.

new vs old

Revising the Navigation and Information Architecture Map

As you saw above when I showed you the top three problems I found during testing, I had to change some of the architecture behind my wireframes. I had to make a new connection between contact information and alerts. I also had to delete and add in functions. I noted how challenging this can be and wondered how I can modify the map more effectively. This week, the changes weren’t significant. I can imagine that changing as I move forward with my iterations. I will have to brainstorm ways to efficiently modify such a large, complex map in the future. Below, you can see my revised map.

Revised Concept Map 2

Revised wireframes

In addition to the above-mentioned revisions, I also changed all of the buttons so they look more realistic. I also changed the top bar so it would include a menu option on every screen and so that the text was consistent and centered. I have included a few individual screens to highlight the changes I have made. Below that, you can see my revised flows as well as the new flows I added this week.

Revised menu screen
Revised menu screen
Revised notifications screen
Revised notifications screen
Revised bill pay menu screen
Revised bill pay menu screen
revised login flow
revised login flow
revised bill pay flow
revised bill pay flow
revised change bill pay flow
revised change bill pay flow
revised check balance screen
revised check balance screen
Revised alerts flow
Revised alerts flow
Revised deposit flow
Revised deposit flow
Revised (plus new) quick pay flow
Revised (plus new) quick pay flow
New settings flow
New settings flow
Revised transfer flow
Revised transfer flow

Next steps

Next week, I want to get feedback on larger systems issues. Do my flows all fit into the same user interaction dynamic. Namely, do my flows feel consistent and part of the same application. I also want to build out more flows. In these past few weeks I have been learning about services other mobile bank applications offer. I wonder how I might integrate some of these into the TD bank mobile application.