Our Product Management class has kicked off Q4 by asking us to complete and refine our banking app flows and then partner with a developer to figure out how long and how expensive each piece would be to build through an end-to-end product evaluation. Up until now, we have been creating wireframes of what we would want a banking app to look and act like. This class is focused on how to actually bring that vision to market.
I was partnered with Chap Ambrose, an avid developer and alumnus of AC4D. To prepare the wireframes for the meeting with my developer, I had to break down the flows and label features and capabilities. This process shows how each piece of the app functions within a small slice of the experience so that it can be easily understood.
Below are my feature flows with callout explanations of specific features.
Cost of application build assuming the bank already exists
Theory of Interaction Design and Social Entrepreneurship
Like many AC4D students before me, a compelling reason why I applied to this program was it’s theoretical component. To form a theory of design for one’s self is to have a set of guiding principles and an informed mental conception of how the world should be based on reflection and consideration. Should is such a tricky word, though.
This past section in our Theory of Interaction Design and Social Entrepreneurship class, we read blogs and articles that put a harsh spotlight on designing for “good.” Readings touched on designing for the homeless, crowdfunding, corporate social impact campaigns, and the colonial aspects of westerners designing for other cultures.
I saw this section as running into the questions of both the role of the designer and how designers ought to approach design. Formerly, I would have advocated for not designing for or with other cultures unless invited. My undergraduate focus on the Middle East and the politicization of Islam gave me a healthy respect for the depth of chaos and trauma cultural and economic hegemony can wreak. Singer/songwriter Phil Ochs may be crass, but he captures well the moral failure of forcing democracy on other nations for our own gain.
But, what if, through design, I had the opportunity to make someone’s life better, or perhaps even an entire population? Is it enough to make incremental changes to improve problems, or should I push for board, systems-level shifts? As we are racing through this last quarter of the program, these questions seem less hypothetical and more urgent. The heaviest question seems to be, “if it is so easy, inevitable even, to screw up or demean someone’s life, why design at all?”
Once, when I was 17, I stopped by a Subway on my way home from work and ordered a sandwich. There were two other teenage girls behind the counter when a man in disheveled clothing walked in and, head down and apologizing over and over, put a mound of coins on the counter and asked for anything they could make for him. One teenager came over to the other at the register and said with dismay that she didn’t know what to do because the man didn’t have enough money. I immediately offered to pay for whatever the man wanted, took my sandwich, walked out to my car, and cried. I cried because it struck me hard that I hadn’t helped the man at all. He was just going to be hungry again in a few hours. He might need medical assistance, or a warm place to sleep. And I hadn’t fixed any of that. I felt like he and I were both just trapped in the way things were.
Thinking over that situation now, I still agree with my assessment that my actions didn’t change that man’s life in any indelible way – but, that also doesn’t mean the interaction was meaningless.
In my role as a community member, I was moved by another person’s need and tried to help a fellow human. Such a capacity for compassion and the desire to help isfundamental to our nature and can be the basis for meaning and purpose in our lives.
These close, organic interactions elevate peoples’ well-being, as well as those around them. This is evident at the restaurant Robin Hood in Spain, about which author Lauren Frayer writes.
The Restaurant takes in paying guests for breakfast and lunch, and serves free dinners to those who cannot afford them in the evening.
Humans on the Internet
This same sense of compassion moves many to find ways of helping their fellow humans, and with the internet as a tool of instant connections leveraging that human motive, compassionate giving morphs into viral fades of giving.
The Ice Bucket Challenge to raise funds for ALS research is a perfect example of this phenomenon. While the unsponsored “challenge” leveraged crowdfunding that gave the ALS Association a huge windfall, the uneven distribution of resources means that many other worthy causes do not get viral exposure or funding. The term “cause” even seems problematic if the objective is to move towards a more equitable and healthy society – why must diseases have to compete for public attention at all?
What this means for designers
Everyday and uncommon human connections create the proverbial fabric of society and our human bonds of affection, but they cannot alone shift unfair and uneven social outcomes. Designers by nature of their work, have the ability to push cultural shifts or conceive of better systems. As Jon Kolko explains, designers ought to be
“encouraging behavioral change and explicitly shaping our culture in a positive and lasting way.”
Design sits at the nexus of human connection and system change. While not a seat of absolute power, there is considerable responsibility in listening to and bringing the smallest voices to the table.
On the Importance of Theory to Design Practitioners — Jon Kolko & Richard Anderson in Conversation
The Fallacy of Good: Marginalized Populations as Design Motivation
The [Human] Codebreakers: What Every Company Gets Wrong about Developing for the Emerging World, and How to Do It Right
Rethinking Business Plan Competitions
Michael Gordon, Daniela Papi-Thornton
Did This New Nonprofit Crack the Code for Building Developing World Housing?
Save Africa: The Commodification of (PRODUCT) RED Campaign
Sex Doesn’t Sell Any More, Activism Does. And Don’t the Big Brands Know It
Our Misguided Focus on Brand and User Experience
Everything is Fucked and I’m Pretty Sure It’s the Internet’s Fault
Fortune at the Bottom of the Pyramid: A Mirage
The High Line’s Next Balancing Act
Reflections on Gratitude
A Bad Idea for ‘Fixing’ Homelessness That Just Won’t Go Away
Spain’s ‘Robin Hood Restaurant’ Charges the Rich and Feeds the Poor
This project was interesting because, unlike standard banking functionality, it required me to build something with which many people may not be familiar. The participants all had either never used a financial modeling tool, or had used one of which I was not familiar and which formed the basis of their mental models for controls and navigation.
It was a challenge to try to anticipate how users would perceive functionality, where things should live, why they are trying to accomplish the task I set up, and if they would ever use the features I was building in a natural, unprompted setting.
1. Results: Many testers were not familiar with financial modeling or budgeting apps and tended to have manual hacks that were laborious, such as reviewing all transactions for a month by pulling up banks statements for 8 different accounts (Laura). I believe that good design should not push a feature onto a user. It should rather make obvious a simpler way to accomplish his or her goals.
Learnings: In order to do this, there should be a useful tool within the accounts that leads to the financial modeling functionality, but only through a tool the user might find useful when reviewing their individual accounts. Discovery can happen after a positive iteration with a useful tool.
2. Results: Participants were confused about the safe to spend and, occasionally about the savings goal because they had not set those up to begin with. The participants who had little or no experience with financial modeling functionality relied on the wording of the goal and clicking around rather than prior experience.
Learnings: Because of this, some of my testing felt too contrived. While testing a new product may require a user to perform a task they would not usually try, there should be careful thought in what the task will be and how it is worded, so that it feels natural for the user to explore the product and dicker the functionality – not force themselves through it. For instance, instead of asking users to see if their Spotify promotion ran out by comparing this months bill to previous months, I could have asked them to see if they are spending a lot more on gas recently.
3. Results: By contrast there were different styles of exploration by testers, which affected the participants’ experiences and the quality of feedback I received. Some were slow and asked me for reassurance and I felt confident in asking them what they thought. However, some participants wanted to click around and explore everything just out of curiosity and to get a sense fo the whole environment. The result was a rapid tour of the app that ended up frustrating one participant in particular after he found the screen that accomplished mission #1, but clicked out of it without taking it in. He spent ten full minutes searching for that screen because he though eh had already tried that avenue.
Learnings: I am still practicing setting up and facilitating a user test. I improved in setting up expectations for how a desktop test would function, explaining pacing, and talking out loud. All of the participants seemed prepared and unfazed by the limited functionality and were great about sharing their thoughts with regular or minimal prompting.
However, I was not prepared for participants to just want to explore the environment and for those who did that quickly. I wanted to give each of them space to familiarize themselves with the app, but failed to slow people down sometimes.
Part of the issue was that participants kept wanting to go somewhere familiar to accomplish the mission, such as their accounts. Since I had not anticipated this, I had neither connected the accounts flows, nor built financial functionality into them. Tying back to my first learning, I believe linking the financial modeling functionality in the accounts could be more useful to users as they explore.
In my next round of testing, I intend to be more structured in how I regulate the speed of the test. I will set the user up to know that I will ask them to pause on most of the screens to tell me about them first and then I will keep that as a firm structure.
This week our team of Kim Nguyen, Aaron Steinman, and myself began creating and testing low-fidelity (lo-fi) prototypes of our four capstone project concepts. We will test and validate these ideas for the next three weeks to decide which one we will move forward with and build in Q4.
Getting to Ideas
Building on the research we conducted in Q2 with post-traditional prospective and working students, we applied rapid ideation techniques to come up with over 100 design ideas in our problem space.
The challenge was to use our insights combined with prompts, such as patterns we see in the world, and write down ideas – lots of ideas. All the ideas. I had a ton of anxiety about my ability to come up with “good” or “innovative” ideas. The rapid ideation methods helped to just start thinking.
We then filtered out the ones we found less fun, impactful, or feasible to make until we had just four sticky-note ideas left. This was a harrowing process as the results would dictate the direction of our final project.
I keep reminding myself that we need to keep what we learned from the people to whom we spoke in mind and we need to validate our design decisions based on real user feedback. The most important questions to answer moving forward is: Are we designing with the user? Are we building on a solid foundation from what we heard in the field?
This week we considered how to test aspects of our four concepts by creating lo-fi prototypes and getting out into the field. The prototypes are ways of conveying the idea to others in order to quickly gather feedback to push iteration. Below is a synopsis of our current four concepts.
Concept 1: Crowdfunded College
A platform that supports students soliciting loans for their education by crowdsourcing
Working students have to prioritize work over school, which leads to stress, lowered academic performance, or stopping out.
College students and prospective students will want to crowdsource student loans in lieu of working.
Testing Method and Prototype
We created a workflow diagram to explain how the concept would work.
We will test this diagram alongside a short storyboard to help validate the idea. Since the user would have to go through a lengthy process to solicit and repay loans, showing people the process should help them consider if that’s something they would find valuable.
Concept 2: Me Mentor
An app that promotes habits of reflection
Our participants told us how their time in school was challenging, not only because of the workload and academic rigor, but also the emotional and energy drain that it takes to operate through obstacles. We also heard an overwhelming need for a support network and positive people in their lives.
Low-income, working college students will want to and have time for goal setting and reflecting.
Testing Method and Prototype
We created a worksheet that helps with goal setting and reflecting and created a landing page to drive traffic. Anyone who signs up with their email can receive it for free.
Concept 3: Pre-Hire
An organization that uses the “apprenticeship model” to connect students to jobs in their field of study that supports their learning
Much like the Crowdfund College concept, Pre-Hire tries to answer the problem of being torn between the two competing demands on working students’ time: work and school.
Employers will be willing to hire and support students in completing their course of study (e.g. with flexible hours).
Testing Method and Prototype
We created a pitch for employers to quickly grasp the concept and let us know if they would be on board to proceed.
Concept 4: College Etiquette for the Bathroom
A book that delivers information about going to college in a humorous way
We learned from our research with prospective students that some did not go to college after high school because they did not have a “plan.” When they think about going to college now, they perceive the process to be a “simple” series of steps. This obscures the truly complicated web of obstacles to applying and persisting to a degree.
High school students will be interested in learning about college through the medium of a humorous book.
Testing Method and Prototype
We created a book cover and a table of contents to show potential users and gauge their interest.
This week was a tough slog towards prototyping and understanding how to test our ideas. We will need to catch up on testing early this week, iterate, create new prototypes to test further aspects of our concepts. And then we’ll do more testing.
Usability testing is all about observing what people do, listening to what they’re thinking as they do it, and then discerning why they are doing it. I learned this week that understanding the motivations and feelings behind users’ actions is the key to figuring out how to move forward to refine a design.
Since last week, I have taken my banking app redesigned wireframes out to the field to test drive them with real people. This involved finding five strangers to sit with me for half an hour and recording their journeys through checking their balance, depositing a check, and paying a friend through the app.
Recruitment for this project might have been an issue if not for the AC4D community. I was able to test five friends of AC4D, including an alumna. (Shout out to Adam and Cristina for organizing a quest and beer airframe testing meetup). While this was an expedient way to recruit, I wish I had tried to venture out and convince some people with no social connections to the school.
In our next round of testing, I plan to sit in a public space and try convincing complete strangers to give me their time and attention for compensation as small as a cappuccino. Starting conversations and practicing explaining the value of both design and wireframe testing to those with no prior knowledge of design will force me to internalize that sentiment.
All of my participants were within the age range of 32-45, and all used a banking mobile app for most of their transactions.
The Art of Think Aloud Testing
The two participants who were familiar with UX were easy to guide in think aloud testing, which has the facilitator prompt the user to continuously voice his or her thoughts. However, I struggled to word questions for the non-designer/developers. I would notice a behavior, such as moving quickly and missing an option, and could not figure out how to get at why they chose that particular path. Video recording the screen and audio recording the test helped me in review, but I shall write out a list of prompting questions for myself next time so that I don’t get completely stuck during the interview.
I also found that some participants became a bit frustrated at the slow pace of think aloud testing and me continuously asking, “why did you do that?” or, “what do you think will happen when you press that?” In the future, I will prepare my participants better for the sometimes halting pace of this kind of interview.
“I didn’t notice that problem until the moment you sat down in front of my wireframe.”
– My own internal dialogue
Testing revealed a bevy of design hiccups, but here are the top two issues I discovered:
Where do I click to take a photo?
In the flow to deposit a check, all participants got hung up on when and where to click to photograph the check. While most of this confusion had to do with the clunky nature of wireframes and the fact that we were testing on a laptop instead of a mobile phone, I noted that there was a universal preference to click the large photo area over the small camera icon button, which was the only way to take a photo.
One of the participants, Laura, clicked around for a few second before saying quietly, “I guess I’m not doing it right.”
In my next refinement, I will expand the clickable area for photographing and also try testing on a mobile phone through the Invision app.
To “Pay” or to “Send” money to a friend?
While working on my concept map for the app, I was reminded that nomenclature is a critical component of information architecture. I was confident that most people have had enough consistent experience with digital payment functionalities to share my understanding of the subtle differences in connotation between “pay,” “send,” and “transfer.” Testing proved that wrong.
Most participants associated ” bill pay” with a more formal debt, but there was still hesitation between that and “transfer/send” when asked to pay a friend $20 through he app.
I asked the participants what they associated with each term and found that inconsistent experience with how those terms are used across digital spaces and over time created the biggest confusion.
“I know transfer is they have to have your same bank, and bill pay is someone not inside your bank. But that’s not always how I feel like it works.”
Since mobile banking is a tool used by an extremely wide array of people and I learned there is inconsistency in how the terms are used in different contexts (think Venmo’s “pay,” Paypal’s “send” and the skeuomorph “wire transfer” derived from the telegraph), the solution may not meet every user’s needs.
I will try to test matching terms and concepts independently of the app first. I will try using a card sort method to test terms independently of the product and get some more data around which terms are more appropriate. I will also look for an icon that could more effectively convey a person-to-person transaction.
Moving forward, I will be refining the large and small user interface issues that surfaced during testing.
This week has felt like an explosion of learning and doing! We built out wireframes for our mobile banking app redesign and thought through how a user moves through a flow to accomplish a goal, such as checking their bank balance.
Start with a Story
I learned that user flows should begin with a story about someone who will use the product in order to predicate one’s decisions in human behavior. The first time I attempted a story though, I found myself writing about how the protagonist moved through each screen. The main character was a woman who was new to smartphone technology and was easily frustrated when she found the system unintuitive. The narrative was stiff and unnatural, so I had to rewrite the narrative at a higher level and focus on the woman’s behaviors and feelings. This helped me to realize that she would be happy with the “auto capture” feature I added to the “photograph check” screens.
Sketch Out User Flows
I started with hand sketches on a stencil of an iPhone X screen. The grid and the low-fidelity sketches helped me to quickly realize how details related to one another in each screen and in the overall consistency and navigation of the system.
I needed to add in screens that showed information being entered, so that the prototype would show the user a logical progression. For instance, you can see below how screen #8 jumps from an empty “Enter Amount” field directly to a confirmation screen.
Our quarter three studio class continues with the research we did last quarter around post-traditional students. Due to some internal class changes, I have moved groups to join Kim Nguyen and Aaron Steinman, who are focusing on working students. While the focus statement and characteristics of the participants have shifted, my research with prospective students is still relevant as there is a lot of overlap in personal struggles, influences, and student goals.
This week we were asked to create a concept map in our domain of interest in order to reframe our understanding of the college system and how the people to who we spoke fit into it. This is a different exercise from my previous concept map mapping a financial banking app because that was a bounded system with a limited number of pathways and affordances. When approaching this assignment, it was difficult to know what terms to use in the map and to figure out a clear way to connect them to show their relationship to each other and to the whole.
Where to Start
I began by going back to my data from quarter two and creating a list of terms from the most prominent concepts in my themes and insights. I then connected them and described their relationships, but my initial map was a mess.
The guiding theme of the map was “Reflection,” as that has been an interesting concept to me while theming and developing insights. The fact that persisting through college requires people to constantly be weighing options and navigating personal and scholastic obstacles necessitates the ability to reflect on students’ actions and ideas. The data shows the students with the strongest ability to reflect generally had more robust plans for navigating future potential obstacles. However, I do not think this map *ahem* reflects those findings.
I tried sketching different layouts to optimize for readability and aesthetics, but I struggled with having the diagram come together to make my broader point. I used printouts of the terms and moved them around on a table in various groupings until I thought I had something workable, which I recreated in Sketch.
While this is my most recent iteration, I’m still not satisfied that the map goes deep enough to show what I know about this space in an interesting and provocative way. Perhaps some feedback in class today can push another iteration closer to the mark before I begin the next phase of applying semantic and temporal zooms.
Quarter three has begun in earnest with a big shift towards learning about the later phases in the design process. The class Designing Digital Interfaces with designer Chrissy Cowdrey will challenge us to comprehend existing digital infrastructures, and build out redesigns through sketching, building wireframes, presenting and eliciting feedback. Since most design solutions will have some digital touchpoint, learning how user interface components and controls function to support interactions and design goals is critical.
Building on what we learned in quarter two in our Designing Systems class, the first assignment for Designing Digital Interfaces is to create a concept map of the existing navigation and information architecture for a mobile banking application and then rearrange the elements to optimize for usability.
Concept Mapping: Current State
The first step to redesigning a digital system is to capture its current state. I chose to map the Bank of America app, beginning with exploring and writing down terms of key elements. I then drafted a diagram by hand and recreated it in Sketch.
Below is my current state map.
There are three tiers of importance for each component represented by circle size. Larger circles are more important elements than smaller circles. The lines and arrows represent how elements are related by indicating the flow of access to one another.
Concept Mapping: Designing the Future State
Next, I considered elements that seemed awkwardly placed or perhaps did not belong at all. I shifted elements around in order to simplify interactions or make them more intuitive to optimize usability.
Below is my future state map.
In the current app design, Bank of America has a “My Dashboard” link that seems redundant in some ways, and hides other features. My redesign proposes putting those features in the Accounts section with an option to customize what is displayed, and doing away with “My Dashboard” altogether.
Furthermore, there is a catch-all area in the current state called “menu,” which leads to one’s profile, some personal settings, support options and features that also appear elsewhere, such as checking one’s FICO score. This term confounds the user as to where it might lead, essentially hiding those options. In the future state, I have simply renamed this button “Profile” to make it more clear. Considering several essential components are already visible in the top level navigation and the term “menu” could mean any number of things, using “profile” to describe this section will not only indicate that this is where users can find profile information, but will also make those extra features and support section more discoverable as users are more likely to click on a button they understand to be valuable to them.
Ultimately, these the changes in the future state are not a great departure from the current one, but they do simplify and clarify existing navigation to increase usability. Every change that decreases the cognitive load on the user contributes to an easier and more pleasurable digital experience.
We are wrapping up our second quarter and that means finalizing our team service design projects. Through our research process Sara Miller, Shelly Stallings, and I have identified opportunity areas for our client, the Buzz Mill in Austin, and have design recommendations that will help them to achieve their goals.
Our team had created a website to document our research process, which we invite you to explore.
Making decisions about education can be a daunting and on-going process. As we hear more stories from prospective students who are trying to figure out what they will choose for their major and career paths, we have begun to notice patterns in what tips the scale form one decision to the next.
Patterns in the Stories
Oftentimes, there is a strong feeling motivating people to do a specific type of work, such as caregiving, while points of inspiration can come from trying something once, or seeing it on a dramatized television series. When it finally comes time to choose a definite career path, choices are often limited to the list of majors a school offers.
This concept model visualizes how the internal processing and external circumstances work to shape a prospective student’s ideas about what career path he or she should work towards.