To Build an App: Partnering with a Developer

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.

Feature_1

 

Features_2 Features_3 Features_4 Features_5 Features_6 Features_7 Features_8 Features_9 Features_10 Features_11 Features_12 Features_13 Features_14 Features_15 Features_16 Features_17 Features_18 Features_19 Features_20 Features_21

Cost of application build assuming the bank already exists 

90.5 Days

724 Hours

$144,800

From Human Connections to System Change – Why I Design

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?”

Human Connections

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 is  fundamental 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.

Robin Hood restaurant in Spain providing free meals to evening guests
Robin Hood restaurant in Spain providing free meals to evening guests

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.

 

 

 

Readings 

Chaos Theory
Dahlia Lithwick

On the Importance of Theory to Design Practitioners — Jon Kolko & Richard Anderson in Conversation
Richard Anderson

The Fallacy of Good: Marginalized Populations as Design Motivation
Joyojeet Pal

The [Human] Codebreakers: What Every Company Gets Wrong about Developing for the Emerging World, and How to Do It Right
Jessi Hempel

Rethinking Business Plan Competitions
Michael Gordon, Daniela Papi-Thornton

Did This New Nonprofit Crack the Code for Building Developing World Housing?
Adele Peter

Save Africa: The Commodification of (PRODUCT) RED Campaign
Cindy Phu

Sex Doesn’t Sell Any More, Activism Does. And Don’t the Big Brands Know It
Alex Holder

Our Misguided Focus on Brand and User Experience
Jon Kolko

Everything is Fucked and I’m Pretty Sure It’s the Internet’s Fault
Mark Manson

Fortune at the Bottom of the Pyramid: A Mirage
Aneel Karnani

The High Line’s Next Balancing Act
Laura Bliss

Reflections on Gratitude
Richard Anderson

A Bad Idea for ‘Fixing’ Homelessness That Just Won’t Go Away
Candace Faber

Spain’s ‘Robin Hood Restaurant’ Charges the Rich and Feeds the Poor
Lauren Frayer

Yet Another Dilemma
Richard Anderson

Banking App Redesign: Financial Modeling

Financial Modeling User Flows
Financial Modeling User Flows

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. 

Designing for the User: Ideation to Lo-Fi Prototyping

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.

Aaron moves a sticky-note design idea into the feasible/impactful-not fun quadrant
Aaron moves a sticky-note design idea into the feasible/impactful-not fun quadrant

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?

Lo-Fi Prototyping

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

Problem

Working students have to prioritize work over school, which leads to stress, lowered academic performance, or stopping out.

Hypothesis

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.

Crowdfunding College Workflow Diagram
Crowdfunding College Workflow Diagram

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 

Problem

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.

Hypothesis

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.

Me Mentor_Guide_1


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

Problem

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. 

Hypothesis

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.

Slide from the pitch to employers for Pre-HIre
Slide from the pitch to employers for Pre-Hire

 


Concept 4:  College Etiquette for the Bathroom

A book that delivers information about going to college in a humorous way

Problem

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. 

Hypothesis

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.

College Etiquette for the bathroom cover mockup
College Etiquette for the bathroom cover mockup

 

What’s Next

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 of UI: Testing Wireframes

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

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.

Problem Discovery


“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:

Problem #1

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.

Most participants wanted to click the red area to take a photo, while the green area was the only way to do so

One of the participants, Laura, clicked around for a few second before saying quietly, “I guess I’m not doing it right.”

Solution

In my next refinement, I will expand the clickable area for photographing and also try testing on a mobile phone through the Invision app.

Problem #2

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.

Participants were somewhat confused about the meanings of "pay," "send," and "transfer"
Participants were somewhat confused about the meanings of “pay,” “send,” and “transfer”

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.”

Ashley


 Solution

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.

Banking App Redesign: Wireframing

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.

Sketch: Deposit Check Flow
Sketch: Deposit Check Flow

Tools of the Trade: Sketch, Craft, and Invision

Sketch + Craft: User Flows to send money to a friend
Sketch + Craft: User Flows to send money to a friend

Concept Mapping an Unconfined System

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.

Concept Mapping

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.

First iteration of concept map
First iteration of concept map

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.

Iterating

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.

Final iteration of concept map
Final iteration of concept map

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.

Concept Mapping: Redesigning a Mobile Banking App

Designing Digital Interfaces

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.

Concept map of current Bank of America app
Concept map of current Bank of America app

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.

Concept map of redesign for Bank of America app
Concept map of redesign for Bank of America app

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.

Takeaways

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.

Service Design at Buzz Mill

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.

Buzz Mill Coffee Shop in Austin
Buzz Mill Coffee Shop in Austin

Educational Decision-Making: How Prospective Students Decide a Career Path

What We Are Hearing

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.

Concept Model

How prospective students decide their career path
How prospective students decide their career path

 

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.