Building a Live Prototype

HZVhu7QFTnq6hV3XpI12_iPhone_animatedTo truly allow my app redesign to come to life, I needed to build a high fidelity prototype. Prior to building the prototype, I watched some tutorials to uncover the best way to build my app. After watching around a dozen tutorials, including “Intro to Invision Studio | Advanced Guide to Invision Studio” by Jesse Showalter, I came to the conclusion that interactive motion transitions are the step to take your app to the next level. To further demonstrate, an interaction is the action a user takes to reach a different screen. The most common interaction for mobile design is a tap. A singular tap can allow a user to open a screen that can give them more information, allow for a video to play, etc. However, as stated previously, by creating motion after a user taps something, allows the prototype to feel more advanced and alive. For example, if a user sees an image they like, if the were to tap on it rather than it just appear larger, the image grows into place in front of the user. I believe these transitions are the magic within prototyping and mobile design. Therefore, when building Cookbook, I tried to corporate these motion transitions wherever possible. In my prototype, this feature is most recognizable in the profile page. If a user chooses the different categories for saved recipes, there is a smooth transition between the pages. Also, if a user taps on the settings icon under the profile page, in order to go back to the profile page, there is a swipe down motion with a natural transition. Overall, I believe my prototype is successful because of it navigation, design, and interactions.

To view my final prototype click here. Live Prototype

Final Processbook ColoneseDiBello-FinalCookbookProcessbook

Considering the User in Mobile Design

Screenshot 2020-03-01 22.34.11After 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.

Screenshot 2020-03-01 22.34.25

Throughout my design process, one aspect that was able to help me stay organized and focused was an article by Cameron Chapman, “Mobile UX Design Principles and Best Practice”. This article stood out as a set of guidelines I used to remind myself while designing. Chapman goes over principles and practices such as:

  1. Put the User First

  2. Make Navigation Intuitive

  3. Create a Seamless Experience Across Devices

  4. Focus on User Goals

  5. Allow for Personalization

  6. Always Make Things Easier

  7. Use Established Gestures

  8. Focus on Speed

  9. Provide Feedback to Users

  10. Minimize Data Input

Overall, each one of these aspects I was consistently thinking about when redesigning Cookbook. The most interesting piece of the entire article, in my opinion, was when Chapman mentioned “the size of touchscreen targets” and the “thumb zone”. She explained,

“One of the biggest considerations is the size of the touchscreen targets. While a mouse or trackpad can click with pinpoint accuracy, fingertips are much less accurate. Ideally, targets should be 7–10mm on a mobile device’s screen. This allows for a fingertip to tap the target without having to aim too carefully.

A related area to consider is hand position controls and the “thumb zone” on mobile devices — the area of a phone’s screen that can be easily accessed with the thumb when a person is holding their phone with one hand. Putting the majority of interactive content (and particularly calls-to-action) in this zone is vital to creating a positive user experience.”

Prior to reading the article, I had never thought about how the thumb can only reach so far depending on the user’s hand position. Therefore, the position of elements within the app is incredibly crucial. In addition, when designing my navigation bar, I questioned myself for placing the bar on the bottom of the app. I wondering about the importance of choosing this specific location rather than the top or a hamburger menu. However, this article was able to confirm my choice. Overall, building the screens for the entire app was actually much more difficult than I originally planned, however, it allowed me to see what else I needed to focus on when building the app.

Full PDF –> ColoneseDiBello_artifacts5



Improving the Quality of Your Screen 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.

This week, I also did some research about UI design. An article called the “A Comprehensive Guide to UI Design”, mentioned that designers should create an “interface inventory” when designing for a screen.

“If you’re redesigning an existing product, an interface inventory starts by mapping out all of your components — no matter how large or small — so that they are systematically documented. If you’re embarking on a new project, you might like to map out a competitor’s product, undertaking an analysis of others’ work. This helps you to get a feel for the different interface components you’ll need to consider.”

Another interesting aspect that was mentioned was “Atomic Design”,

“Frost’s methodology establishes five distinct levels that comprise atomic design: atoms, molecules, organisms, templates, and pages. By building from the atom up, we create fundamental building blocks of design that allow us to build anything.”

Reading this really demonstrated the importance of the functionality of designing for the screen. As I mentioned in previous blog posts, I often will get caught up in design for beauty rather than functionally. However, if you creating through “Atomic Design”, it really pushes the designer to focus on movement and functionality within the app. Breaking down each individual function forces the designer to respond and use these critical pieces in their design.

Another interesting reading I came across was “7 Rules for Creating Gorgeous UI”. Throughout the article, the author, Erik D. Kennedy, describes these rules that are incredibly key for screen design. The first rule in the article is called “Light Comes from the Sky”, prior to reading this I never realized this aspect of web design. A designer should not create drop shadows, (which I did and will have to change) but should design how the lighting would hit a button if it were actually 3D. Throughout the article Kennedy continues to explain powerful design rules that I will be incorporating into my designs for next week. Overall, my research will continue to help improve the quality of my design.

Full PDF of work –> ColoneseDiBello_artifacts4

How Wireframes Eliminate Distraction


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

How Research Will Help Solve Problems

product-reviewsMy main this week task was to conduct research. There were a few different ways we decided to gather information including product reviews, user interviews, empathy maps, and competitor analysis. Each one of these demonstrated flaws within the app which has been able to help me understand problems and possible solutions for the redesign. To start off, the app I choose to redesign is Cookbook. Cookbook describes itself as “app for the ultimate kitchen resource with 50,000+ free recipes”, the description also goes on to explain that a user is able to create their own cookbook and menu while saving a shopping list as you use the app. In addition, the first step I took towards understanding the product better was to look at the reviews. Shockingly, Cookbook was rated an overall 4.9 stars out of 5. I found this incredibly interesting because when using the app myself, I found the navigation confusing and the design as overwhelming. Overall, the reviews revealed that people mostly loved that app for its it interesting recipes, nutritional information, ability to search, and vegetarian and vegan recipes. I also found in the reviews most of the customers, even though they enjoyed the app, they wish it included additional features such as cross-platform, a communication section, notifications, etc.

Moreover, in order to find out where Cookbook sits in the market, I decided to look at its possible competitors to see what they were doing differently and why. In addition, according to an article called “How to Do A UX Competitor Analysis: A Step By Step Guide”, the author demonstrates the benefits of carrying out a UX Competitor Analysis. Most importantly, the analysis allows designers to find market gaps, then ultimately solve the problems by developing a product or service (Douglas, 2017).My overall, takeaway from the comparison to Cookbook to other apps is that it was inferior. Although Cookbook’s content is loved by its users, the UX and UI was not as successful at its competitors. To further demonstrate, two of its competitors, Tasty and Yummly, both had an incredibly easy, yet useful navigation. The apps also both had features that created a more customizable experience for the user.  For example, Yummly, had required to me to take a quiz prior to entering the actual app to see what types of food I liked, if I had any allergies or diets, etc. therefore, I was only shown food that I was able to eat and that I was more likely to eat based on the questions I answered. Tasty, although, not as personalized, asked if I was vegetarian or not. Overall, I thought the competitors’ apps were more user-friendly with a stronger UI.

competitors            Finally, I observed user-testing and then conducted user interviews to understand problems within the app. To start off, I found that the users really enjoyed the pictures and healthy recipes. However, they did not like the design because it felt overwhelming with all of the words. Another user felt the app was jumpy and glitchy. The navigation was slightly unclear to users but they were able to find their way around the app. Finally, the users also explained what they app did differently such as adding a tutorial, in the beginning, to show to use the app, breaking up the homepage into categories and using videos to show how to make the recipe.

Overall, I believe the research step was incredibly successful, I was able to understand problems within the app, what the user wanted and come up with some possible ideas for the redesign.persona

All Research  –> ColoneseDiBello_artifacts1

The Seamless Production between UX & UI

IMG_7030Although the two terms sound similar and are often used confused with each other, there is a clear difference between UI and UX. To start off, UI stands for User Interface Design, while UX is User Experience Design. Let’s first take a deeper look into UX. UX is “ANY interaction a user has with a product or service” (CareerFoundry, 2019). The purpose of UX design is all about problem-solving and being functional. Therefore, the role of a UX designer is very unique.  In order to create a great user experience, UX designers usually look at market research, product development, strategy, and finally design (CareerFoundry, 2019). The purpose of market research is to discover who is the target audience for this specific product or service, then begin to create a model/prototype that will be beneficial to that audience. All of this research is able to “find what the user wants and needs…they then use their findings to design a product that puts the user first” (CareerFoundry, 2019). In an article called “UI vs. UX: What’s the difference between user interface and user experience?”, it describes how professionals will also use the “Usability Honeycomb”, as a foundation guide. The model consists of seven hexagons, each with an important piece for UX design. The words within each of the honeycombs include: useful, usable, desirable, valuable, findable, credible, accessible. Another extremely important part of UX design is empathy. The purpose of UX design is to “understand the user” and “map out a journeys”.

On the other hand, user interface design isthe series of screens, pages and visual elements—like buttons and icons that— enable a person to interact with a product or service” (UserTestingBlog). The tapping of a button, scrolling down a page, clicking an image are all examples of UI. In addition, UI focuses on the visual, interactive experience. UI can also be described as the part that allows the product to “come to life” (Sarah Doody, 2020). Therefore, UI designers control spacing, layout, color palette, typography, etc.  In order to maintain consistency, UI designers often will establish a style guide to allow the product to be “interactively seamless”.

According to my skill set and interests, I believe I am more of a UI designer than a UX. I have always found it fascinating and fun to make things look aesthetically pleasing. When something feels nice to look at, the entire experience is a stronger, more positive and more beneficial to the audience viewing. To further demonstrate, when looking at a magazine article versus a typed paper from a student, the magazine article is incredibly more appealing to the viewer because prior to reading, one is able to grasp an idea of the tone and feel. To further demonstrate, subconsciously a viewer is able to take in all of this information without reading based on the photos, layout, typography, etc.  Overall, I think it incredibly interesting to see how these two job titles differ from each other, yet they combine together to create a seamless experience.