Building a house vs building an app
Getting things right is important. Calling things right is also important and I’m very anal about this. No its not toemaetoe vs toematoe. Its not calling tomato a fruit but referring tomato as chili.
In startup world, even the people in the community world are often confused between mock up and prototype. As a product designer, it is important for the client or anyone in the team to understand the different stages in UX product design.
Mock up and Prototype are two different thing in mobile app/website development. Its very important to define this prior to tech development works.
Here’s how I would explain it in laymen terms.
A good analogy for this is building a house. You have the project manager, architect, interior designer and builders in the team.
Note: Building a house for a homeowner is very straight forward. They just need a place to live — eat, sleep etc. Its pretty much given. When developing a mobile app, the user experience (UX) mapping is an important task before you start any design work. This will help you to understand who you building it for (user) and why you are building it (goals).
Sketch — A house design sketch is always at the initial stage of design. You can sketch it on a piece of paper using pen or pencil.
For a mobile app, I always start with a rough sketch and dribble it on my notebook. There will be a few versions of the main app screens.
Wire frame is the blueprint design of the house provided by the architect. This is based on client’s requirement and the architect’s understanding/ experience in designing house. The size of the house, space planning, no of windows will be defined here. Client’s idea may not work on the existing land area. Architect will discuss this with designer and builder.
In mobile app, a wireframe is represented in boxes, bullets, buttons, lines and placeholder texts. It defines the placement and size of the navigation menu, banner, content area and footer.
Mock up is the representation of how it will look like -a miniature house model or a 3D computer aid model. It will show you how it looks like with the selected design and building materials. E.g. The finishing of the house — types of tiles, color of the wall/rooftop, types of bathroom fittings, fabrics and furnishing.
For a mobile app, mock up is a static design of with colors, style and patterns that you will see on the app. Nothing is clickable.
Finally, a Prototype for a house is similar to the showroom unit. This showroom is built by the builders based on the blueprint design, material and finishing specifications. An interior designer will help to make the place beautiful using real furniture, wallpaper, frames, flowers and other soft furnishing items. When a potential buyer visits this showroom they are able to feel the space, open the door, test the lighting and also view the future kitchen.
A mobile app prototype is an enriched version of your mock up with animation, interaction and clickable buttons. This is where your users can test the user experience (UX) of the mobile app.
Once all of these is done and approved by the client, its now on the builder’s plate to complete building the new house. The architect will normally monitors the work done by the builders until the house is built.
Similarly, in mobile development — the UX/UI design and tech team will work closely with the product manager.
Hope this analogy is clear enough to help you understand how a mobile app development is almost similar to building a house. You can read more on the differences between a mock up and a prototype on this article by Mateusz Warcholinski.