1. We initially created an interactive version of the whole app using Adobe XD (very similar to Sketch). It's a schematic showing the various pages of the app, and the lines represent the clickable items and where they navigate to.

2. As this is an app featuring lots of different shop logos, in this prototype the main app logo was placed at the base of the page to give the businesses themselves priority – it also meant the brand logo could be seen on all pages.

3. As the app and logo became finalised, the logo was moved to the top of the page. The cafe menu items are listed in two rows at the top of the phone, enabling the customer to reach all aspect of the menu from one page – neat! The menu's themselves slide allowing more categories.

4. Perhaps the most important part of the app was creating a menu structure that could work in the same way for all the shops on the app – allowing a seamless experience for consumers. Plus, users are able to finely edit their menu choices. The red bar at the bottom makes the app work like a really big calculator – simplicity is key.

Click & Collect App Prototype Design Process

Red Onion worked closely together with the Your Places team to create a fantastic brand and UI/UX experience. This start-up provides a beat-the-queue click & collect app for independent coffee shops. The main app needed to be clear and easy to use, and appeal to consumers.