Cookbook
App Redesign
For this project, I redesigned an app called Cookbook. The first step in the redesign process was to conduct research by reading product reviews, doing a competitive analysis, and user interviews. I was able to gather that the users really enjoyed the content the app offered, however, they were seeking a stronger design and additional features. I began to build the IA for the redesign, keeping the navigation simple with an explore page, a search page, a shopping list, and a profile page. One of the key aspects of my redesign is personalization. For example, prior to entering the app for the first time, users must take a quiz to determine their likes, dislikes, allergies, etc. so the explore page can cater to the user are mostly like to enjoy. I also included a profile function that is saved to a central database for cross-platforming personalization.
Cookbook Prototype
Cookbook Screens
Information
Architecture
About the IA & Wireframes
When I began creating my IA I was inspired to use the program Draw.io to make my sketches come to life from the article called “The Comprehensive Guide to Information Architecture” by James Pikover. In the article, a video was a YouTube tutorial that was included to show how to build IA using draw.io. Moreover, when redesigning Cookbook, I decided to break up the application into four main pages: explore, search, profile, and a shopping list. The explore page’s purpose is to recommend new recipes to the user that they are likely to enjoy based on saves. A search page is a tool to also find new recipes using a specific ingredient or a dish name. Likewise, the shopping list page is built to help the user pick ingredients they need for a recipe and easily put them into a shopping cart that is self organizes by placement in the grocery store. Finally, the profile page allows individuals to save recipes in self-made categories.
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.
Wireframes
Design Options
New Design
After creating my wireframes, the next step was to build prototypes to truly make my app come to life. I was responsible for making 3 completely different designs. The first design, I created was almost like a modern and clean cookbook. I used a modern san serif font that had a slight fun nature to it because cooking should be fun! I also used photos with a large portion of white space and creating white overlays over some of the photos. I believe this really captured both a clean and modern kitchen style. The next design I created, was an earthy and natural design. I choose earth-toned colors and an organic font. I believe this creates the user to feel like the recipes they will be found in this app will be healthy and more organic than your average recipe. For my final design, I wanted to do something completely opposite from my other design directions, which was fun, bright, highly pigmented colors with some color block. After creating the three different designs, they all portrayed a different feeling of the type of recipes in the application. The clean and modern design emphasizes new and unheard-of recipes, while the earthy design felt organic and all-natural recipes and the color block design felt young and fresh. Overall, each of these designs spoke incredibly different from each other.
After coming to a conclusion on which design to move forward with, my next task was to build out the screens of the entire app. Unfortunately, designing all the screens for the entire application resulted in a few different problems. The first being, that I had not planned out enough time for myself do create all of these screens. When beginning to design the rest of the app, I found the individual building was actually incredibly time-consuming. In addition, I began to realize in the wireframing process, I forgot to create multiple screens. For example, on the discover page, although, I designed a page for what will screen will appear after clicking into a single recipe, I did not account for building that specific page three more times, as well as the navigation bar at the top including, trending dishes, cuisines, breakfast, lunch, dinner and snack options as well.