App

Our goal for the Cal Pal app was to create a program that can assist users in making health-conscious decisions concerning their diet. Cal Pal is a portable scanning device that analyzes the user’s food and exports the caloric content and nutritional information to their smartphone where it can be saved and tracked for future reference. The data can be accessed through the Cal Pal app or website. The desire for the app was to create a program that made dieting easier and more enjoyable for the consumer. This goal was accomplished using two strategies. First, the app makes it more convenient for consumers to track their caloric intake and make wise decisions based on those results. Second, the app added a social aspect to dieting by adding a “friends” feature and implementing a user feed. This social aspect provides the user with both accountability and enjoyment


 

First Draft:

In the first version of the app, there were three main functions: 1) pairing your mobile device with the Cal Pal portable scanning device, 2) analyzing the “results” of your food choices, and 3) viewing your “calorie tracker.” The initial design of the app is simplistic, but it accomplishes the primary goals that we had for our product.

 

Revision:

Phase 2: We incorporated the new logo to the homescreen of the app, along with some new design elements to fit the new theme that we’ve established. On the homescreen, there are also two new functions provided by the app: the “results” and “calorie tracker” tabs. At this phase, we had successfully designed the skeleton of the app for our final version, post-revisions.

Phase 3: At the final stage of our design process, we added subtle revisions to the aesthetics of our app that were suggested to our group. We added a new “friends” tab on our home page, rounded the text frames, and created headings at the top of the screen, so that users are able to navigate the app easier. Additionally, we also created a “feed” section where users are able to see posts created by their friends -- this can include recent food that people have ate or healthy recipes that users want to share with their peers!

This is the original design in Adobe XD CC

Above: The original view of our app in Adobe XD CC

Below: The updated view of our app in Adobe XD CC 

The updated view of our app in Adobe XD CC

Brochure

First Draft:

Our goal for the brochure was to create a document that condenses all the information about Cal Pal in an easy to read format. We wanted the brochure to have the same theme as the app, so we decided to use a simple blue and white background. The brochure is a standard tri-fold and the headings for the six sections are Cal Pal, What is Cal Pal?, How does it work?, Nutrition Facts, How you can get it, and Contact Information. These sections contain most of the information about Cal Pal and gives a detailed overview of the product. The brochure’s purpose is to educate the reader about the product and hopefully sell them on the product. The goal is to get as many people to buy the scanner as possible since the app is free to download.

Revision:

After reading the comments on the original brochure, we decided to tone down the blue background since it can make the text hard to read, especially on the inside panels. To do this, the opacity of the blue was turned down to make a lighter shade of the original color. Some people felt the images were slightly cluttered with the text. To combat this issue, I increased the distance between the text and pictures and deleted one image of tomatoes. In addition to this, we thought it would be a good idea to add pictures of our faces on the Contact Information page. This would allow the reader to place the name with a face. Before adding our pictures this section was very plain. These changes improve the visual aesthetic overall.  

Website

First Draft:

Our goal for the website was to make something simple, clean and smooth. I wanted to succinctly present the features of the product along with the facts about the need for the product. I incorporated various images along with interactive features to our one page website. Also, when I chose the pictures of the food, I looked for high quality photos with the downward angle onto the food. 

Green Website

 

 

Green Website 1Revision:

Many suggestions mentioned switching the green theme to a blue theme in order to cohesively integrate into the app the brochure. I also incorporated different states of the widgets such that icons changed colors when you scrolled over it. 

Blue Website

Blue Website 1

Presentation 

Our goal was to create a visually appealing presentation that is easy to follow and well-organized. I started by creating the structure of the presentation and inputting cover slides. Each cover page followed the same, simple design format, but with differing images that related to the content that followed. The format consisted of each page being composed of a graphic relating to the content that followed, and a title in the lower, left-hand corner. For example, prior to the information slides regarding the App, a cover slide with the image of a cell phone opened up to images of food (hence CalPal) was displayed.


 

The titles for each cover page were overlaid with a white, low-opacity background so that the text would stand out against the background of the photo. Each individual page throughout the presentation was also accompanied with a page number. The purpose of the page numbers was to act as another visual cue that the audience could use to follow along with the presentation.

 

 

The presentation begins by introducing each of the speakers and an outline of our presentation so that the audience members would better be able to follow along with our presentation conceptually since they were given the structure ahead of time.

 

Having the presentation start and end with the content of discussion regarding the product itself and with the same speaker further helps audience members to easily digest the information as well because of this the structure of our presentation followed a circular, cyclical pattern.