Selfish and Sensible Designers

It’s week two of Q4 and our Theory of Interaction Design and Social Entrepreneurship class has kicked off with a curated list of readings that we discussed in class and then synthesized for better understanding, very similar rhythm to our theory class of Q1.

But before I go ahead and talk about my conclusions around the assigned readings, I want to share my personal perspective on why I think design theory is important for design practicioners. After describing the phenomenological and positivist approaches in a digital technology context, and the importance of designers to have them in mind when making decisions, Richard Anderson says:

Theory informs practice. Without knowing the types of things described above [positivist and phenomenological concepts], decisions are still made, but they are made with a less informed, less thoughtful consideration.

Theory informs practice because of its narrative based on other’s experience and research. Having a clear concept of theory as as a design practitioner is necessary because it provides a knowledge base that we can use to learn from other people’s mistakes and points of view. But it is mainly necessary because it helps us develop our own set of principles.

But having principles as a designer isn’t enough. In his article “Yet Another Dilemma”, Richard Anderson sheds light into a problem that I believe is latent in the design and entrepreneurship community; in many instances we don’t remember to follow up, and when this happens, we disregard following the act of following through. This translates countless hours spent problem finding, collaborating and ideating solutions that will never see the light of day.




If our role is to use design as a tool to shape behavior, it is our responsibility to shape this behavior in the right direction and follow through to make sure that change happens in a meaningful way. The way we should be able to do this is by taking into consideration the context and culture that we’re somehow “intervening”

And this is something that I’ve personally experienced this in the school setting too. Like Daniela Papi-Thornton and Michael Gordon point out in their “Rethinking Business Plan Competitions” article, design students tend to focus a lot of time developing their portfolio, even though the projects are meant to address social impact issues more and more, design students care about the output that they’ll be able to show the world. But this needs to change, designers need to care more about showing the process and outcomes their decision making.  

So many things happen during these working sessions, we come up with endless amounts of ideas, prototypes, talk to so many people, but at the end of the day, what are we doing with this shared knowledge? And this is where I wonder, what does it really take to enable change?

Screen Shot 2018-03-15 at 6.05.41 PM

If we add a best practice to follow through on our design initiatives, make it part of our “design toolkit” – along with all of these activities and methodologies that we use. If none of this is possible, then at least we need to be able to set the right expectations for the people that we’re engaging.

If we get together, and ideate, but nothing seems to be changing, is it good practice to take matters into our own hands?

This is where social entrepreneurship comes into play. Like we read in Adele Peter’s article “Did this new nonprofit crack the code for building developing world housing?”, designers in this case took the matter into their own hands – they detected a problem and they decided to come up with a strategy to solve for it. They followed through and they’re seeing change happen. But as we discussed several times in class discussion, there is a justified expectation that taking matters into our own hands as designers isn’t the right path to take, policy and legislation is, which begs the question if we are fighting the right fight.

But what about practice and experimentation?

In 2015, I attended a design workshop in my home town imparted by a design strategist. Her method was the following:

  1. Gather a bunch of newspapers
  2. Pick an article that talks about a problem in your country
  3. Get a consensus within your team
  4. Start ideating a solution

We read some of the articles and we picked the subject of childhood obesity. In Mexico, 34% of children between 5 and 19 years old are considered obese. In 2015, a study confirmed that with a 32.8% of the population being obese, Mexico is now the fattest country in the hemisphere.


Our diet, once based out of beans and maize slowly transformed into a diet high in cheap processed foods. This is making our children grow up to be fatter than ever.


With the intention of addressing a nutritional learning gap, Woop is a product that was designed to teach young children to moderate their intake of food containing high amounts of sugar, which seems to be a task that is hard to do for parents.

A team of 5 people created a working prototype in a week, but we were so worried about having our prototype looking good for the presentation, that we never really worried about making sure if it was indeed contributing to solving the real problem.

And as I read “The High Line’s Next Balancing Art” from Laura Bliss, and reflecting in this past project of my college years, I kept thinking – who where we really designing for? Was it for these children that are prone to obesity, to change their lives and contribute to “change the world”, or was it for us, design students, that wanted a nice looking design in our portfolios that aimed to contribute to a meaningful problem?

All of this to say that we never really followed validated the intention of our design.

But who is a designer nowadays and who’s holding them accountable?

Design went from the traditional practice of creating tangible goods to a practice of systems thinking and it that has gained a lot of traction during the last few years. Designers nowadays have been inheriting more and more responsibilities because we are required to foster relationships with the people we are designing with. Anyone that detects a problem and decides to come up with a solution in a creative way, taking into account end user input – empathy building – is considered a designer.

So how can we keep designing and keep our reputations and stakeholder’s dignity intact?

We can’t.

Because we’re human.

But we can definitely try…

and if failure happens, then that can only translate into valuable experience.

We do need to make ourselves accountable and responsible for the relationships we build along the way.


Theory, like in any other disciplines allows professionals to develop principles which they will then apply to all aspects of their work. If our role as designers “lies[…] in encouraging behavioral change and explicitly shaping culture in a positive and lasting way” (Kolko, Misguided focus on brand and user experience), setting expectations before hand with the people that we’re engaging, and designing with is imperative. This will not only allow us to preserve our participant’s dignity intact, but also to acknowledge design as a user-focused craft to the eyes of others that don’t recognize its impact yet. Because what is empathy and rapport building if we don’t follow through with the humans we engage with.


Building a Service Blueprint for KeyUp

The last week of Q3 approaches, but we (Adam, Mary Hannah, and Mariangela) continue to validate our service idea: KeyUp, a digital solution that aims to connect young adults to training programs and supporting services, with the mission to have them attain a well-paid, mid-skill level career, improve their quality of life, and subsequently, increase their level of civic participation.

While conducting experiments, we finished putting together our website (check it out! which we have shown to a couple of young adults from whom we gathered and implemented feedback. We’ve also been spending some time on building our online presence on Instagram (  and Facebook (coming soon).

Screen Shot 2018-02-16 at 8.36.23 PM


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

  • If we manage to get 30 young adults interested in our product, we will get 5 people to participate in co-creating paper prototypes for our digital solution.
  • If we pitch our service idea to 4 stakeholders working in community outreach and also those that specialize in connecting individuals to job opportunities, they will agree to support us in our endeavor.
  • If we create social media accounts on Facebook and Instagram, we will be able to attract attention from key target audiences.

Experiment 1: Testing platform UI

The digital piece of our solution will be the main point of interaction between young adults and our service, so we wanted to make sure that the interface efficiently communicated information that is of relevance to them. In order to do this we created a paper prototype that we intended to use in a co-creation activity with young adults.

Success criteria:

We will get the contact information of 30 young adults, of whom five people will be willing to attend a participatory activity.

Actual results:
We only managed to get 3 individuals to agree to do a participatory research activity.
Reaching out to young adults that will actually follow up with us continues to be a challenge.

Experiment 2: Creating partnership with stakeholders

By speaking to an array of stakeholders, experts in the areas of continuing education and supporting services, we hoped to confirm that they supported and would use an app that would connect young adults with training programs and services to get them into middle skills jobs.

Success criteria:

We talked to four stakeholders hoping that we could detect opportunity areas to partner with them.

Actual results:

The services that we’ve reached out to have been extremely responsive and have started introducing us to other interested parties. We have now had meetings or scheduled meeting with almost every stakeholder that we identified or that another stakeholder has recommended we look into, indicating that we are approaching a comprehensive understanding of the actors in the youth workforce space. Our conclusion as a result of these interviews is that despite their active efforts to coordinate with each other, many of these communities and programs are working in silos. No one we spoke with had a list of all training programs and services available in Austin for people trying to reach middle-skill jobs, and few would even hazard guesses. Therefore, KeyUp would be filling a gap in the efforts of current stakeholders.

Next steps

UI paper prototyping

This week we focused on the researching and refining content for our digital solution.
In order to prove validation of our solution, we need to be sure that the information that we’re providing actually is valuable to the young adults we’re trying to connect to programs and services that will guide them through a sea of educational options.

After having put together a first paper UI kit in order to test it, we realized that we were dealing with an extensive amount of data about existing training programs, careers, and supporting services. The challenge lies in the fact that we can’t just google training programs and make a list of our findings; we need to actually do the due diligence of scrubbing data and provide information about programs that are legitimate and have a good reputation.

Paper prototype for UI participatory activity

Pivot: We decided to choose three industries that we would like to be “subject matter experts” about so that we’ll be able to provide the best information out there for prospective users. These areas are: health care, tech, and skilled trade jobs, all industries identified as well-paying and high growth in Austin.

Service blueprint

KeyUp potential end users

After the research we conducted, we realized that there are at least four types of users that could interact with our service. We decided to focus on the user that is in an “exploratory” phase while searching for jobs and that suddenly stumbles upon “KeyUp” through Google or social media. The reason why we decided to choose this user is because they will be following the full KeyUp journey from beginning to end.

Screen Shot 2018-02-16 at 8.29.25 PM
Iterations of Service Blueprints

We will continue working on defining what our service consists of by iterating on our service blueprint as we keep on conducting interviews with stakeholders and potential end users. We’ll use our service blueprint to prompt conversation about our service in order to receive feedback and refine our solution.

Screen Shot 2018-02-16 at 9.01.19 PM
Last iteration of Service Blueprint


Redesigning a banking app… with a twist

What we did this week

This week, we were challenged with what sounds to be a pretty common scenario in the real world:
“Your bank has acquired a new analytics company, and their boss wants to integrate their core product as fast as possible”
This is the way we learn the skills to rapidly integrate new capabilities into an existing or developing product. With the screens that we have produced until now – please read this blog post in case this is the first time you stumble upon this article – we were tasked to integrate new financial model capabilities into this new bank application that we have worked on for the past eight weeks. The very first question was – how do we do this in a way that isn’t disruptive to the already validated design?


In order to quickly ideate for this unexpected twist, I opted to use a few of the methods originally introduced by our professor – Jon Kolko – at the beginning of the quarter:

– Character creation
– Scenario
– Task assignment


In short, I wrote a short story of the individual I’m designing for. He is a 30 year old designer – not much of a planner – who has a pipeline of ambitious plans for 2018. With a project to build a house, and an upcoming dream trip to Japan, Tony wants to have his finances in order to keep everything from falling off track starting this new year.

Choosing Implementations

The client’s ask:

– An Account Overview to view spending trends
– A Recommendations feature which would allow the user to dynamically visualize how changes in monthly payments can impact the user’s account
Anomalous transaction analysis which allows the user to be instantly aware of any strange transactions
– The Money Calculator, which allows the user to know what money is available to spend at any given time

Taking into account what the “client’s” ask consisted on, I crafted a quick and dirty map that linked my character’s story with the aforementioned capabilities:


As a shortcut to storyboarding, this diagram was a useful first step that helped me figure which would be a logical flow for an individual with these characteristics to follow under his circumstances.

Some competitive analysis for inspiration

I chose a different ideation technique to get me started with sketching. I researched current personal finance mobile applications that are currently thriving in the market looking for what made them special. I then (quickly) sketched by hand a few of these features and showed them to a couple of people. They then told me which features they would like to see in a personal finance application of their own.

Here’s how that turnout looked like (the ones marked red where the preferred features) –

Screen Shot 2017-12-13 at 5.07.59 PM         Screen Shot 2017-12-13 at 5.08.07 PM Screen Shot 2017-12-13 at 5.08.14 PM

After this second round of ideation, I started to draw some actual screens and the digital product began to take form.

Screen Shot 2017-12-13 at 4.52.51 PM

Testing the design

Just like I have been doing with previous iterations of this same exercise, I tested an initial round of my paper wireframes to get initial feedback of where my ideas were going. For this activity, I used a mixture of methods like the technique called Think Aloud Protocol (which consists on assigning a task to an individual and have them explain out loud how they go about accomplishing the task), as well as a simple “show and tell me what you think” activity.

This last one proved to be quite handy, specially for a design that had so many features and little time to build an interactive prototype.

After I gathered and processed user input, I started building wireframes on my digital tool which I tested one more time with three users with the same techniques I mentioned before.

The "review my budget" capability did not look aesthetically aligned to the rest of the screen.

List of Accounts

User 1- “I guess…This seems useful. But what if I want to change my “budget”? – What if I want to have different budgets per months or per seasons? – I guess I’m saying that because Christmas is coming and all I’ve been thinking is how I don’t want to spend too much…” […]
User 2 – “What is “Compare Spending”? Is this between accounts?” – this [section?] here looks a bit odd compared to the rest of the stuff on the screen – although I see why it could be helpful.”
I got rid of the "Compare Spending" option and added an editing capability where users are able to set either a monthly or weekly budget. This way, the message will be easier to consume.


Budget DetailsShow me more

Spending Overview




Next Steps
For my next steps, I intend to research more into personal finance tools and how they can engage the user in a more efficient way and what makes current finance tools to not be as successful.

Civic Engagement Project: Walking the Walls

For the past six weeks, Mary Hannah Duhon, Adam Chasen and myself have been working on a design research project related to Civic Engagement in Austin.

Our team has been working to understand how young people between the ages 18 – 22 and who currently are not attending college, understand civic engagement, how they interact with government, as well as what are the government programs in Austin that are currently trying to reach out to them to get them involved.

This past week, we worked on conducting secondary research to further support our findings. This helped us truly define why this age group is important, as well as some historical context of the types of programs that exist in order to promote Civic Engagement among youth.

You can take a sneak peak of how this looked like in the following video:


For the next two weeks, we will be working on combining insights with the other two teams that are also working on a design research project involving Civic Engagement but with different focus statements. This way, our efforts will be combined in order to craft a single story that will persuade our audience – this December 16th – that Civic Engagement in Austin can be improved through human centered design.

Mobile Bank App: Iteration 4

In case you’ve stumbled upon this blog post and you would like to have more context on what this project is about and how it has evolved, please check the Kick-off, Iteration 1, Iteration 2 and Iteration 3 blog posts.

This is week 6 of the second quarter in AC4D and so far – in our Rapid Ideation and Creative Problem Solving class – we’ve gone through 4 wireframe and concept map iterations, 4 rounds of usability testing and 5 blog posts about on the process of re-designing a mobile bank application.

This past week I focused on refining the flows that I keep receiving feedback on which are mainly the flows of Checking Account Balance and Send Money to Someone.

Problem Areas

Problem: Check balance

Before I first tested the flow so a person could check their balance, I decided to redesign the current way all of the accounts are displayed in the original application. With the intention to provide cues to users that indicate that from each one of their accounts, a user could not only check their list of transactions and balance, but also everything else that could be done with a specific account in a mobile application. I did this by adding buttons to each of the account cards.

Unfortunately, the space was so small that the buttons didn’t seem actionable and it took longer for a user to read and select an option (see screen B1) , than to just click the account card and see the list of transactions.

Screen Shot 2017-11-29 at 3.45.22 PM

Problem areas: Screen B1, B2 & B3 of Check Balance


solution cehck balance

Redesign: Buttons where redesigned to seem more actionable.
Also, different UI's were used for those buttons that had actions 
that were taking place on the same screen (transactions, details, settings) 
and on another part of the app the option to make a card payment.

Problem: Confirmation screen for mobile deposit

I tested the Deposit a Mobile Check flow with up to 5 users so far and they were able to go through it quickly – despite some technical, non-wireframe related issues, like the interactive prototype not being fully interactive, some screens not loading on time, etc. The only main concern I resolved for this flow, was the fact that the screen before the Summary screen and the Summary screen looked too similar – this brought confusion to most users – they weren’t enough indicators that made them think they were in a previous and final step.

Screen Shot 2017-11-29 at 3.45.29 PM

Problem areas: Screen C1 and C2, are two different actions. C2 is the summary screen.


The way I solved this is by slightly re-accommodating the content on the confirmation screen:

check confirmation

Redesign: 1st screen is previous to the Summary screen 
that gives you the confirmation for your check deposit. 
2nd screen is the Confirmation screen.

Design Decisions: The “Welcome Screen”

Home - What would you like to do?

The “Welcome Screen” was initially created after one of the individuals that tested my prototype didn’t know where to go after loging-in. During the session he was able to tap on a few screens from the Accounts screen but was not able to actually accomplish any of the tasks that were given to him.

The screen contains the main options a user will most commonly use on a mobile banking app: Review account balance and information, transfer money, make a deposit and profile and application settings.

After this round of testing, the screen was designed and added to the flow. During the following usability testings, users were quickly able to tap on the option they thought was related to the task I assigned to them:

"Send $100.00 to your friend Ethan Baldwin" - 
Task #1 - Users would quickly tap on Transfer Money and complete the task.

What’s keeping me from making a design decision is the thought that users might get the impression that they’re being constrained by only seeing these options, especially after repetitive uses of the application.

For this next iteration, I’ve decided to A/B test the Welcome Screen vs the traditional landing screen that most banks use which takes a user to his/her list of Accounts.

Concept Map: Revisited

I rearranged many of the actions that can be taken on the application, after the changes made to the wireframe this week.

Concept map 4

Iteration: Above is the 4th iteration of the mobile bank concept map up until now.
* Circles with thicker line wait are frequently visited screens or actions 
* Words on grey font are screens that I still need to build. 

Bill Payment & Alerts

Last week I worked on designing the flows for viewing, setting up and changing recurring bill payments, and setting up alerts. For this week, I will be testing these flows.

Bill Payment

bill payment 2



Stay tuned for more findings!

Redesigning a mobile banking app: Iteration 3

This week we’ve conducted a second round of usability testing for our mobile banking prototypes. Using Thinking Aloud Protocol, we’ve spent time intercepting potential users that we’ve never met before in order to get honest feedback about our prototypes.

Usability Testing

For this week’s round of usability testing, I decided to continue sharing my most complete flows in order to refine them and hoping to get perspectives on common needs as it relates to banking from my users after they finish “their test”. If people are not on a rush (as they mostly were this time) I spend a few seconds asking them what they thought about the options provided and what other capabilities they often used on a mobile bank application.


Problem Space #1
Welcome screen after login.
BoA Wireframes - Problem Areas - Iteration #2 (1)
The user is limited to the six options she has, so feels forced to choose the “next best option” to go ahead and complete the task she was given.
– Give the user an option to customize the Welcome Screen
– Don’t provide a Welcome Screen and provide a more perceivable menu option
Problem space #2
Main menu > “Settings”
BoA Wireframes - Problem Areas - Iteration #2 (3)
The user needs to guess which type of settings the option is for. (Was willing to venture and discover what it was about but there was no screen for such option)
– Be more clear about the type of settings
– Re-word the option or include a shortcut to this option elsewhere on the screen
Problem space #3
Main menu
BoA Wireframes - Problem Areas - Iteration #2 (2)
The user needs is confused and a bit thrown off by the bottom menu.
Doesn’t distinguish between transferring, paying and sending money.
– Add a static menu that stays exactly the same on all screens
– Find a common ground between “Transfer” and “Pay” words

Revised Wireframes

Due to my conversations with older generations and what they shared about their mobile banking use, I’m still on the hunt to propose a better way to display options from the main menu – this has been the feature that I decided to iterate upon this week.
For my redesigned wireframes, the main menu has stayed on the “friendly thumb area” to provide users with higher accessibility. I’ve used the floating action button to add more visibility and perception of action (assumption that might or might not get proved wrong on my next usability testing).
 all screens small

 Next steps

I would like to test this mobile application with older generations that currently use the Bank of America app, and see how this new version of the application compared to the original, improves their normal use.
Stay tuned for this week’s findings!

Service Design: CRAFTing a Customer Journey

For Service Design, our team (Mariangela, Adam, and Mary Hannah) has been working with a local pay-by-the-hour craft supply business called (fittingly enough) CRAFT. This has meant that we have gotten the wonderful opportunity to interview a bunch of CRAFT patrons and do a little crafting of our own. Service Design is the exactly that, the design of services.


In reference to CRAFT, it is the creation and orchestration of all the touch-points within CRAFT to act as a single entity in order to achieve the ultimate creative experience for each guest. Our process started with researching what the current state of a guest’s experience at CRAFT is. Next, we did research with the employees of CRAFT to understand the work they do, what they hope CRAFTing guests experience, and any barriers to achieving this ideal. To learn more about how we did each, we have included the introductions to our research plans and where we currently are in our process.

Introductions to our research plans

What is the current state of a guest’s experience at CRAFT?

Focus Statement

We aim to learn how customers currently experience CRAFT. We will use this research to seek opportunities within the service experience that will lead to greater value for the user and the business owner.

Research Objectives

Our goals are to:– Understand the customer’s perception of value, service, and flow from start to finish of the customer journey
– Understand factors that contribute to decision making throughout the customer experience, from start to finish as defined by the customers
– Understand types of people who use CRAFT, define how they identify as creators, and how the service integrates into their making process
– Understand what makes an ideal crafting experience
– Uncover all potential touch points throughout the customer journey

Research Activities

Front of House (FOH) WalkthroughDescription For each walkthrough, members of the design team will accompany a recruited participant from the moment a customer drives into the lot of CRAFT to the moment she leaves. After completing the walkthrough, we will walk with our participants to a nearby coffeehouse to do the Participatory Timeline activity (see below).  Secret ShoppersDescription We will ask 2 secret shoppers to walk through CRAFT  and take at least 15 photos as they go of the following things: – Things that catch your eye
– Moments you make decisions to explore a crafting material or not
– Things you like (fun, interesting, easy, etc.)
– Things you don’t like (confusing, annoying, boring, etc.)
– Things you think should be improved
– Things you needed help onAfter these secret shoppers complete their CRAFT experience, we will move to a nearby coffee house and review their photos with them. We will also have our secret shoppers create a map showing where they moved in CRAFT. Then we will move on to the Participatory Timeline activity (see below).

Participatory Timeline

DescriptionFor this activity, we will prompt our participants to create both actual and idealized timelines of their experiences at CRAFT. First, our participants will write or draw out a diagram of their actual activities in CRAFT, starting at the end of their time there and then working their way back to their perceived beginning of the experience CRAFT offers.
Then for the idealized timeline, for each step mentioned in the previous activity, our participants will select two images from a predetermined diverse array provided by us. They will pick one image that corresponds to their ideal experience of that step and then another that corresponds to an imperfect experience of that step, and then on to the next step, for which they will select another two images, and so on.


What do employees do at CRAFT and what do they hope for their clients?

Focus Statement

We have two focal points as we research CRAFT’s back of house. First, we want to understand how CRAFT’s owner, employee, and workshop facilitators spend their time at CRAFT. Second, we want to build a map of a perceived customer journey from the point of view of the workers at CRAFT. We will use this research so that we can find opportunities for innovation, where the perceived customer journey and the as-is journey do not match.

Research Objectives

Our goals are to:– Understand the owner’s, employee’s, and workshop facilitators’ perceptions of the value, service, and flow from start to finish of the customer journey
– Understand the culture of CRAFT among its employees
– Understand the owner’s, employee’s, and workshop facilitators’ roles and – responsibilities, both as stated and as actually lived
– Understand the actual and ideal work experiences of the owner, employee, and workshop facilitators at CRAFT
– Identify pain points encountered by the owner, employee, and workshop facilitators working at CRAFTResearch ActivitiesBack of House (BOH) Contextual InquiryDescription For each inquiry, members of the design team will accompany an employee as they carry out their work. We will inquire about motivations, values, and their personal history with CRAFT.Participatory TimelineDescriptionFor this activity, we will prompt our participants to create both actual and idealized timelines of their experiences at CRAFT. First, our participants will write or draw out a diagram of their actual activities in CRAFT, starting at the point of time when we are seeing them. We will ask them to work backwards and forwards through the their day. Then for the idealized timeline, for each step mentioned in the previous activity, our participants will select two images from a predetermined diverse array provided by us. They will pick one image that corresponds to their ideal experience of that step and then another that corresponds to an imperfect experience of that step, and then on to the next step, for which they will select another two images, and so on.
Customer Journey MapsDescription We will ask our contextual inquiry participants to complete customer journey maps that show all the activities customers undertake while at CRAFT. Starting from asking why customers walk through the door all the way through to the end of their interactions with employees, we will ask our participants to map out all the steps CRAFT customers go through. As they go, we will ask “What’s the best thing that has ever happened at this step?” and “What’s the worst thing that has ever happened at this step?” to elicit stories about each step.

Where we are in our process

We are currently unpacking our research by building a customer journey map.

IMG_0283 (1)

We are building this map so we can make the customer journey tangible so that we may uncover patterns and breakdowns. We will use this map to help us ideate and then prototype solutions.

We are hoping to innovate upon CRAFT’s current guest experience in order to fulfill their value proposition. Ultimately, our goal is to help ensure that each guest is able to walk away feeling that they’ve had a valuable experience, one that is seamless and connected wherein guests are able to spread the story of CRAFT to potential future customers. Thus, increasing CRAFT’s bottom line.

Redesigning Mobile Banking: “I don’t know what’s happening here”

In case you are reading this for the first time, for this quarter’s Rapid Ideation and Creative Problem Solving class, I am redesigning Bank of America’s mobile bank application.

For the last two parts of the assignment, I started by creating concept maps of the current and redesigned state of the mobile bank, this helped me visualize the complexity of the system. The next step was to come up with stories that introduced three users and scenarios where they would use a mobile bank app, all of them with different goals in mind: this was a scaffold for the first round of wireframes.

This week was all about usability testing and getting honest feedback from real users using the Think Aloud Protocol technique.

From my former set of wireframes, I integrated both the feedback that I gathered from my class peers and the one that I gathered from four different user testers.
The top three problems I found after this first round of testing were:
  1. The main menu was not easily perceivable
  2. There was confusion differentiating between Transfer, Send & Pay a friend
  3. Check balance menu should be easier to read and provide the necessary affordances to make it more actionable.


With the wireframes we created last week, we came up with different tasks and asked our participants to complete them. If they felt really frustrated, they were allowed to quit – they are not the ones being tested.

The tasks provided were as follow:

Task #1:  What is the next payment due for your credit account?
Task #2: Pay your friend Ethan Baldwin $100.00 by Nov 15th for Basket Ball tickets.
Task #3: Deposit a $300.00 check to your debit account.

Problem Area 1: Check Balance

Problem Area 1

Task #1

“I just don’t see how “transactions” is going to take me where I want to go. I would like to go to details, but it’s not taking me anywhere. Yeah, I don’t know…” – User Tester #1

Problem Area 2: Main Menu

I built my mobile UI prototype with the iPhone components found on Sketch. This inspired me to add a redesigned bottom navigation bar with these same components. From my point of view, the bottom navigation bar is useful due to the proximity the user’s thumb would have to the main menu – also called “the friendly thumb area”.
But I soon realized that this feature presented a lot of problems:
 Screen Shot 2017-11-13 at 2.40.25 PM
“”Move Money” seems strange to me, what does that mean?” – User Tester #2
I tested the mobile app with two baby boomers and they both really struggled at comprehending that the bottom navigation bar was a menu, and what each of the options where – both also hesitated from randomly taping to look for more options.
From these group of users, User Tester #4 was not able to go past the list of accounts because he did not think the bottom menu was actionable. After the session (which he was not able to complete) he mentioned:
“I would like to see a first step that asks you what is the main action that you would like to take, and go  from there. Kind of like a tutorial” – User tester #4
For those users that were able to find the bottom navigation bar, the menu options represented another concern.  First, “Move Money” did not mean anything to User Tester #2, and as she struggled to accomplish Task# 3, I was able to observe that the reason why she was struggling so much was also because the option she was looking for actually fit to “Send / Request Money”. She did not take the time to go through the rest of the options where she could have found “Pay a Friend” – these options didn’t adequately map to the options she normally uses, and were misleading due to the word choice.

“I think I’m struggling with this system because I’m not used to it yet, but I know that a couple of days from now I will probably know my way around it pretty well. I don’t mind exploring and tapping” – User Tester #2.

Problem Area 3: Deposit Check

Screen Shot 2017-11-13 at 2.50.15 PM

“I would like to see a series of steps instead of everything on the same screen. Having all of this is overwhelming to me.” – User Tester #3


After this first round of usability testing, I synthesized the findings and attempted to implement the changes to the application, but first, I started by modifying my initial concept map.

Revised Concept Map - Mobile Bank

With all of the feedback I received, I worked on a few suggestions to improve my current wireframes and added a couple of different ideas to the existing flow.

An example of this part of the iteration were the two following screens. One of them being the bottom menu where I opted to replace the icons with actual words.

Main Menu - Accounts       Home - What would you like to do?      List of Accounts

Next Steps

Unfortunately, there were several tasks that not most users were not able to complete due to the menu being such an issue. For this next round of usability testing, I will focus on figuring out how users react to the new menu concept. I will also be testing screens for Setting Recurring Bill Payments and Setting Alerts.

Wireframing: Redesigning Mobile Banking

For the second part of our Mobile Bank App Redesign project – recap for the first part here – we dived into wire framing.

We developed a few scenarios inspired in different types of people. This allowed us to think of different banking needs that other people might have and helped us understand what would motivate them to use a mobile banking application.

Using a – Character, Background, Context, Goals, Story – framework, we came up with three characters and four different scenarios they might encounter which would lead them to interact with their bank through a mobile application.

Isaac, 38

To start creating scenarios for our characters, we first started by “humanizing” them by giving them an identity, describing their motivations and unattained goals, and assign them a level of competence of the technology that we will be using to help them, in this case – a mobile application.

One of my characters is 38 year old Isaac, who is a freelance designer and has a 13 year old daughter. He works from his home office most of the time, while his partner works full time at a consultancy company. As part of his day-to-day activities, he takes care of grocery shopping, and everything that has to do with bills. He uses his computer for many of his activities but appreciates having his phone around to notify him of important events whenever he’s running an errand or visiting a client.

To start introducing the product into the live of Isaac, I assigned a context of the time and place that he will be in when he starts to use his mobile application.

Isaac recently opened a savings account to start saving for his 13 year-old daughter’s college. He realizes that he just missed one week of depositing into the saving’s account and is worried that this might continue happening and thus, end up saving less than he could have for her daughter’s education.

In order for Isaac’s needs to be fulfilled, the following goals would need to be addressed by the product that he will be interacting with:

Isaac would need to be able to:

– Know that there is enough money to make a transfer
– Know that money was successfully transferred
– Make sure the information is saved (to prevent future mistakes)
– Avoid having to repeat steps for this repetitive task

Story & Screens: Storyboarding

With my character’s background, goals and context, I was able to create the following story, which I segmented into key areas in order to organize my storyboard . Each key moment in the story gets assigned a screen on the storyboard. This process also helped at identifying key interfaces that I will have to create for my higher fidelity screens.

Screen Shot 2017-11-06 at 6.44.48 AM


Storyboard - Banking

Low fidelity UI


Wireframe Bank

First flow:

Transferring money, setting up reminders


This week, I will get the rest of my wireframes ready for user testing which will hopefully give me a lot great feedback to iterate my product.

Concept Mapping: Understanding Mobile Banking

The second quarter has started, and in our Rapid Ideation and Creative Problem Solving class we are learning how to redesign a mobile banking application.
The first step in our process has been to create a high level Concept Map of the basic activities that entail managing ones money through a mobile app.
I decided to choose my Bank of America mobile application since it is the one that I use the most. I have always had mixed feelings with this application and its web counterpart. The mobile app seems easier to use in some aspects but harder for others, and viceversa.
Before we dived into concept mapping, as a group, we started by brainstorming a bunch of words that we associated with banking. With these words, we created a 2×2 matrix in order to identify relationships between the main features / actions related to banking. The rows & columns with the greater number of interactions/relationships between each other are the ones that I identified as the essential features of the mobile banking activity:
2×2 Banking Matrix
Highlight 2x2 matrix

Once I identified these essential features, I translated them into a more digestible visualization – this is how the following “Relationships” Concept Map was created:

Relationships Concept Map (Low Fidelity)

Relationships - concept map

After this first attempt, I switched to Sketch and re-created a high fidelity version of the map:

Relationships Concept Map

%22Relationships%22 Concept Map(no title)

After our relationships map, we started by “dissecting” the existing application. We did this by taking a screenshot of every single screen on the app. We were to explore features that we had never imagined existed. We ended up with hundreds of screens. This helped us create an understanding of how the flow of the application worked, and it looked something like this:

Existing Screen Inventory 

Screen Shot 2017-10-30 at 11.27.34 AM

We then created a Navigation Information Architecture Concept Map based on the existing application. It got very saturated and complex after a while.

Existing Navigation Information Architecture Map



  • Circle size: I decided to communicate features with higher number of options by enclosing them in a big circle, the more options the feature had, the bigger the circle.
  • Line weight: I also decided to communicate higher frequency of feature use by using a thicker line weight.
  • Dashed circle: Are the customizable features that you can add from “settings”.

After recreating the existing Bank of America mobile application concept map, my understanding of the use of the app was bigger and brighter. I discovered new features I still don’t know if I’m ever going to use, but it also helped me think about possible use case scenarios of how I would go about using the app for a particular situation I were to encounter.

I used this new knowledge to create a redesigned version of the BoA mobile application:

Redesigned - BoA Concept Map

For my redesigned version, I highlighted blue and relocated the areas that I’ve noticed are important and might not currently be in the right place. BoA’s application puts their “Help” button front and center – which stays on the header – so that users can access and type in their questions for self-help. But a more clear placement and wording could guide users accomplish their most common banking tasks in an efficient way.

Bank of America’s mobile application has many features and products that can make it somewhat difficult to navigate, although I attribute the navigation difficulty to a few interactive elements. The app allows for customization which aims to fit different user needs. But this customization capability isn’t immediately obvious and can go unnoticed by many users. I asume this could be especially the case for those users that don’t take the time to explore the capabilities and who just prefer to schedule an appointment at a branch for their needs.

For the rest of this second quarter we will continue working on re-designing our banks mobile application. I’m excited to show the rest of the process!