Revisiting Snackle

Applying new knowledge to old work

When the chance came to practice my responsive design skills the choice was simple to me, my first attempt at the Snackle project was the ideal choice.

Responsive design - Creating designs that will fit and adjust to different screen sizes. The way that sites fit onto your phone without the page having issues is the result of responsive design!

Sitemap

When designing a responsive website a sitemap is crucial and so I created one to illustrate that my design is sequential. Since the main flow is ordering food a squential design fits nicely.

Wireframes

While looking back into the original project I took inspiration by the initial designs and brought them into the wireframing process. The big panels and bespoke sections make a return in the wireframes.

The usability study I did at this point returned almost entirely positive results which lead me to jump into Mockup creation

Mockups

The creation of distinct designs for each screen size meant that I had to find a way to still show the same info without cluttering the page or making it unusable. The ust of much more open space was the solution for me when dealing with sizing down to a mobile screen.

The Hi-Fi prototype followed the same flow from the Low-fi but I included some design changes influenced by user feedback. This is expressed by the buttons retaining their position when possible and the buttons having more depth.

Accessibility

I always want to grow in my ability to create for the disabled community and I took that philosophy further in my Snackle reimaging.

Finishing thoughts

Since this was my introduction to Adobe XD I learned a lot about the production flow therein.

The improvements I made since the first Snackle Project gave this project new life. There will always be room to improve and I am more than excited to see where I can go from here.