Mystery Meal – UI Comps

Recently I have been working on updating my comps for the Mystery Meal iPad application. For this design, I tried to use the size of the iPad to my advantage. The large screen size of the iPad makes it so a lot of information can be put onto each screen. Finding a way to use this space wisely is probably the most difficult part of designing for iPads. There are some apps that would work better on smaller screens, like iPhones, and some that work better on larger tablet screens.

For this app, I was once again going for the flat design. Other than the background, which is a textured light green color, the rest is all flat colors. I chose orange, green, and black as the main colors because I think they all compliment each other well. Orange and green also relate to food, so I thought they would be appropriate colors to add into the design.

One challenge I faced was determining how to make the transitions on each page work. At first, I just had an orange line running through the middle that separated each section. However, for the app I was trying to make, this did not necessarily work. I got rid of the line and instead made a section header that was smaller than the main one on the page. This way, the user can tell that each section is different, but they also know which part of the page is the main section.

Check out my UI comps below!

Log in Screen

Home Page

Home Page B

Friends Page

Meals Page

Settings Page

Mystery Meal – Paper Prototype

Make My Meal: Information Architecture and Wireframes

This past week, I was working mostly on the information architecture and wireframe comps for the Make My Meal app I am designing for the iPad.

I want the app to start off with a login screen; it is going to be like a social media app for food. Each person will create an account and be able to add friends and share meals. After the login screen, you will be taken to the home page. The home page will feature empty slots, where the user can enter in different ingredients they have at home and have the app make a meal based on meals other users have made (and possibly a database). There will also be an option that allows the user to create a meal under 400 calories.

For the rest of the inside pages, the titles will all be labeled with an icon in a tab at the top. The structure of the information on each page will be more grid-like, with each friend, food item, or other piece of information listed in its own section. As the page goes down, it will scroll through other users/food items/other info, depending on which page the user is on. I feel like using more of a grid on this app because this type of app would be more useful with an easily accessible and straightforward design. When I finally create comps out of it, I think it will be easier to create the flat design type feel that I am going for.

I am really excited to start making this app because I really think that this could be a huge step for food and social media apps. I don’t remember ever seeing any apps that combine the two aspects (food and social media), so I can’t wait to create this one.

Make My Meal Information Architecture

Make My Meal – Login Screen

Make My Meal – Home Screen

Make My Meal – Friends Screen

Make My Meal Persona #2

I decided to create another persona for my Make My Meal (working title) app that I have been creating for the iPad.

As opposed to my first persona, this one will be of an older woman with children. I decided to go this route with the second persona because the first one was a younger college male, who lives a busy college lifestyle and likes to make his own meals and eat healthy. This persona will be vastly different from the first, in that she is an older female who has children, works at home, and cooks meals for her family every night. This would be a totally different user than the first because she has to make different meal choices since she has a family to cook for. She also has less time and say in what will be cooked, seeing as though she is cooking for an entire family, not just herself.

I think she would still be a user of an app that creates meals based on food on hand because anyone who has to cook for an entire family would like something that makes their job easier. This app would probably take away the need to make a grocery store run every day or two, and instead just give the person ideas as to what to make based on what ingredients are already laying around the house.

Please check out my second persona below!

Make My Meal Persona 2

Website Comps

Well, time is flying by. It seems like just the other day that I was starting my identity process, and now I am already onto creating my portfolio website. After creating my wireframes and messing around with them a little, I made a decision as to what my final website will look like. Using elements from both wireframes, I started creating comps of what my site will look like.

As with most of my identity pieces, the site will rely heavily on the colors and feel of my logo. The grays, black, and white will all factor into the site and create a sleek, modern, and clean website that will showcase my work. My homepage will be somewhat like the one I made a wireframe of, where the logo is the prominent element and the nav is placed around it. However, the logo won’t be quite as big and it won’t be in the center, but rather on top, of the navigation icons. I created several icons that I thought went with the theme and would be easily recognizable. I tried out some different fonts and colors, but I think the black typeface with Myriad Pro Condensed came out the best. That font gives my site a more modern and sleek feel; it is almost like a robotic feeling font.

The inside pages will take on the look of the original wireframe. The nav bar will go across the screen horizontally and the logo will be in the top left, with my name above the nav in the top right/middle area. All of the content will fit under the nav. As I’ve said before, I think this is a clean and modern way to set up a site, and I think it will be very effective in the end.

The portfolio section will be the most important, of course. It will showcase each picture of the work I have done, along with a description of the work. Each picture will be clickable, and I’m hoping to have a lightbox that will pop up when you click it in order to give a zoomed in view of the work.

Please take a look at the website comps I came up with!

Home Page Comp

About Page Comp

Portfolio Page Comp

 

Website Wireframes

Now that I have decided what is going to go on my website, it is time to start designing what the site is actually going to look like and how it will feel.

Normally I would start out by sketching some of my ideas on paper, but this time, I went a little bit of a different route. I recently discovered a website called NinjaMock, where anyone can go in and create wireframe comps of anything from websites, to iPhone and iPad apps. It is a really great site for someone who isn’t the best at drawing, but likes to start off their designs with wireframes. I don’t know what kind of designer doesn’t do some kind of sketches or wireframes before they start a design, but hey, I’m not one to judge!

On NinjaMock, it allows you to choose different pieces of a site that you want to put on it, such as search bars, text, images, icons, scroll bars, etc. If it’s on a website, they have it for you to use. I really like this site because all of the pieces have a hand drawn feel, which adds to making it seem like a sketch or wireframe.

The couple wireframes that I created were vastly different from one another. One of them looks like your normal site; the nav bar is up top, right below the logo in the top left and header in the top right. The images and/or text will go directly below the nav bar. For the other wireframe, I went with something completely different. This one relies heavily on the logo; I placed a large version of it directly in the middle, with the nav icons scattered around it. I think this gives it a different feel than a lot of sites, while still being aesthetically pleasing, easy to navigate, and effective.

Pictures of my wireframes are below.

Wireframe 1

Wireframe 2

Portfolio Site Flow Chart

The next step in my process is creating my portfolio website. With almost everything else in the identity portion of my portfolio done, this is one of the final (and most difficult) steps in becoming a professional graphic designer.

To decide how my site is going to be laid out, I first had to figure out exactly what was going to go on my site. What content, information, pictures, etc. would go on it? Well, to figure that out, I looked at all of the design related work that I have created over the past few years. I organized it all and checked off which designs would make it, and which just would not make the cut. After this process, I found quite a few designs that would work well for my portfolio. I made sure to choose from the best of the best, and not go with anything that didn’t show off the height of my abilities.

I decided that aside from the obvious home page, I will have an about me page, a page to show off my work, a page that directs you to my blog, and a page displaying my contact information. I felt like this would be an adequate number of sub-pages, considering the amount of content that will be all on one page (the portfolio page). My portfolio will be split into several sections, as the picture will show, including print, UX/UI (web included), mobile, and photography, just to name a few. I have more than enough designs in each of these sections to showcase my abilities, and I think I am heading in the right direction to starting my website.

Flow Chart for my Portfolio Site

Identity – Business Cards and Letterhead

I recently finished up my business card and letterhead designs for the identity portion of my portfolio. I tried to match up the colors and feel of the business card and letterhead to the logo that I have already created for myself (the spiral eye with different shades of gray and black). I relied heavily on the logo, especially in the color scheme. I have a pretty simple color palette; all that is being used is black and different shades of gray on a white background. I think the simplistic but modern and sleek feel will prove to be effective.

One side of the business card will be the logo, with parts of it bleeding off of the edges. (I like to think of this as the eye watching you). The other side will feature my name and contact info, all the basic stuff that would go on a business card. I will be putting in an order soon for a bunch of cards, so I can hand them out to people I meet. I’m thinking about getting a texture card, or something that has the logo popping out a bit. I think this will add to the effectiveness to the card by giving it 3D qualities that one would not see in many business cards.

For the letterhead, I went with a simple small version of the logo in the top center, and I put my contact info on the bottom under a thin line. I think the simple feel of this will match with the business cards. The identity portion of my portfolio will all tie together nicely.

Check out my business card and letterhead designs below!

Business Card Front

Business Card Back

Letterhead

Make My Meal Persona

This past week, I was working on creating a Persona for my new meal app, which I am calling Make My Meal, for the working title at least.

For this persona, I wanted to create the college student that lives a fast-paced lifestyle. This, I believe, would be the top user of an app like this one. I am a college student myself, at the moment, so I know what it is like not wanting to go out for food all the time. There are always times when I look at the food I have in the closet and wonder to myself, “What is something good that I could make out of these few ingredients?” While there are few times when I can actually throw something together using the random food I have on hand, most of the time I just end up going out to eat.

This user is also an experienced user of technology, or specifically iPads. A lot of college students are experienced with iPads and tablets, so I thought this would fit the profile. This type of user would be looking for a quick and easy way to find healthy meals.

On the persona, I posted graphs relating to the user’s personality, usage of iPad apps, and his basic technological skills. I also included a section in which the user would rate, on a 1-5 scale, how often they do certain things or how likely they would be to do certain things if the app were being used. I think that this gives the viewer a good idea of what different things someone would be able to do now that they have this application.

Please check out the persona below!

Persona for Make My Meal

Make My Meal – User Research

Over the past few weeks, I have been working on a new application for the iPad.  My original idea was a meal and recipe application that creates meals for the user based on the ingredients that they have on hand.  In other words, the app will make recipes using the food that someone already has in their home.  Have you ever been hungry and cannot think of anything to make at home using the food you already have?  And have you been too lazy to go get more ingredients for a big fancy meal?  Well, if you answered yes to one or both of those questions, this may just be the app for you!

After researching meal and recipe apps, as well as seeing if there are any other apps that do what mine does, my next step was user research.  To begin, I wrote out a series of questions that I would ask several users.  These questions included ones about usage of iPads, meal apps, extra feature ideas, and a lot of questions having to do with food.  I interviewed three people:  my friend Dan, my friend Chris, and my mom, Joanne.  Each of these people owns an iPad and enjoys food, so I knew they would be good interviewees!

During my user research process, I found some interesting data.  I found that although there are many food apps out there, not many people, if any, have used an app that does what I would like mine to do.  I also heard some ideas for new features for the app, many of which I enjoyed.  One of the popular ideas was to have a feature that will create healthier meals for the user.  For instance, if someone is on a diet, they can type in what their ingredients are and how many calories they would like to eat.  The app will mix and match the ingredients, using a database of crowd-sourced data, and create a healthier meal option than it normally would.  This process was definitely useful, as always, in finding out more information about what people like and don’t like in food/recipe apps.

Below is my user data brief that I created after conducting all of my research.  Check it out and see what these users had to say!

Data Brief Cover

Data Brief Page 1

Data Brief Page 2

Data Brief Page 3