20180307_150516

Communication and The Process of Shipping Products

Shipping My Banking Application
 
I have returned to my Randolph Brooks Wireframes for the first assignment in our Product Management class of Q4. The class teaches us the fundamental methods of product management and what it takes to understand the scope of big workings like taking a product from wireframe to market. It’s a big step taking our flows that we created in Rapid Ideation and Creative Problem Solving during Q2, and create component sheets and estimations to know how and what is needed to ship all the features and components within the application. 
 
This week our task was to set up a meeting with a developer and discuss our flows in depth to see how long it would take to ship the components and features we created in our wireframes. I met with Chap Ambrose: a former alumni and our Q1 Studio professor. It was a great experience to talk with Chap about the app and get a little more understanding about the complexities that  are involved in developing a mobile application. After our meeting I took my flows and the estimation that Chap provided me and created several deliverables that I will be presenting in an informal walk-the-wall presentation to my classmates and professor, Ruby Ku. The deliverables I created include all of my flows for the app that I have completed so far, the individual components and features that Chap and I discussed and estimated time for completion, and a spreadsheet of each component labeled with notes from my discussion with Chap. 
 
Meeting With Chap
 
I met with Chap, the developer, last Wednesday for about an hour. In our meet we discussed the wireframes I presented and the key components and features needed to perform a “hero flow.” Chap advised that we should create a “Hybrid HTML app” instead of using an API (Application Programming Interface) because it was much faster and because of the nature of this app using API wasn’t really needed. To my knowledge, the reasoning Chap suggested this is that just developing the app via HTML/CSS/Javascript is sufficient unless you are developing an application that requires a lot of processing power. If not, then you can just develop it like you would a website and just make it function the way a mobile application does. Now, I’m no developer so I may have gotten that wrong, and Chap, if you’re reading this, hopefully I didn’t butcher your words. 
 
The big takeaways that I got from our conversation were that I should use Android’s Material Design UI and I learned the value co-designing with developers. Using Design Principles from Android’s Material Design makes creating the app a lot simpler and easier to ship. The reason being is that I created my app to reduce the amount of clicks for navigation as much as possible, and after looking over the Android development page I found that all my features and components except only a few can be swapped with Androids UI designs. 
 
My second big takeaway from my conversation with Chap was that co-designing the app with a developer is the best case scenario to shoot for when I get into a designer role after school. I learned how valuable that connection and communication is between a developer and a designer, and I can see how if have a great connection you are able to create things faster, more efficiently, and ship better products. 
 
We ended up saying that in total, from what I had in wireframes at this point, it would take him around 135 days to ship the app. I felt like this was a reasonable number given the complexities of some of my features. I learned that I need to think about things like, “What happens if there’s an error?” “How many items should appear in lists?” “How do I want my numbers to populate?” I learned that reusable components can be a powerful thing for shipping products more quickly and even in usability testing with users, because the more times a user encounters a component the more they can navigate using prior experience rather than trial and error. 
 
Identifying Components
 
I created six wireframe hero flows that present most of the key features and components of the app. The Assignment instructed us to also Identify unique features; give them names and label them.You can view each identified component in the image below. The components identified in these images are the core features that Chap gave me estimations for shipping. Components like “Back Arrows” and “Radio Boxes” have been excluded from these sheets simply because in the hour that we had for discussion we wanted to get estimation on the more complex components. For smaller components such as these I need to have another conversation with Chap to see how much longer it will take to ship the app in its entirety including these components.
Assuming this was a real product and I was actually going to created this app I would want to set up times for Chap and I to go over these smaller components and  overall the function of the app. Since the complete flows for the app have not yet been created I feel that co-designing with him would be a way to test and iterate in real time to provide a back and forth with him that would really bring out the most creative end result. It would also hold Chap and myself accountable for time and efficiency because we’d have weekly meetups to discuss features.
Flows and Components-27 Flows and Components-28 Flows and Components-29 Flows and Components-30 Flows and Components-31 Flows and Components-32 Flows and Components-33 Flows and Components-34 Flows and Components-35 Flows and Components-36 Flows and Components-37 Flows and Components-38 Flows and Components-39
Overall I am happy with this experience. I feel like I learned a great deal and I have a greater respect for the communication between developers and designers. I had the insight during this assignment that I should not spend a lot of time trying to learn code, and instead spend that time with developers learning how to speak with them about developing and design. I am not opposed to learning some developing skills down the line, but I feel that the most important thing in being designer is that I am able to communicate with developer so we both end up getting what we want out of the experience. I am excited going forward and this assignment has given me more confidence in my abilities to lead teams and learn from my peers. 
 
 

Wireframe Hero Flows

 
 
Spending Health Analysis
Flows and Components-13 Flows and Components-14 Flows and Components-15
Login (First time User)
 Flows and Components-04 Flows and Components-05 Flows and Components-06
Login With Touch ID
Flows and Components-07
Deposit: Depositing A Check
Flows and Components-08 Flows and Components-09 Flows and Components-10 Flows and Components-11 Flows and Components-12
Bill Pay: Schedule a Payment
Flows and Components-16
Flows and Components-17 Flows and Components-18 Flows and Components-19 Flows and Components-20
Alerts: Updating ATM withdrawal amount and notification settings
Flows and Components-21 Flows and Components-22 Flows and Components-23
Transaction Analysis
Flows and Components-25 Flows and Components-26
 Component Spreadsheet