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

page22

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

Information Architecture and Wireframes

picture-3After doing research for Cookbook, the next step in the redesign process is to build both information architecture and wireframes. According to “Information Architecture. Basics for Designers” by Tubik Studio,

“Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software… (IA) aims at organizing content to so that users would easily adjust to the functionality of the product and could find everything they need without big effort” ( Tubik Studio, 2017).

In addition, people often confuse IA and UX, however, their roles in product design are incredibly different. Furthermore, Tubik Studio also explains that “IA is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. UX designers use them as the basic material so that they could plan navigation system”( Tubik Studio, 2017).

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 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. The 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 for individuals to save recipes in self-made categories.

IA

On the other hand, according to Will Fanguy on “How to make your first wireframe”, he describes wireframes as:

“a low-fidelity design layout that serves three simple but exact purposes:

  1. It presents the information that will be displayed on the page

  2. It gives an outline of structure and layout of the page

  3. It conveys the overall direction and description of the user interface” (Fanguy, 2019)

 

Moreover, when creating wireframes for Cookbook it was important that I made pages that were clear to understand with a simple navigation on the bottom. I also wanted to include a sign-in/log-in page for the app as well. One of the most mentioned problems of Cookbook in the product reviews was that there were no cross-platform meaning users were not able to switch from different devices because their information would not save. In addition, to solve this problem I created both a sign-in/log-in page and also a profile page, where users will be able to save recipes. Another feature I created when designing the wireframes for the shopping list page, there is a feature that automatically organizes ingredients by type, alphabetical order and then placement within the grocery store. Overall, it was a positive and beneficial experience creating both IA and wireframes because it allowed me to bring this design to a working and efficient level.

wireframe-sketch

Full PDF of Work –> ColoneseDiBello_artifacts2

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.

 

Chunking in web design

Chunking is described as ” In the field of user-experience design, ‘chunking’ usually refers to breaking up content into small, distinct units of information (or ‘chunks’), as opposed to presenting an undifferentiated mess of atomic information items” (Neilson Norman Group). Therefore, chunking is used in web design all the time to allow the viewers to have a easier time processing and remembering the information. Chunking can be incredibly beneficial because it eliminates the feeling of being overwhelmed by so much information. One of the way web designers use chunking to their advantage is by chunking text. One form of chunking is spilt large amount of text into small paragraphs with white space in between, this is visually more appealing and relaxing. Another way this is used is through chunking with hierarchy. With hierarchy on a website, a view can understand where to look first, what is most important and then can lead them to where they want to navigate to on the website. Finally, chunking is used with number because it easier for individuals to remember chunks of numbers rather than an entire single string of numbers. Overall, there is a clear importance of chunking in web design because it breaks up the information for the viewer to feel more at ease when using a specific website.

video in web design

A new and popular trend for web design, is embedding videos within the website. This is incredibly beneficial to a website for various reasons. To start off, video are very eye catching and draw the user in. A video can say more faster than text. In addition, video production as become much simpler, easier and faster to create, therefore, tons of websites are beginning to catch on to this bandwagon. According to the article “4 Major Uses for Video in Web Design (2017)” by Trent Erwin, he describes the benefit and purpose of four types of video use in web design. The first type of video he mentions is a background video. Background videos are used on the home page, using normally b-roll and no sound, typically around 30-60 seconds long. This types of videos are important because they “connect visitors with your team, connect visitors with your culture, showcase a product or service, instantly give the user a glimpse of what you do and entertain your audience with a beautiful video”. Clearly, there are some incredibly strong reasons to use a background video on the home page. One website, that does this successfully, that we all already know of is the Quinnipiac website. QU.edu’s home page is a series of b- roll of students in class, doing activities and amazing drone shots of the campus. I believe this is so successful because it give the average person a look into the life of a Quinnipiac student. Screenshot 2019-03-04 13.37.00.png

The next type of video use in web design is the about us video. The about us video is a great idea because it connects the user with the group, company, etc. on a more personal and deeper level, such as a conversation rather than reading text. The article also describes how it “gives visitors a reason to work with you, sum up who you are and what you do in a few minutes and again entertain”. In addition, HubSpot does a successful job a place a video about their story on there about page that really give the audience an inside look on a deeper level.

Screenshot 2019-03-04 13.40.41.png

Video loops are also commonly used in web design, as something to give the page a little extra touch. The article describes them as “a subtle, yet personal touch”. There are a few key reasons to use a video loop on your website, “increase visitor engagement, showcase personality, allow visitors to connect with your team”. One example, is from the Boo Cat Club website, they use various looping videos on their home page.

Screenshot 2019-03-04 13.47.37.png

The final form of videos in web design is the use of cinema graphs. Cinemagraphs are unique slight moving picture that grabs attention of viewers. A great example of this, is the Budweiser website. The Budweiser website has a cinemagraph of the bubble in their beer moving, a slight little touch that is incredibly engaging. Screenshot 2019-03-04 13.50.23.png

Overall, there are various ways to increase engagement on websites with different types of videos such as background videos, about us videos, loops and cinemagraphs.

Web Design Trends for 2019

In the article “10 Innovative Web Design Trends for 2019”, by Lennart de Ridder, the author describes the recent patterns he has noticed in the newest and best websites. After reading the article, I noticed that I have seen this trends all over, and they are incredibly aesthetically pleasing. To start off, one of the trends he mentions is “serifs on screen”. This is outside of the norm for web design because most often is it known that serifs are used in print, and san serifs are used on web, however, this trend is breaking that rule. Most often, when I hear imagine thin and beautiful serif fonts, I immediately think of fashion. I have notice that fashion brands are translating this serif from their print magazines to their websites. For example, vogue is sticking to their tradition didot font on their website as well as in print.Screenshot 2019-02-25 19.13.11.png

Another popular trend, that I have been using in my designs as well, is using “Black-and-white palettes”. In my opinion, using a black and white palette, especially in web design is incredibly pleasing, sophisticated and elegance. In addition, another popular trend is “minimalism”. I have noticed this can be incredibly popular for the sleek look. The website for Creative Park follows both the black and white palette and minimalism style. Screenshot 2019-02-25 19.17.58  In addition, another trend noted was natural and organic shapes. I have seen tons of this is recent design. I believe this is so popular because of the simplicity of the look. The website, Built By Buffalo, does any incredibly successful job at creating this organic shape look. Screenshot 2019-02-25 19.24.27.png

Finally, a trend that I too have been using is glitch art. Glitch art has become incredibly popular in the best year, I have used it in video production as well as photo editing. Joanna Szproach is known for her amazing web design and glitch art. Screenshot 2019-02-25 19.28.15.pngOverall, there are various upcoming trends for 2019. I hope to incorporate these into my future work as well.