Menu

Canteen Clash

Home / portfolio / Canteen Clash

Canteen Clash

A cooking competition within schools

Canteen Clash is a cooking competition within schools for kids. The idea behind it is trying to get kids to come up with tasty nutritious meals/snacks that they can eat together, but by adding a competition aspect to it, the goal is to get the kids more engaged and hopefully they will then go on to want to help cook at home.

Initially, I was going to try and target primary school kids but the more I thought about how I could integrate an app into it, the more I realised I would need to up the age, because younger kids would not have access to their own mobile phone.

The app starts with an onboarding process, where it will outline to the kids what they can do on the app. Following this they will be shown a sign up/login screen, where they can create an account or log in to an existing one, this will give them the ability to enter the competition and upload/browse or download recipes. On the main menu, the kids can either go to the competition page, the recipes page or the leaderboard page. The competition page gives them the option to either join the competition themselves or enter the voting and vote for who’s recipe they like the best. The recipes page is where they can browse their own recipes and recipes they have downloaded or they can download other peoples recipes to try out themselves. Lastly, the leaderboard page is where the kids can see where they stack compared to their friends in terms of how highly rated their recipes are.

Share

image
image
image
image
image
image

User Flows

Low and high fidelity user flows

When it came to designing the user flows, I started off by creating a low fidelity of a rough layout for the app. The high fidelity version came slightly later in the desgin process, once I had got some wireframes created.

Creating these user flows gave me a better idea of how the app would be laid out. The low fidelity version showed me what screens I would need and then creating the high fidelity outlined to me whether there were cretain screens I needed to add in.

image
image

Mockups

Screen designs
Onboarding

Although the Primary colour for this app design was red (#ee7a65), I wanted to have some secondary colours that could compliment the design. These three colours are only used either here, on the onboarding screens or on the artwork that I created throughout the app. The swipe-through style is used to try and make the onboarding more fun and interactive, as opposed to just text explaining how the app works.

Going back to the primary colour on these two pages. Initially, I had planned on using a white background with the text being coloured, but after trying it that way around, I quickly realised that the titles didn’t quite look right on the white background, they lost some eligibility. The idea was to create these two pages to look similar enough that you can Interchange between them by clicking the corresponding link underneath the title.

image
image
Home page and Submission screens

This is the home page, it has been split up into three images here because it is a scroll group. The difference, between this and the start-up pages, is that the titles are now just an off black colour, while the background is white. I tried having the coloured text but as with the login/sign up pages, it just didn’t look right. When navigating from this home page, the user can either use the links at each section, or they can use the navigation menu along the bottom of the page.

Enter the competition is the next page. This page is all about the user entering their recipe to be submitted into the competition. Similar to the login/signup pages the user can switch between this and the voting page. The thank-you page will appear when the user enters their own recipe and clicks on the submit button. By entering the competition the user will have a chance of being entered into the competition, the top ten voted participants will be the ones entered.

‘Join the voting page’ is the other sub-page that is linked to the ‘Enter the competition’ page. This page is where the user can choose what recipe they would like to vote for. Each user will get one vote and as previously discussed, the ten recipes with the most votes will determine who will be competing in the competition. The recipe with the most votes overall will be which dish the contestants will be cooking.

image
image
image
Recipe and leaderboard screens

These pages are where the user can see the recipes they have uploaded, as well as browse other recipes that have been uploaded by other users. Along with the name of the recipe and the name of the user who uploaded it, the user can see the rating of the recipe. There is also a download button available for the user to download the recipe and try it out for themselves. In terms of the design, these pages follow the same rules as the previous pages with some slight changes. There is a swipe left and right function, this will allow the user to swipe between either of these pages at will for easy browsing.

Following a link from the previous page will bring the user to this page where they can view a full recipe that has been uploaded by another user. The difference between this recipe and the one on the ‘Enter competition’ page is that this one is not editable text. The text on this page was originally smaller, then from this, I got some feedback and decided that not only on this page, but all the pages, the text needed to be increased in size. At the bottom of the page is where the user can rate the recipe. I tried to keep it simple with just a star rating, I had to make sure that the app itself was easy for the target audience (1st - 3rd year in secondary school) to read and navigate.

The ‘Thank you your rating has been confirmed’ page is the same style as the previous thank you screens, it will appear when the user clicks the submit button on the rating page. The last page of the app is the leaderboard page. The idea that the users can compare their scores to their friends is meant to create a form of competition even between the kids who don’t get to compete in the overall competition.

image
image
image
Illustrations

Initially, I had wanted to use images as opposed to illustrations, but the further into the design I got, the more I realised that this style would work better. I kept the colours accurate to the colour scheme used throughout the app so far. These three illustrations are not the final ones that I used. I was happy with these once I finished them but they didn’t look quite right once I placed them into the design. They didn’t work being placed on the background colours and with a white box around them stood out too much

These are the final illustrations I came up with for the onboarding process. After some trial and error with the previous illustrations I showcased, these were the ones I ended up going with. Keeping in the same sort of style as the previous variations, I tried to make sure these would work with a white box around them without making them stand out too much on the onboarding screens like the previous ones were. Each of the illustrations makes sure to use a good variety of healthy foods to stick to the theme that has been outlined for this app. Also sticking to the theme of the app, the colour scheme is the same, keeping to the style tile.

After getting the style for the illustrations figured out from the onboarding ones, doing these for the home screen was a lot easier. The only thing I had to change with these was the white box that was around the previous ones. I had to change the colour because the background on this screen was already white. Keeping with the colour scheme again with these illustrations but also adding some new colours that still fit in, just to slightly add some more depth to the image.

image
image
image
Prototype

The last thing there is to show for this project so far are the prototypes. The prototype for this project was created using Flinto.

This was one of the first few times I had used Flinto. Before this, when it came to prototyping I would have used Invision or Adobe XD. After switching to Flinto I can't see anything making me want to switch back. The amount of control you get, along with how finshed the prototype looks is amazing.