Figuring out how to promote a healthy diet, one grocery item at a time

My team and I are developing a service to help someone gradually adopt a healthier diet. First, we will find the cheapest way to buy a shopper’s grocery list, and then, we will gradually suggest healthier substitutions or additions.

Testing our service

To refine the idea, we will recruit shoppers to test our service over the next several weeks. During our first week of the pilot, we plan to follow each participant through the store to learn as much as possible about their shopping habits, decision making, and meal planning.

IMG_0220

As the original idea took the form of a mobile app, this exercise will help release our minds from the design of “the screen” and help us focus on the value delivered. Even if the final manifestation is an app, interacting with the participant in-person will allow us to discover the ideal “conversation” to help the shopper receive the maximum benefit.

One drawback of this technique is that our presence may make shoppers more likely to choose the swap offered. Additionally, we will provide $5 HEB gift cards to thank shoppers for their time, which may make shoppers feel obliged to take our recommendations. Results may therefore be skewed. It will be important to lessen our physical presence as quickly as possible in subsequent weeks.

Recruitment

We will target people who go grocery shopping on a regular basis and need help adopting a healthier diet. This means that our recruitment efforts will span across socio-economic status. To quickly screen, we will ask potential participants to send photos of their refrigerator, freezer, and pantry, for a quick assessment of the kinds of food they bring home. 

part0-1 part0-2

If you think about health on a spectrum, from burgers to salad, we’re looking to help people who buy more food towards the burger end of the spectrum.

spectrum.001

As we aim for gradual change, we hope to recruit at least 5 participants who will test with us multiple times over the next month. This duration will help us project whether or not our tactics and suggestions will make a positive difference in the long run.

Coupons

Given our effort to help shoppers save money, we began to look into coupons. After a bit of research, we realized that we must be careful to ensure that we’re actually using coupons to benefit the customer, and not the corporation.

IMG_0192

According to Rice University professor, Utpal Dholakia Ph.D, the pitfalls of coupons boil down to four main factors:

  • Regular coupon users pay less attention to the actual price and often end up paying more money.
  • Regular coupon users buy things they don’t need.
  • Regular coupon users buy more than they need.
  • Regular coupon users spend beyond their budget.

IMG_0250

Indeed, when we ran the pilot for the first time, our shopper considered taking advantage of the “2 for $6” yogurt sale, but then realized that she could not finish all 8 yogurts before their expiration date.

When we suggest sales, coupons, or lower prices, we must make sure that we’re not distracting our shoppers from a more responsible choice. 

Subject Matter Experts & Nutrition

We know that there are as many different opinions about health & nutrition as there are people in the world. It seems there’s always a new study about why this food may be good for you and that food bad.

Given the complexity of nutrition as a science, we will engage Nutritionists throughout the process to 1) make healthy swap recommendations and 2) frame why one food may be healthier than the other.

When running through our very first test, we saw just how much we needed this expertise. This particularly clear than on the bread aisle — so many different choices! Moreover, even if we find the “healthiest” bread, our recommendations must also fit the shopper’s taste preference as well as budget.

IMG_0223

The Paradox of Choice: Fighting the power of brands & familiarity

The grocery store can be an overwhelming place, which is no wonder why we’ve met so many people who buy the same thing over and over again.

Have you ever actually looked at all the options down the cereal aisle?

IMG_0235

There are 12 different kinds of Cheerios, alone: Cheerios, Honey Nut Cheerios, Very Berry Cheerios, Multigrain Cheerios, Apple Cinnamon Cheerios, Honey Nut Cheerios Medley Crunch, Chocolate Cheerios, Fruity Cheerios, Cheerios Protein, Frosted Cheerios, Cheerios + Ancient Grains (?), and Pumpkin Spice Cheerios (so you can be in the holiday spirit, all year long).

Because of the incredible volume and variety of grocery inventory, it’s understandable that a customer’s brand loyalty would be hard to break — why spend time analyzing a sea of options, when your current choice is sufficient? Observations like these also prompt questions like:

  1. Rather than trying to influence a shopper’s cereal choice, would it be better to focus our efforts on change that might occur on an aisle with fewer choices, leaving the shopper with more mental space to consider other options?
  2. Or, if we endeavor to tackle the cereal aisle, would it be best to introduce a new, healthier item before the shopper enters the grocery store, before she becomes too distracted by all the other choices?

The more I learn about grocery shopping, the more I learn about the marketing strategies and business behind it. For example, I had no idea that stores rent out shelving space, and that, depending on the shelf, companies will pay more or less; the most expensive shelving is “the bull’s eye” zone (usually the 2nd and 3rd shelves), as it’s in the customer’s eye line.

In order to help our shoppers, we will have to compete with powerful marketing techniques, and help our customers look above and below for cheaper, and healthier options. A benefit of our service is offering 1-2 healthy alternatives per the shopper’s original, unhealthy choice — still giving the shopper a choice, but not so many that lead to overwhelm.

Capturing Feedback & Results

To capture feedback and results, we will document the shopper’s entire journey through the grocery store via photos, highlighting different decision points.

IMG_0281

We will also note the shopper’s path through the store, presenting what other items they might naturally see or pass, and therefore be more open to try in the future.

Lastly, as the shopper goes through the entire process, we will check and update the following assumptions:

  1. People use grocery lists, and if not, they will use one
  2. People will choose a healthier option if prompted
  3. People will choose a lower price over a brand they like
  4. People are willing to leave brands and items they’re used to
  5. People generally want to eat healthier
  6. People will eat new items they purchase
  7. People will be more likely to buy a new item if they get the new item before they get the original item

Measuring Success

To measure success, we will note the following:

  1. How many of the healthy alternatives the shopper accepted and why.
  2. If we were able to save the shopper money, and if so, how much.
  3. If the shopper would like to use our service again.

Other reflections

Keeping our eyes on the prize: Given the fact that coupons, price comparisons, and sales are so immensely complicated, we’ve found ourselves focusing more on how we can help someone save money, than eat healthily. In order to make an impact, we must keep coming back to our core value — helping someone gradually adopt a healthier diet.

Impulse Buys: One question we’ve asked ourselves is how we plan for impulse buys. When surrounded by so many options, it’s only natural for shoppers to pick up items not originally intended. In that instance, how does our service push the healthiest, cheapest option?

Convenience vs. Stick: If we go ahead and pull the healthiest/cheapest grocery items, we believe the shopper will be more likely to adopt those items. On the other hand, giving the shopper a choice, prompting slightly more reflection and initiative, may make the healthier habit more “sticky.”

Grocery Pilot Plan Presentation v1x

The Best of Outcomes > The Best of Intentions

Designers have great power to shape the future of humanity, and with that, as Stan Lee would say, comes great responsibility. Therefore, at AC4D, we focus on using design to make a positive social impact. But how do we know if the change we wish to inspire will have the desired effect? Or worse, how do we know it won’t bring negative consequences?

The truth is, even with the best of intentions, we can’t know how our design will affect society until it’s released in reality. At that point, intentions become irrelevant, and outcomes are the only significant measure.

The Best of Intentions: One-Size Fits All

As Michael Hobbes writes in his article “Stop Trying to Save the World,” many well-meaning aid efforts have followed the trend of “exciting new idea, huge impact in one location, influx of donor dollars, quick expansion, failure.”

As a case in point, consider the clean drinking water project, Playpumps. It was an inspired idea — a water system that used the energy created by children playing to operate a water pump. People need water, children need to play, it seemed like a perfect combination. Although initially lauded for its innovation, it was quickly criticized for being too expensive, less effective than traditional hand-pumps, and reliant on child labor.

playpumps

According to Hobbes, “Many of the villages hadn’t even been asked if they wanted a PlayPump, they just got one, sometimes replacing the handpumps they already had. In one community, adults were paying children to operate the pump.”

Nevertheless, this idea should not be discounted altogether — in some villages, under the right circumstances, they were helpful, and are still installed as a “niche solution” on playgrounds and at schools in poor rural areas.

The real issue was not that Playpumps was a poor idea, but that it was poorly executed.There was little collaboration or research with the people the organization sought to serve, and the implementation was “one-size-fits-all” — based on the fact that since it was an effective solution for some, it could be applied to everyone.

The Worst(?) of Intentions: Corporate Social Responsibility & Cause Marketing

Corporate Social Responsibility
Advocacy is now rivaling sex as Corporate America’s main selling strategy. For example, in response to the Drumpf administration’s travel ban, Airbnb offered free housing to anyone denied entry and Starbucks pledged to hire 10,000 refugees. Seeing this primarily as a marketing tactic, Alex Holder writes that “it’s difficult to separate the fact that while these brands are showcasing pedigree social responsibility, ultimately they’re helping refugees because it sells milky lattes and cheap holiday accommodation.”

In another related example, Lyft donated $1 million to the American Civil Liberties Union after Uber continued to pick up passengers from the JFK Airport amidst a taxi driver strike against the travel ban. Soon after, Lyft bested Uber in the App store for the first time.

While there may be ulterior motives to these corporate actions, the question is… does it matter? Free housing, jobs, million dollar donations… indeed, there is a clear benefit to the companies in terms of public favor and increased revenue, but would we rather do without these grand gestures?

Perhaps it would be stronger ethically for companies to contribute socially, but to do so quietly. But, if not for Lyft’s public donation, Uber may not have pledged to provide legal support and establish a $3 million legal defense fund for threatened drivers.

Cause Marketing
Product(RED) is an organization that recruits companies like the Gap and Apple to participate in cause marketing, donating a portion of product sales to the fight against AIDS. While Product(RED)’s intentions seem pure, some believe that corporate partners only use the charitable association to sell more goods.

beats

Apple donates a portion of its red Beats headphone proceeds to Product(RED).

Buylesscrap.com is particularly critical of Product(RED). It rallies people to reject the “ti(red) notion that shopping is a reasonable response to human suffering” and to donate directly to the Global Fund, without consuming.

Yes, we all need to buylesscrap.com. Yes, we’re destroying the environment. Yes, we’re screwed and the rich are moving to Mars… and, if Product(Red) can capitalize on a deeply ingrained behavior, and raise $465 million to help prevent HIV… can we really fault them for it? I’ll make buylesscrap.com a deal — if they can eradicate consumer culture, I will switch my position and insist that Bono find another way to save the world.

While it’s clear companies have something to gain from their social impact initiatives, their investments and corresponding promotions unquestionably benefit society.

The Worst of Internet: the Rise of Fake News

According to author Mark Manson, the early creators of the internet had good intentions.

“They worked for decades toward a vision of seamlessly networking the world’s people and information. They saw greater empathy and understanding across nations, ethnicities, and lifestyles. They dreamed of a unified and connected global movement with a single shared interest for peace and prosperity.”

Oops. Especially with the rise of fake news, and Facebook’s almost impenetrable echo chambers, we seemed to have missed the mark. 

161030122157-fake-news-stelter-00003403-540x304

But then I realize that the internet is a reflection of our society — “echo chambers” have always existed. We love to surround ourselves with like people, it makes us feel safe, secure, and validated. “Fake news” has always been there — the rewriting of history books, or (less severe), those “FW: FW: FW: Obama…” emails from your grandparents — the only difference is it can now travel exponentially faster through the veins of social media.

The good news is that now these very tribal tendencies of pushing out or dismissing the “other,” over perceived differences, are now out in the open. The public outcry against echo chambers and fake news is a call to get curious about the other, to learn about their hopes, their fears, their dreams, and perhaps find some common ground.

In a way, this is a signal for a new iteration of the internet. Designer Jon Kolko says that both the good and the bad are designers’ fault and their ongoing responsibility. I also argue that, as consumers, we have a responsibility to think critically about how we interact with a particular product or service. So, while the initial intentions of the internet did not become what 80s and 90s technologists dreamed it would be, designers and its consumers have a responsibility to create a new version, and keep moving towards the greater vision of peace and understanding.

Conclusion

Sometimes impure motivations can still bring great benefit, and other times, good intentions can bring about the worst of consequences. As designers, the best we can do is diligently research the problem we’re trying to solve, project all the possible implications of our proposed solution, and continue to iterate as the design interacts with the world.


Other Explorations

To explore the complexities of social impact, I created a simple board game that follows the development of a non-profit organization working to increase access to education among low-income individuals in Managua, Nicaragua.

The game requires, at minimum, two teams of two, wherein each team takes turns pulling out cards from the deck. Depending on the outcome of the card, the team would move closer or further away from the finish.

Profound Pursuit board

Research 1

Research 2

Execution 1 Execution 2 Funding 1 Funding 2  Sketch 1 Sketch 2 Sketch 3 & Echo Chamber

 

Product Management Part 3: Feature Brief

Over the past two quarters, the class has gone through a process of redesigning AT&T’s mobile application. This process has included:

  1. Brief research to find pain-points within the current app and to uncover what’s most important to the user when managing her mobile account.
  2. Concept modeling to understand the key functionalities of the app.
  3. Ideation to design new flows.
  4. Evaluating, testing, and iterating on those flows.
  5. Estimating how long each design would take to develop.
  6. Creating a product roadmap, detailing how and in what sequence each flow would be built.

Our latest undertaking is the Feature Brief. A Feature Brief is a document that presents a simple, cohesive vision of what you should build and why you should build it. It acts as a north star for the product and its development.

The Feature Brief communicates insights found through research, design pillars inspired by the insights, what value the product will deliver (the value promise), a high-level description of the app’s key features and capabilities, and a roadmap of how a team will build the app.

Insights
Through a brief stint of research, I observed the following:

  1. People have an emotional attachment to their phones, acting as an access point to their social networks.
    love
  2. Customer’s usage varies throughout the billing cycle, leaving them wondering if they will exceed their limit.
    unknown
  3. AT&T offers an overwhelming amount of features and add-ons, distracting the customer from their primary needs.

overwhelm

Design Principles

Based on the above insights, I crafted my design to follow the below principles:

  1. Our product should make customers feel secure that they will always have access to their phones and their usage will never be threatened.
  2. Our product should give customers a clear understanding of their data usage and protect them from overage fees.
  3. Our product should prioritize what customers want to see, and progressively reveal more advanced features as the customer indicates interest.

The Value Promise

The value promise encapsulates the three design principles: Our promise is to give customers complete control and clarity around their mobile phone usage.

Key Features & Capabilities

Our research determined that the following capabilities were most important to customers:

  1. Make a bill payment
  2. Set up autopayment
  3. Manage data usage
  4. Change plan
  5. Upgrade phone
  6. Edit Account Settings

These determined the features & capabilities outlined below.

myAT&T Redesign Feature Brief - Sally images.011 myAT&T Redesign Feature Brief - Sally images.012 myAT&T Redesign Feature Brief - Sally images.013 myAT&T Redesign Feature Brief - Sally images.014 myAT&T Redesign Feature Brief - Sally images.015 myAT&T Redesign Feature Brief - Sally images.016 myAT&T Redesign Feature Brief - Sally images.017 myAT&T Redesign Feature Brief - Sally images.018 myAT&T Redesign Feature Brief - Sally images.019 myAT&T Redesign Feature Brief - Sally images.020 myAT&T Redesign Feature Brief - Sally images.021 myAT&T Redesign Feature Brief - Sally images.022 myAT&T Redesign Feature Brief - Sally images.023 myAT&T Redesign Feature Brief - Sally images.024 myAT&T Redesign Feature Brief - Sally images.025 myAT&T Redesign Feature Brief - Sally images.026 myAT&T Redesign Feature Brief - Sally images.027 myAT&T Redesign Feature Brief - Sally images.028 myAT&T Redesign Feature Brief - Sally images.029 myAT&T Redesign Feature Brief - Sally images.030Strategic Roadmap

To build this app, I created a high-level strategic roadmap, outlining the order in which each capability would be built.

myATT Strategic Roadmap - Hall

myAT&T Strategic RoadmapmyAT&T Strategic Roadmap

Product Management Part 2: Product Roadmap

Over the past number of months, we’ve worked to redesign AT&T’s mobile app. This app allows customers to pay their bill, change their plan, manage their data, and upgrade their phone.

Roadmap

After designing the ideal flows, we worked with developers to estimate how long it would take to build each capability. Based off of this information, we created a product roadmap, a horizontal timeline demonstrating how and in what sequence we would create each flow.

Although we designed for an ideal state, without time or financial constraints, the product road map demonstrates how we would ship the app using two developers, releasing a minimum viable product in one month, and two updates released over the following month.

myAT&T Roadmap v3

The road map isn’t meant to track the project hour by hour, or feature by feature. It’s simply to give a general priority and visual timeline for the build out.

Thin Slicing

To fit the first release into one month, we went through a process of “thin slicing.” This means removing capabilities that are not essential to the functionality of the app, while maintaining the app’s core value.

In this instance, we cut out some features within flows, as well as removing whole flows altogether. For example, within the Make a Payment flow, we cut out PayPal and Apple Pay from the minimum viable product and included them in the second release. As paying with a credit card or checking account are available in the first release, these methods were convenient, but not essential.

We also simplified the interaction, exchanging radio buttons and a button for a table. Lastly, we also removed the customized line within the tab bar, as again, it was not essential to the app’s functionality.
Payment 2 Thin Slice Payment 2 Version 1

Whole flows such as Changing your Plan and Upgrading your Phone were also left out of the first release, as, again, they are not core to a customer’s management needs. I will note, however, that although Changing your Plan was not in the first release, we still allowed the customer to control her usage by including the ability to activate “slow mode” (preventing data overage fees), purchase more data for the month, and suspend/deactivate your phone.

For the first release, we prioritized structural components such as the tab bar and the page titles, as well as the following capabilities:

  1. Log in & out
  2. Make a Payment via credit card & checking
  3. Set up Autopay
  4. Data Management: Activate “Slow Mode”
  5. Suspend Device
  6. Get more data for the month

Here is a complete view of the minimum viable product:

Make A Payment for print

Autopay for print Data Slow Mode for print Data: Top off data for print Devices: Suspend for print  Login & Homescreen for print

Log out for print

The following will be included in the second release:

  1. Make a Payment via PayPal & Apple Pay
  2. Account Management
  3. Change Plan

The third release will include:

  1. Upgrade phone

Product Management Part 1: Development Estimation

For the past few months, we’ve worked to redesign AT&T’s mobile app. The process has included research, concepting, sketching, and wireframing, evaluation, & iteration. The next step of the process is product development — bringing the app into reality.

Design vs. Product Development

As designers, we are user-centered; we focus on people, their goals, and the way the design will support their experience in achieving those goals. Design is all about visualizing an ideal state and sketching our way to that future.

Once we get into production, however, we must also be technology-centered. “Shipping,” or product development requires the product manager to be pragmatic as she brings the product to market.

While the design process is all about the user’s behavior and feelings, product management zeroes in on the system’s components, features, and controls.

Shipping

The first step to shipping is consulting with a developer. While designers love to play in ambiguity, developers tend towards “well-defined” problems, strive for efficiency, hate to do the same work twice, and guard their time.

Although these two mental frameworks may seem antithetical, it helps the designer move from “blue sky” to “realistic,” consider reusable components (leading to efficiencies), and get ready for sizing.

Sizing

Sizing is a method for assigning relative time estimates to build unique features, components, and controls. Sizing helps guide priorities, identify total time on task for a development effort, and steer redesign efforts to quickly launch the product.

Sizing, despite being often being wildly inaccurate, 1) provides clarity to stakeholders who have to commit to delivery (to a board of directors, for example); 2) provides clarity to marketers, who need to build campaigns around delivery dates to understand an order of magnitude for producing a product; 3) gives the entire team a view of the product, so they understand it thoroughly; and 4) forces detailed interactions between the designers and developers.

Sizing Method

To size my wireframes, I walked my developer through my flows, and he estimated how long it would take him to create each component, screen by screen. He gave his calculations in “man days” (a man day being equal to one day of work for one person), and estimates ranged anywhere between a half day to 3 days. 

Then, I asked my developer to estimate how long it would take two developers to create each flow. To my surprise, instead of simply halving his calculations, he divided them by 1.5, to account for sick days, inefficiencies, or unforeseen roadblocks.

As, again, sizing is often inaccurate, I then took his calculations and added a 30% padding to each, a common practice among product managers. You can see calculations illustrated below, as well as in this spreadsheet: myAT&T redesign estimation – Sally 

Login & Homescreen

Autopay Change Password   Upgrade Phone Part 1 Upgrade Phone Part 2

As of the latest calculations, production would take 51.5 man days. The next challenge will be updating the design to only require the allotted 40 man days. Stay tuned for Part 2: Thin Slicing & Road Mapping.

myAT&T Mobile App Redesign: Evaluation

Last quarter, we went through a process of redesigning the myAT&T app. Although smartphones have become more and more important to our everyday lives, actually managing your mobile phone account has remained frustrating and confusing.

The Design Process

Before we started designing, we sought to understand the key purpose of the app. To do so, we surveyed about 20 people to assess what was most important to them when managing their account.

We found that the user wants to:

  • feel like she has the right data plan for her needs, that she doesn’t have too much data (so she’s paying for data that she’s not even using), or too little (so she gets hit with data overage fees);
  • be able to easily upgrade her phone; and
  • never miss a bill payment.

Given this understanding, we decided to design for the following flows 1) managing data, 2) changing your plan, 3) upgrading your phone, 4) paying your bill, 5) setting up autopay, and 6) managing the security settings of your account (e.g. changing your password or updating your email address).

Evaluation

Once we completed our designs, the next step was to evaluate our work. This process included three standard evaluations:

  1. The Cognitive Walkthrough
  2. Heuristic Evaluation
  3. Think Aloud Testing

The Cognitive Walkthrough

Developed in the 1990’s, the Cognitive Walkthrough is a method for evaluating the learnability of a product, based on a theory of problem solving in unfamiliar situations.

When confronted with a unique, new situation, people leverage a problem solving theory based on exploration and progressive behavior refinement, generally with the following steps:

  1. We determine what controls are available for us to take action.
  2. We select the control that makes the most sense towards incremental progress.
  3. We perform the action using the control.
  4. We evaluate the results of our action to see if we have made positive, negative, or neutral progress.

The evaluation is based off these steps, requiring the evaluator to ask the following questions:

  1. Will the user try to achieve the right effect? The user of the system has an end goal in mind, but needs to accomplish various tasks to complete it. Will they even know to perform the specific steps along the way?
  2. Will the user notice that the correct action is available? Is the option visible and on the screen, or at least in a place the user will likely look?
  3. Will the user associate the correct action with the effect that user is trying to achieve? Is a label or icon worded in a way that the user expects?
  4. If the correct action is performed, will the user see that progress is being made towards their goal? Is there any feedback showing that the user selected the right option or is making forward momentum?

Heuristic Evaluation

The Heuristic Evaluation involves comparing an interface to an established list of heuristics – best practices – to identify usability problems.

This evaluation was established by a man name Jakob Nielsen in the 1990’s. Although technology has transformed dramatically since then, these heuristics are based on human behavior, and still apply today.

They include:

  1. Visibility of system status. The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
  2. Match between system and the real world. The system should speak the users’ language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms.
  3. User control and freedom. Users often choose system functions by mistake and will need a clearly marked ‘emergency exit’ to leave the unwanted state without having to go through an extended dialogue. Essentially, the design should support undo and redo.
  4. Consistency and standards. Users should not have to wonder whether different words, situations, or actions mean the same thing. The design should follow software/hardware platform conventions.
  5. Error prevention. Even better than good error messages is a careful design which prevents a problem from occurring in the first place.
  6. Recognition rather than recall. Make objects, actions and options visible. The user should not have to remember information from one part of the dialogue to another.
  7. Flexibility and efficiency of use. Accelerators – unseen by the novice user – may often speed up the interaction for the expert user to such an extent that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions retrievable whenever appropriate.
  8. Aesthetic and minimalist design. Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
  9. Help users recognize, diagnose and recover from errors. Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
  10. Help and documentation. Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

Think Aloud Testing

Think Aloud Testing evaluates the usability of your work by encouraging a user to think out loud as they use your product or service.

It is important that the user does not reflect on why they do what they do, but simply talk aloud as they do it. Reflection uses a different part of the brain, and any introspection would not speak to the intuitive measure of the design.

As the user tests the product, the designer pays particular attention to any communication of surprise, frustration, or design suggestions; she also notes, of course, if the user is unable to complete the task with ease or at all.

Benefits of using all three evaluations

While all three tests stand on their own, there is great benefit to using all three together. For example:

  • Think Aloud participants may have trouble articulating why something was confusing or frustrating; Heuristic Evaluation and Cognitive Walkthrough can provide hypotheses
  • Heuristic Evaluation and Cognitive Walkthrough can help the designer know what to look for during Think Aloud
  • While view to view, Cognitive Walkthrough may assess the flow as seamless, the Heuristic Evaluation and Think Aloud help the designer see the design as a whole — i.e. although something may theoretically work within one flow or screen, it may confuse the user, if it is not consistent with other flows or accepted practices

Key Findings

By taking my app redesigns through these evaluations, we found the following key issues:

  1. Design did not always give a clear sense of place
  2. Intention of screen was sometimes convoluted
  3. Design did not help prioritize action

Design did not always give a clear sense of place

A glaring example of how the original designs did not give a sense of place was in the flow from “Home” to “Set up bill payment.”

MyAT&T Evaluations 2017-01-18.002

When the user taps on the “Set up bill payment” button, not only does a modal pop up, but they are also immediately taken to the Billing tab. This is a violation of the Heuristic principal of Consistency & Standards. Typically, when a modal pops up, the rest of the system stays in the same place. However, in this case, the app takes the user to a completely different place in the system, and there is no clear sense of what would happen if the user tapped on the “x” of the modal — would she be taken to the Billing home screen, or back to the Home screen?

MyAT&T Evaluations 2017-01-18.003

Based of this this evaluation, I changed the flow to from the Home screen, to Billing, to Set up Bill Payment; and I removed the Set up Bill Payment flow from the modal.

MyAT&T Evaluations 2017-01-18.004 MyAT&T Evaluations 2017-01-18.005 MyAT&T Evaluations 2017-01-18.006

 

Intention of screen was sometimes convoluted

The original Home screen provided a strong example of a convoluted design. Most important to the user is that she isn’t paying too much for data. In the original Home screen, there is an alert that the user is at risk for exceeding her data limit, but, because the data and billing cycle are separate on the screen, it’s hard to gauge the seriousness of the risk.

MyAT&T Evaluations 2017-01-18.008

To address this issue, I merged the data and billing cycle into one visual.

MyAT&T Evaluations 2017-01-18.009

 

Design did not help prioritize action

Throughout the design, we found many examples of no clear system prioritization — for many of the flows, the user would need to think carefully about each choice, as opposed to being guided by the system.

For example, if the user wanted to manage her data, the system gave her five different options, with no explanation of what each option might provide, nor any prioritization of what might be the best choice.

MyAT&T Evaluations 2017-01-18.014

MyAT&T Evaluations 2017-01-18.012

To address these issues, I updated the flow to only include three options, with an explanation for each.

MyAT&T Evaluations 2017-01-18.015

 

To see a full list of findings for each evaluation, please see links below.

myAT&T Evaluation 2017-01-24 – Cognitive Walkthrough

myAT&T Evaluation 2017-01-24 – Think Aloud Protocol

myAT&T Evaluation 2017-01-24 – Heuristic Evaluation 

Redesigning myAT&T: Start to Finish

In AC4D’s Rapid Ideation & Creative Problem Solving class, we redesigned aspects of myAT&T — AT&T’s mobile app that allows customers to manage their account.

Why this is important
The cell phone has played an increasingly important role in our physical, mental, and emotional lives. However, while phones have become “smarter,” the account management experience has remained frustratingly confusing.

The process
Below I detail our process for redesigning the app. It included 1) finding existing pain-points within the current app, 2) creating a concept map to communicate the key functions of the app, 3) divergent thinking to break free of the existing design, 4) storyboarding to quickly ideate, 5) wireframe sketches, 6) user testing to test our wireframes, and 7) digital wireframes.

FINDING EXISTING PAIN-POINTS
Before redesigning the app, we worked to understand its primary use case and “pain-points,” or customer frustrations. To do so, we surveyed ~20 individuals, asking them to identify pain-points by rating account management activities by difficulty. Based off of the survey results, we focused on the following functions:

  1. The ability to make a payment
  2. The ability to set up autopay
  3. The ability to review and set account security
  4. The ability to suspend a device
  5. The ability to upgrade a device
  6. The ability to change a plan

To understand the customer experience with each of these activities, we studied all relevant screens, some examples below:

attpainpoints

General pain-points included:

  1. Little visual hierarchy made it difficult to understand importance of each feature
  2. There was overwhelming amounts of text where images could suffice
  3. Generally confusing navigation made it difficult for the user to know where she was at any given point

CONCEPT MAPPING
We created concept maps to understand how these screens connect in a more abstract sense. Concept maps show the connection between different ideas, and are used to understand or explain various aspects of an app or website. This kind of understanding allowed us to design around the functionality and purpose of the app, rather than its current flow.

To take our minds out of the app’s structure, and focus on its purpose, I created a matrix of nouns, detailing the app’s functions.

conceptmatrix

Blue indicates connection points between functions. The total number of connection points indicate the importance of each function. Based on the above, the five primary functions of the app are: 1) Plan, 2) Payment, 3) Devices, 4) Usage, and 5) Data.

Even after this exercise, however, I still created a site map, detailing the flow of the app, as opposed to a concept map, communicating the intent of the app.

firstconceptmap

After many more iterations, I was finally able to focus more on the objective of the app rather than structure, leading me to create my final concept map for myAT&T:
finalconceptmap

DIVERGENT THINKING
Before we started sketching new flows, we practiced “divergent thinking” to get our minds in a creative space. Divergent thinking is a thought process or method used to generate creative ideas by exploring many possible solutions. Below I present a few of my ideas.

Need to suspend your phone? Throw it in the trash. I proposed that when a user wants to suspend their service, they can just throw their phone in the trash, myAT&T will detect it’s in a receptacle, and it will shut off your data. It fit well with our culture of planned obsolescence.

throwaway

The Hurt Phone. In another sketch, I proposed that myAT&T have the capacity to feel when the phone has been damaged. For example, if the user cracks her screen, an alert pops up, asking if the phone needs to be replaced. myAT&T then leads the user through the process of replacing the phone.

hurtphone

myAT&T understands your troubles. For another concept, myAT&T could anticipate your needs. In the sketch below, the user is upset that her friends are making fun of her, and, by its amazing powers of deduction, it correctly guesses that it’s because she has an old phone. myAT&T then helps the user upgrade her phone, and ultimately suggests that she upgrade friends as well.

troubles

STORYBOARDING WITH STICKIES
After the divergent thinking exercise, we prototyped the six flows on sticky notes. Confined to a sticky note and sharpie, we needed to include only the most pertinent information. Also, the low-fidelity nature of this exercise made it so we couldn’t get too attached to any one idea or waste time on aesthetics, facilitating multiple iterations.

stickystory1

WIREFRAME SKETCHES
We took the sticky flows and made wireframes.

wireframesketch2

wireframesketch1

USER TESTING
After sketching out wireframes, we recruited participants to test our ideas. During user testing, we asked participants to “think aloud,” or verbalize their thoughts while moving through each screen. Doing so allowed us to understand when and why a user may experience frustration, confusion, or surprise with the design.

usertestingsam

We then incorporated feedback into a new iteration of frames. For example, when Samantha tried to find Autopay, she said, “I wouldn’t have thought that Autopay would be in ‘Payment Methods.’ It shouldn’t be hidden like that.”  

Therefore, my screens went from this:

usertesting1

To this:

usertesting2

DIGITAL WIREFRAMES
After user testing, we presented our final wireframes, linked here.

REFLECTION
Concept Map
Concept mapping was essential to getting my head out of the current framework of myAT&T, understanding the purpose of the app, and understanding specific functions necessary to manage a mobile account.

Divergent Thinking
Divergent thinking is essential to designing outside of current constraints and allows for more creative thinking when designing new flows.

Storyboarding & Sticky Flows
Ideating in low-fidelity helps to quickly think through a flow and its purpose, rather than getting stuck on the aesthetics. Storyboarding also helped me think through the user’s story, and understand the “why” behind each flow.

User testing
User testing is key to uncovering pain-points in your design and gathering new flow or feature ideas. It is central to the iterative process.

Digital Wireframes
Once I started to create digital wireframes, I found that the higher-fidelity actually helped me flesh out my flows. I’m a visual thinker, so, while the low-fidelity exercises helped in terms of ideating, the high-fidelity helped me get a clear vision for how I wanted the user to interact with the flow. Tools like Pinterest and dribble helped for inspiration.

NEXT STEPS
Over the break, I will continue to test my wireframes and iterate per feedback.

 

Research: Food Choices & Eating Habits

My team and I have spent the past six weeks researching eating habits among individuals from a wide range of income levels and backgrounds. At the beginning of our research, we looked at access to healthy food among low-income individuals. However, after speaking to experts at the Sustainable Food Center and the Central Texas Food Bank, we learned that even when people have access to healthy food, they still not might take advantage of it (I’m actually a perfect example of this – sorry, Mom!).

We then changed our focus to understand why people don’t eat a balanced diet even when they have have access to nutritious food and a cause (e.g. depression, diabetes) to eat nutritious food. Some initial reasons we’ve found are lack of time, convenience, motivation, and/or education; peer, environmental, familial, and/or cultural influence; and food addiction.

Process: Finding Patterns

We interviewed 20 people who were gracious enough to allow us into their homes and let us ask them questions. We transcribed each interview, and then printed out “utterances” (1-3 sentences describing a particular idea or event).

IMG_8772

We then dug into the data and began to notice patterns between the participants.

IMG_8775

Three patterns I’ll highlight here are:

  1. A catastrophic event can motivate a diet change
  2. Food labels are meaningless
  3. Food is used as a drug

A catastrophic event can motivate a diet change

Some of the people we spoke to changed their diet after being diagnosed with diabetes, depression, Celiacs, or Crohn’s Disease.

Taylor told us that “getting pregnant was [enough to change my mindset about smoking]. When I found out I was pregnant, I had a guilty conscience. I was already 3 months pregnant, I was drinking and smoking. I felt super bad. I just stopped smoking.”

Food labels are meaningless

Many people we spoke to expressed confusion over terms like “natural,” “organic,” and “free-range.” More than confusion, some were deeply skeptical, saying that labels were used purely for marketing purposes.

Even diet “trends” are manipulative — Jolene told us, “You’ll see ‘gluten-free,’ and people think that’s healthy. Like a Hershey’s chocolate bar is gluten-free, but that doesn’t mean that should be the staple of your breakfast.”

Food is used as a drug

Several interviewees were recovering addicts and described their relationship with food as a substitute for their former drug of choice.

Delilah, a recovering crack addict, said that within her first year of sobriety, she “didn’t care how fat [she] got, as long as [she] was sober.” Only once she was diagnosed with diabetes did she start to change her eating habits.

One individual in particular told us that cheese is five times more addictive than heroin. We resolved that whatever comes of this research, we will make cheese illegal. (All I’ve eaten this semester is pasta and parmesan cheese. Not sure what I’ll do…)

Next Steps

While these findings are interesting, we must dig more deeply into the data to find meaningful behavioral insights.

IMG_8773

One AC4D alum pointed out that our “war room” is an externalization of our brains. Given that there are still so many unorganized utterances, we clearly have not made sense of all the data available. We will take the next two weeks to do so.   

 

#TeamBritishTofu – A Briefing on Service Design, Round 3

In our Service Design class, we’re applying our emerging design skills to help improve the service delivery of a local business in Austin.

Our collective passion for sustainable food systems drove our partnership with a company that delivers local produce directly to a customer’s doorstep. More information about the company and its service model can be found in the Appendix.

This blog post presents our third design brief (our first and second briefs can be found here and here, respectively), which includes service breakdowns, opportunities for improvement, and proposed solutions.

'our client Proto .001

This service design project spans seven weeks, and includes three phases: Discover, Understand, and Design.

'our client Proto .002

'our client Proto .003

To fully understand the customer experience, we interviewed:

  1. four new customers to get a sense for the entire process from start to finish, with specific attention towards any frustration during the sign-up process;
  2.  three past customers, with focus on why they cancelled their service; and
  3. one current customer to understand what it’s like to interact with the service on a consistent basis.

We then spoke to the company’s CEO and Head of Customer Service to examine our client’s understanding of the customer’s experience.

We synthesized this data into two customer journey maps that presented the actual customer experience and the perceived experience.

'our client Proto .039

'our client Proto .031

 

In comparing the actual and perceived customer journey maps, we found several breakdowns, specifically during sign-up, the unpacking of the veggies, and cooking.'our client Proto .006

'our client Proto .007

Ultimately, these breakdowns culminated in one key finding: a lack of effective communication between the company and the customer.

'our client Proto .005

We took this data and paired it with the company’s mission and culture to create design principles. These principles guided potential solutions for service breakdowns. 'our client Proto .009

These design principles created a frame for our ideas, out of which we generated vignettes – one-page illustrations that present the moment of the proposed solution’s value.

'our client Proto .010

We came up with 30-40 ideas to address service breakdowns and add value to the customer’s experience.

To determine which ideas to pursue, we plotted each on a matrix, with the x axis being value to the customer (high to low), and the y axis being value to the company (high to low).

IMG_4373

We then realized that even if highly valuable to both the company and the customer, the idea will not be implemented if not feasible. We therefore redid the exercise, changing the y axis to level of company effort.

Lastly, we considered the environmental impact of each proposed idea. Minimal waste is core to the company’s mission. In fact, they cool their bushels with reusable, frozen water bottles, and create only 55 gallons of compost per week.

This design brief does not include solutions for the sign-up process as we will not be able to test wireframes during the class period. However,  we will provide wireframes for the company to consider for their website’s next iteration (to launch in early 2017).

'our client Proto .011

This assessment brought us to our top ideas:

Idea #1: Addressing Ease of Cooking & Food Waste

'our client Proto .014

'our client Proto .013

'our client Proto .015

This idea capitalizes on an existing behavior among some customers — some customers received their storage instructions, they would put them on the refrigerator.

Idea #2: Addressing Food Waste and Non-Intuitive Website Interactions'our client Proto .017

'our client Proto .016 'our client Proto .018

We view the Bushel Card as an intermediary solution to a lack of customer customization. The customer should be able to more easily customize their order online once the company updates their website.

Idea #3: Addressing Lack of Connection to Farms & Farmers

'our client Proto .020

'our client Proto .019

'our client Proto .021

'our client Proto .022

Next, we will create prototypes of our top ideas, and test these prototypes with real customers. We will use feedback from these tests to create additional iterations for each idea.

'our client Proto .023

'our client Proto .024

Redesigning the AT&T Mobile App: Storyboarding & Wireframes

Oh, hello! In our Rapid Ideation & Creative Problem Solving class, we’re redesigning the experience of the AT&T mobile app. It’s important to emphasize “experience” as we’re not only focusing on the screen flows but also the emotions evoked as the user interacts with the app.

To get us in the right mindset, our teacher, Greg  Storey asked us to draw a vase.

File_001

Flowers painted on a flower vase. #SoMeta

Then, he asked us to draw a “way to experience flowers.”

File_000 (2)

I drew a room for flower therapy (because who doesn’t need a little therapy?), where one lays on a bed of flowers, whilst flowers fall from the ceiling. Ahhhhhhhhhh.

Greg immediately ripped up these drawings as soon as we were done. The nerve! Enough to make you need flower therapy! It was an important lesson in not getting too attached to your ideas. Luckily, my mind is a steel trap, and I was able to recreate these illustrations.

We then moved on to sketching new ways to experience the AT&T app, using “divergent” thinking. For my first sketch, I proposed that, when a user wants to suspend their service, they can just throw their phone in the trash, and AT&T will shut off the data.

File_000 (3)

I was told this was a little too divergent.

File_000 (1)

Granted, this was the night of the election, and the complete and utter horrorshow of it all was slightly distracting. At least there’s something from that night that makes me laugh.

We then took a crack at drawing screens for the following:

  1. The ability to view current plan and features/The ability to compare usage against available plans
  2. The ability to change a plan
  3. The ability to upgrade a device
  4. The ability to suspend or remove a device
  5. The ability to make a payment/set up automatic payments
  6. The ability to review and set account security

We prototyped flows on sticky notes for each. Although it was not necessary to create stories for each flow, it helped get my mind around the optimal user experience.

 

File_003

IMG_8736

We then took those flows and made wireframes.

Scan

Scan 9

Scan 8

Scan 7

 

Scan 5

Scan 6

Scan 4

Scan 3

Scan 2

Scan 1

The next step will be digitizing these frames, incorporating the edits and comments provided by Greg.