top of page

A look into my UX and programming work on

Cereal Snacker

My work on Cereal Snacker consisted of me doing both the designing and programming for the web application. I used the Figma for the design and the following programming languages for the building of the actual website:

  • HTML 5

  • CSS 3

  • PHP

Problem

New cereal brands are constantly coming out. With this immense choice provided to consumers it can be hard to pick which cereal is the one for them. With no way for people to be able to try a cereal without committing to buying a full box, some way to find the ideal cereal for each individual is very needed.

Frame 5 (1).png

Process

When creating designs for this web application I had to keep my limitations in mind. That being, I was only allowed to use HTML, CSS, and PHP. For this reason, I decided to go with a fairly simple layout that still conveyed all the information the users would need to see in a easy to read format. I also made sure to keep in mind that I would have to design and program the whole application within a week. As such, I focused on creating solid, simple interactions rather than an intricately designed web app.

The code for this application can be found here.

Frame 4 (1).png

Product

The final product is a web application that allows users to both sort and compare different brands of cereal. It has a minimal design that allows information to be displayed in an easy to read, straight forward manner. With a light color palette, it is able to give off an informal and comfortable feeling that is suitable for the material it covers. This is further emphasized by the round input options and buttons which help to convey the message of the website through its design.

Frame 6 (1).png

Post Analysis

When looking back on this project I am impressed at how much I was able to get done within just one week. All the same, there are a few things I would do differently if given the chance. The most prominent one being that I spent most of me time focusing on the programming aspect of the project. While this is not inherently a bad idea; I feel as if the design of the website may have suffered because of this at times. I made sure to take the first few days to research my target audience and make low fidelity prototypes as well as mood boards for how I wanted to application to look. However, I had become too narrow minded in thinking about what would be possible programming wise within the given time limit. As such, I feel as if I had unnecessarily limited myself from a design perspective. When doing such projects in the future I will avoid making the same mistake by giving myself times in between programming to re-review the design and change it as is necessary.

bottom of page