In order to build a great product first you need to conceptualize it. Wireframing is a method used by product teams for websites or apps; it allows them to lay out the rough structure for where the content is going to go. Wireframes are used by product managers when working on software products, especially when using the Agile Development framework. They are very basic and are created quickly to test broad ideas. When a product team is brainstorming and throwing out ideas and potential features, a wireframe helps you focus/test them. An example wireframe is shown below, it is like a flow chart of all the avenues you can traverse in an app.
As a product manager, you need to know how to communicate complex features and ideas clearly, creating wireframes is the best way to do this. Think of them as a blueprint with low accuracy. The layout and flow of the app are essential while the visual details are not necessary. As you gather more feedback from team members you can add or edit features within the wireframe. Popular software used to build wireframes is called Balsamiq. You can also use Axure and POP. POP allows you to take photos of your hand-drawn wireframe and turn them into an interactive digital one.
If your company is closer to a start-up, the product manager will have to work on the wireframe themself. With larger organizations, you will most likely not be doing wireframes but need to be knowledgeable about them.
Wireframing is not the only step when creating a product. The most common four steps for product development go from sketches to wireframes to mockups and to a minimal viable product (MVP).
Sketches are hand-drawn, quick, cheap, and can be scrapped easily. When you are creating a sketch of a website page or layout of an app you want to ask yourself – what is the purpose of this page? Then you want to determine – the user should be able to do ___________. Utilize your favorite websites and apps when drawing sketches and remember the important thing is the function, not the form.
A mockup is a static display of what the final product looks like. Typically, the designers on the product team will take the wireframe and add design elements and a color scheme. You can use software like Photoshop, Sketch, Illustrator, Axure, and UXPin to create mockups.
An MVP is a prototype. They handle usability, have basic interactions, and have high accuracy. An MVP will also expose potential problems in the user flow. In an agile development framework, you want to determine quickly if this product has potential. If you are going to fail you want to fail quickly and move on! Tools you can use to create MVPs are software like POP, Axure, Proto.io, and InVision.
Data Flow Diagram
A data flow diagram shows the way information flows through a process or system. It includes data inputs and outputs, data stores, and the various subprocesses the data moves through.
Recently Elon Musk acquired Twitter and has started to make some drastic changes. He believes he can work with the company and rewire its product to make Twitter a profitable company. Elon tweeted on 11/19/2022 the image below of the data flow diagram he wants to implement with his engineering team. This is a great real-life example of a data flow diagram and how it is used.
Tech Stack
Within the image, you can also see the differentiation between the software product’s front and back end. The front end is about structuring and style of the content along with interactivity (shown briefly on the left side). The software is usually HTML, CSS, and JavaScript. Each software language contributes a piece to the user experience.
The back end is what is extensively shown in the image above and runs the data and processes. It represents the information, servers, and databases that are located within the office or somewhere offsite. The most common software used to run the back end is Amazon S3 (also known as AWS) and MySQL which is a query language.
Between them is the application layer, think of it as the connection between multiple pages within an app or website. All these pages pull data from one data database. this portion of the software does calculations between the front and back ends.
An API is a messenger between the front and back end. It takes your request and tells the system what you want to do. It then returns back to you with the requested information. Think of the API as the waiter at a restaurant while you, the customer, are the front end and the kitchen is the back end.
Together they create the full tech stack, a technical term to say the programming language that makes up all the software and technology from front end to back end. The best way to explain this is using the restaurant example…
The customer is the user interacting with the front end of the product. The layout of the restaurant, the type of food, the interior design, etc. The kitchen is the database or back end. All the information and processes to make the food is stored here. The waiter is the API, they translate your order into kitchen lingo for the chefs to understand and later return with your order when it’s ready. Lastly, the application layer would be having multiple menus at a restaurant. Some restaurants have a food menu, wine list, and specials menu. Altogether they make up the full tech stack.
Sources
https://www.udemy.com/course/become-a-product-manager-learn-the-skills-get-a-job/
Financial Freedom 101 
Leave a Reply