Figma and Hello Fresh App

By Austin Turner

Two logo’s side by side of the Figma Program and Hello Fresh Meals App.

For this project I was assigned to learn all about a program called Figma. Through some research about it, I have quickly found that it has the same use as the Adobe XD with all its features. However, being an online program, it can provide more. I will explain this later on, but first I want to talk about the project that I chose to do in Figma.

While learning how to use Figma I had to choose a topic for a catalogue design product. After much thought, I chose to do it on an existing app known as “Hello Fresh.” This app was published to help others be able to order their meals, and easily cook and eat them. I have never heard of it before until a family member showed it to me and told me of how easy it is to use. It is just another way to get food without stepping into the grocery store and have the time to put it together or cook it. Also, I was in the mood for some food and that is why I chose this existing app to be my catolgue project. Therefore, I wanted to give it a try and see what it is like as a customer by go through the whole experience. As I went through the app I quickly found out, that they have you fill out all the information at once at the beginning and then you choose your meals and continue from there. I bought a few meals from their selection and then I took a look at their designs and the way they published their content for the app. All I had to do from that point was to wait for the box of food to arrive and put it in my fridge until I was ready to make the meals and eat them. After the purchases were made and the waiting game began, I thoroughly scanned out the designs of the app and read through all the details. This was a rather well thought out app that was put together. Which made things difficult for me in seeing how I might be able to add or change things to make it look better. Or simply finding a way to improve the aspect and design or the features within the app.

Here are a few pictures of what it looks like from my phone.

These three are what you see when you first start up the app and get into the details. They ask for your information before you buy it.

These three pictures are what you see as to the details of each meal.

These pictures are snap shots of the app with in my phone. some of them are fuzzy because of the quality of the picture that it was saved as. These eight pictures are just a small portion of what the Hello Fresh app is all about.

Step One, Setting It Up!

There was a bunch of meals listed and this is what made the catalogue an easy layout and set up for me to do. All I had to do was mimic it and put some different chosen selections of meal into the new version of the app. So, I made a list and came up with a few pictures to provide and set up the catalogue look. Especially meals that I did not find in the app right away or were just not listed yet as an option. There is something about Figma to be said here as well. The Figma program also had a really nice layout to it. It has easy access to platforms, other layouts, and ‘plug-ins” that the Adobe XD program might not offer specifically. In Figma the Plug-ins are set design features that help with the layout size, shape, color, codes, text and grammar, graphics and icons, etc. These you could also find inside Adobe XD in comparison, however, you would have to download and wait for the software to continually go through updates. Figma is better as to how its used online or like an app on your computer screen. There is no waiting, or downloading because it is already there.

Step Two, The idea, and The Connections

As I have stated before, the “Hello Fresh” app seems to have everything in its well-planned design. In this catalogue you can chose a meal and then read all about it and what it contains. The details were great as to what food items it has, how long it will take to make or prepare, what the calories are, the list of utensils to use for making and cooking, as well as the instructions on how to make and cook the selected meal. There are even a few things in settings to help control your personal information or data in the app. With the things I have just listed, recreating it was the hard part of it all. After much thought and questions about it. I came up with small changes that I could be able to make. But just to be sure of my ideas, I took my questions to Facebook and asked for anyone who knows about the app and how to use it. This is where I heard good things and bad things with a great amount of feedback and responses about the “Hello Fresh” app. Which made me take caution into buying from the app. I even got a few answers to what people did not like about the design and the layout of it. The answers from my question on Facebook became clear and helped me with my thoughts and add upon it.

The thought was that the Hello Fresh app did not have a video to share about cooking. They only had written instructions on how to prepare each of the meals and cook them. Another thing that I noticed is that there is no way to change ingredients if you happen to be allergic to something or just don’t like what is there and you want to change it up. Therefore, I created a different design to the existing layout in order to add to what was already there. I even made a few modifications to where some pages could have been placed and to help the user navigate to them easier than having to scroll all the way to the bottom and finding it there.

Here are a few pictures of what the new version would look like in my design.

The changes I made to the app are as follows: First picture with simple logo and a start button. The second one has a shop cart on it at the top. The third has a menu bar and a exchange buttonfor the ingredients.

The Animated menu bar was a bit tricky to make it work how i wanted it to act and connect to all of the other pages that i created. The second picture on this row has a favorites star to it, as well as a video option. These features up front make it more useful for the user to have at their finger tips with out having to go bak and forth or into settings to find everything. The third picture on this row is a better favorites option and menu with a new button to review the meal that was purchased or to remove it from the favorites list.

This last picture is of the meal history and it gives you a better option to either order it again or to select it and to read through it again.

These pictures above show the differences in what I would like for it to have verses what is already there.

Step 3 Designing the Differences

For this to be my own project I decided to have one well thought out idea of how I could change the app and also make the idea as my own. The only beginning page that I did as the introduction is the starting view page. I made a button to get into it with a single press and that lead to the first original page as to the catalogue page. From there I chose one selected menu item and showed the original layout that it has in the app. From there I made a few minor changes that I made. The first one is the menu or navigation item on the page. The second one is how you can see the cooking page and the nutrition page. I also thought of a favorites page and how you can make it add to favorites. I also included a way that you can see someone cook as to what the recipe calls for to help others know how each meal is prepared and cooked. This is for those who want to know how easy it is to make or what to do when cooking and preparing it rather than only having one option which is to read the instructions. I did this so that there is a second option of listening and watching it happen so that they can get a better idea and understanding rather than reading it. This is just another example given to help others follow the instructions on cooking.

Step 4, Making The Prototype

This is the figma program that I used and in it you see a bunch of blue lines connecting everything together with how i want each page to act. This is what is called prototyping.

This step is supper easy because in the Figma program, there is a design area that is followed by the prototype tab and an inspection tab. This is located off to the right side of the screen. The way that pages interact with one another is how you can connect them together. This can also be done in Adobe XD in a similar way. Connecting pages is a fun way to make the ideas and pages come to life when you test it all out. What I found that was really cool and even better than the Adobe XD, was the fact that you can animate things into play with your designs and prototypes. Off of doing my research, I was able to see how I can group things together then at the top bar I make what ever design or group I put together into being a component. The groups that are turned into components are then variants to the system and you connect or attach them to one another in your prototype, then you use a type of code in the name of it and it is now has a complete action to be animated on the screen.

Components Verses Variants

On the left you see the design tab with the prototype tab and the inspection tab as part of the software designed for the Figma program. This midle picture has the layouts tab with the assets tab which help with the creation and the design of what you want or need. The picture on the right is the icons to what helps shape, or shade or make things connect or become a component in the designing phase. All of these are important to creating an animated feature in your product.

The thing that I have learned about Figma is that you can put a little bit of code into it to make the design stand out and do things. This is a very simple process after making the selected item or group into a component. The code goes into editing the name of the component by renaming it as a “state.” Just one word is all it needs. Even though it may say it’s a variant the word “state” helps to clarify the item being animated. From there the code of being in an open state or a closed state and what the name of variant or item is can make it clear to how you want it to act. You can do some code as simple as “state = open, hover = item name.” Renaming the entire selected design, or item, or group will help with the next actions of where you want it to go when hovering, clicking, pressing, or dragging the designed item on the screen. You can go back to the prototype and select which page you want it to go to.

Once all the components are made and the simple renaming with code is done The variants are how you want them to be. Your newly created animation will appear in the assets section on the left next to the layouts tab. You can then add the variant as a designed element into your creative pages and designs. I found this to be very useful and fun to interact with while testing out the prototype to make sure it all works.

Conclusion and Presentation

In learning how to use Figma my transitions to each page were a bit tricky. However, the more I mess around with the testing and trying to find a way to fix all the glitches and other things that get stuck in my creative design. I will not thing of Adobe XD the same way ever again! This Figma program is easy to use and very fun to create my next ideas and projects with. Unlike Adobe XD where you would have to have duplicate pages for the prototype to work properly in the way and design that you want it to have. Figma can reduce the number of pages for you by adding one asset that hold animated variants to help with the overall design and look and feel of the product. Also, it is easy to share and do group work in Figma. You can have multiple people work on the same project and design with out having to transfer files and wait on others. You can actually see what work they are doing and how they are doing it. This is the next best thing for everyone to have and create stuff with and even publish the designs. Other than that, my project turned out really well. I was able to demonstrate how to take an existing app and try to make improvements on it as to what could added upon the existing design or what I could change for a better overall user experience.

I have learned a lot and this was fairly easy for me to do. There might be a few things to work out still in this project, however, for the most part it works as well as i would like it to be. I encourage you to look up the Hello Fresh app on your phone and use it because it is a great thing to have. Untill you do, I would like to show you my project and the things that I have been able to do and change. Therefore I present to you my project, https://www.figma.com/proto/3YSzvjCJffzRcP4DRRWJCp/Food-catalogue-mobile-design?node-id=22%3A56&scaling=scale-down&page-id=0%3A1&starting-point-node-id=6%3A16&show-proto-sidebar=1 . Please view it and write a comment to tell me what you think? Thank you for taking the time to read through this and learn how what I was able to do with this project.