The next phase in the Cookbook app redesign process is to fully build out the entire application in wireframes. According to “Everything You Need to Know About Wireframes and Prototypes”, by Nick Babich, he describes that
“wireframes are used to communication structure (how the pieces of the page will be put together), content (what will be displayed on the page, and functionality (how the interface will work)”.
Therefore, wireframes are incredibly important in the mobile design process because it serves truly has as the foundation of the app. Wireframes allow designers to make sure the application functions properly before adding any visual design elements. Often designers can get carried away and caught up in the visual elements which take away from the actual functionality of a product. Therefore, wireframes do not allow for the distraction of aspects such as color palette, typography, etc. The article also goes on to describe the benefits of wireframing which include them being both a “communication tool” and “documentation”.
Moreover, when designing my wireframes for Cookbook, I want the app to be incredibly simple and easy to use for the user. Therefore, throughout the majority of the app, there is a clean navigation bar that sits on the bottom of the page. When designing my wireframes, I also tried to include screens for all possible options, good and bad. For example, I want the app to be able to detect if the user also has an apple watch. This can be done if the watch application is opened at least more than 3 times. By the user repeatedly using the application it means that they are most likely to also have this product. Therefore, the next time the user opens the Cookbook app, there will also be a screen informing them that there is actually an apple watch version of the application. This will allow easy access to the shopping list. On the other hand, I also designed screens in case of an error. For example, if the user does not have a connection there is a screen that will appear. Another scenario is if there are no results when a user searches an item. Another important function I wanted to include in this app is a settings page. Setting pages are extremely necessary because they provide the user with options, small or large. For example, if a user has poor sight, there will be an option to increase the font size, or if they prefer another language over English there will also be an option to change that. Overall, I believe wireframing truly allowed me to think of the user when designing the app. A flaw I have noticed of mine is as a designer, I am often focused so intensely on the visual elements that I forget the importance of the content and functionality. I will spend too much of my energy on making it beautiful rather than functional. The entire wireframing process allowed me to truly take a step back from visual design and focus on the consumers wants and needs. Overall, I believe wireframes are a crucial and very beneficial step in mobile design.
Full PDF –> ColoneseDiBello_artifacts3
Sabrina Colonese-DiBello 