My wire framing process: from lo-fidelity to slightly higher fidelity
Last week, I built concept models of banks, the current state of the TD bank mobile app, and a future state of the app so that I could build background knowledge, make sense of complexity, and envision how to create a more usable application. This week, I began the process of redesigning the TD bank mobile application. The first step was to imagine how real people use the banking application. I imagined users with goals inspired by real people. I wrote scenarios that fleshed out their stories, and then drew storyboards that illustrated how they could use the app to fulfill their goals. The second step was to design wireframe flows that illustrated a journey a user could would take to fulfill their goal using the banking app.
What I learned last week
After immersing myself in the TD banking mobile app and imagining a better system, I knew that moving forward I wanted to keep a few key design principles in mind:
- Keep the app simple – the current app has too many buttons that lead to the same place. This is unnecessary and confusing.
- Keep the app visually minimal – there are screens in the current app that are too heavy with color and information. It is hard to know what different key screens are used for because my eyes don’t know where to look.
- Make core functions more easily accessible – functions like check balance require 4 taps. There should be fewer taps to find this information.
Users, scenarios and storyboards
I wrote about three potential users:
- Louis, a junior in college who is living on his own for the first time;
- Stephanie, a working mother who is also her household’s financial manager; and,
- Clark, a freelance UX designer who has to manage many clients and subcontractors.
I brainstormed all the goals they may have and prioritized which goals were most important. Starting the app redesign here helped me to humanize the experience that followed. Whenever I got lost in the details, I could remember who I was designing the experience for. On a tactical level, it helped me to fill in fields with realistic data. On a systems level, when I had a question about hierarchy in terms of interactions and information, I could think back to my character and imagine it from their perspective.
I also believe that having clear character journeys in mind will help me to make sense of the critique I will be leading this evening. Though I will be asking my classmates to give feedback on how to make interactions more usable and hierarchy clearer, the core of my decision making will fall back on questions like, “What would Louis, a newbie to financial management and adult life decisions, need?” or “How will Stephanie use the features in the banking app to facilitate uncomfortable conversations with her less fiscally responsible husband?”
Once I had each character’s story written in detail, I made a spreadsheet with scenes and screens. It helped me to essentialize all of the details. What is the most salient idea I am expressing? What image would communicate the idea to a viewer? This helped me to narrow in big ideas. (So much of this design process is going from detail to big idea to detail!)
Then, I moved to storyboarding. This started the process of first, imagining how characters would realistically be using the banking app. How would they be standing? Where? And then, it served as a bridge to thinking about the interfaces. What would Stephanie want to do if another mother pays her back in the middle of the park with a check? What interactions would be fast and convenient for her?
Storyboards to wireframes
In the process of storyboarding, I started to build out wireframes. So much of the design process is working in the right level of fidelity for the stage of process you are working in. While storyboarding, I would draw a storyboard with less detail but would have the big idea. This would prompt moving to another sheet of paper where I would sketch the interface with more detail. It’s a cycle of fidelity. Storyboards have low fidelity but are filled with big ideas. They moved me to start thinking about all the details I needed which prompted me to think about details, spacing and hierarchy of the interface. So, I would sketch the interface and then the flow at a higher level of fidelity on a separate sheet of paper. But then I would return to the same (or different) storyboard to think about what the user would do next. What would help Clark keep his records most organized when transferring money to a subcontractor’s account?
Once I had one complete wireframe journey complete, I moved to designing my wireframes in sketch.
Wireframes in sketch
Below you will see each of the flows that I have developed so far.
The following flows are inspired by Louis. In the first flow, he starts a recurring bill pay to help manage his stress. He feels overwhelmed with all of the new ways he needs to “adult”.
Louis finds out he made a mistake when he set up his bill because he missed a payment. So he has to view what he did and change when the bill is set to pay.
Louis is out with his friends. They want to see a movie but he doesn’t have any cash. So, he sends his friend money electronically.
The following flows are inspired by Stephanie. In the first wireframe journey, Stephanie is notified that she and her husband have overdrawn their checking account. She checks her balance.
Stephanie wants to set up a notification for her and her husband so that they know when their checking account will hit $500.
Stephanie gets a check from a friend in the middle of a party. She wants to deposit it.
Stephanie wants to transfer some extra funds into her daughter’s college account.
First, I need to finish making every screen in my system. Second, I will go out into the field and get feedback from real users. I can’t wait to hear what they say!