Scenarios to Wireframes

Today, we are wrapping up our first round of wireframes. They’re for the redesign of mobile banking apps. Wireframes are essentially low fidelity versions of a products interface. They can even be sketches, but it’s important that they be legible, as they are most often meant to capture the end result of a lot of decision making. In our case, it’s just us making the decisions, but more often there are lots of stakeholders involved. These artifacts can actually be turned into prototypes that can be tested and refined. Before I show any wireframes, I’ll walk through how I got there.

Revised Concept Map

The big piece of feedback I got on my original concept map was that you couldn’t compare the version showing the original app to my revisions because the overall layout and style was different. I updated the revised version so that it can be compared, as you can see in the following image.


And here’s a pdf for closer inspection: ConceptMaps_CurrentAndRevised_Kade_r2.pdf


After completing our concept maps, the next thing we did was to create narrative scenarios to understand what it should feel like for a particular person to use the app in a particular context to accomplish a particular goal. For example, in one of my scenarios, Jane is at college needing to deposit a check she got from her grandmother…

Jane got a check in the mail for her birthday from her grandma. She’s away at college with no bank branch nearby. She signs the check, takes out her phone, and opens the U.S. Bank mobile app. She takes a picture of the front and back of the check, and sconfirms the deposit details. Jane completes the deposit and calls to thank her grandma.

These textual narratives serve as a bridge to visualization. We can start to sketch storyboards of how users interact with the product as well as hinting at what particular screens could contain to elicit responses and facilitate interaction. Here’s an example of one of mine.

2015-11-10 16.49.43

It obviously doesn’t have to be super refined, but I could take this and push the fidelity much further. Refined versions of stories like this can be used to tell product stories within a company to facilitate momentum around their execution.


The next step was to take each scenario in turn, the product shots in particular, and use them as a bridge to create a series of low fidelity wireframe flows. The flows consist of screens with all the onscreen controls required to make the product functional. The goal is not to worry about refined visuals but to focus more on labels, control types, and placement. The end result is an ordered series of screens (the flow) that could be used to accomplish the goals represented in a scenario, things like “transfer money to savings.” The flow for that scenario looks like this…



Here’s a zoom of just the beginning…Screen Shot 2015-11-10 at 5.24.35 PM


And a full pdf of all the flows: USBank_Wireframes_Kade_r2.pdf

Next Steps

Now that we’ve completed an initial round of wireframes based off our revised concepts maps and scenarios, it’s time to start figuring out what’s working. Our next post for this project will cover our progress doing user tests. Stay tuned.