Estimating fantasy to fruition

Introduction

For the past two months, our cohort has been working on designing a banking app that integrates traditional banking functionality with financial forecasting features. In our Product Management course, we are learning fundamental methods to take a product from wireframe to market. The first step along this journey? Meet up with a developer to enjoy a dose of reality!

When design meets development

Last week, I met with my assigned developer to estimate how long it would take to turn my hypothetical banking app into a functioning reality. Together we walked through eight flows depicting various user actions (Appendix A), mulled over controls and features (Appendix B), and then the developer estimated how many days it would take for him to build out the app as designed (Appendix C).

Key Takeaways

I learned a lot during our hour-long session… definitely too much to describe in detail whilst still maintaining the focus of our faithful AC4D blog readers! Below I will instead highlight a few primary takeaways from the perspective of a designer’s first meeting with a developer, in case this advice proves helpful for anyone out there in the process of designing your own app:

Be consistent.

Whenever possible, reuse elements as you design. This both helps to maintain a consistent look and feel for the user, and it coincidentally also drastically lowers time the required for a developer to build out your app.

Plan ahead.

Do you want your app to be available in both iOS and Android? Go ahead and double that estimation that the developer gave you! Development takes time and money, so be sure you have enough of each to make your plans a reality.

Stay flexible.

When you meet with a developer, be clear about what user goals you are designing for and remain open-minded about the details. The developer may suggest a more efficient way (see below) of designing to meet your goals!

Meeting with developer
The developer suggested that I look into integrating Zelle® technology into my banking app in lieu of developing my own payments functionality. He showed me his own banking app (with Zelle®) to show me just how easy payments could be!

Moving forward

The next step in this process will be to take everything that we have learned and develop a product roadmap that integrates our most desired features and functionalities for this app based on our conversation and estimations from the developer. Stay tuned!

Appendix A: Flow Animations

For your viewing pleasure, below please find animations of each flow that I designed. The red dots represent where a user would click to advance to the next screen once the requisite information has been entered.

Flow 1: Log in as a returning user Flow 2: View transaction summary (GIF) flow3 flow4 flow5 flow6 flow7 flow8

Appendix B: Controls and Features

In the eight flows linked below, highlighted controls are red and highlighted features are blue. You may click any flow image to display a zoomed-in version of the flow.

Flow 1: Controls & Features
Flow 1: Controls & Features (click to view detail)
Flow 2: Controls & Features (click to view detail)
Flow 2: Controls & Features (click to view detail)
Flow 3: Controls & Features
Flow 3: Controls & Features (click to view detail)
Flow 4: Controls & Features
Flow 4: Controls & Features (click to view detail)
Flow 5: Controls & Features
Flow 5: Controls & Features (click to view detail)
Flow 6: Controls & Features
Flow 6: Controls & Features (click to view detail)
Flow 7: Controls & Features
Flow 7: Controls & Features (click to view detail)
Flow 8: Controls & Features
Flow 8: Controls & Features (click to view detail)

Appendix C: Estimation Session

Click to view the estimations calculated after meeting with a developer. This shared Google spreadsheet shows an estimate of how many days it would take the developer to build out each flow based on my individual wireframes. Also included are a few notes from our discussion. Feel free to comment with any questions!