Kitchen Cafe

Click and Collect website

Early Research

The aim was to ensure the website engages a seamless experience for their users.  Research began by doing a competitor analysis, to understand how other coffee websites were engaging with their users. It was also key to understand what API’s were used in click and collect systems.

Mindmaps and card sorting exercise

Brainstorming exercises were carried out to identify key features of the website. This then led to a series of card sorting with several users. The aim of this was to dig deeper into the values and needs of the user, to further empathise. We pinpointed key words on cards and categorised them into areas. Then added them to a chart to see what was most important to have on the website.

Site Map

The sitemap was created to help understand and illustrate the site flow. This enables room for iterations before designing. It helped form a better understanding of the goals for the website for both the customers and those receiving the orders.

Persona

The persona was made after gaining an understanding of the types of customers from the research conducted. Having personas can help designers keep to the key needs when designing.

Branding

The client asked for a logo and luxurious colours to be used on the website. I decided to go with a dark grey colour scheme for the backgrounds and white and gold fonts to give it that luxurious feel. I used a dark grey background colour to be able to give each section more space without having it overwhelming for the user.

Early Mock ups

Development

The client wanted the site to be built with cms, which was too difficult to edit content and images. The client advised that they wanted to ensure the website would be easy to edit for future development work. The website was created on WordPress. A third party API named prontofoodonline.com was used to set up the ordering system. The site had to load fast for users to browse and make orders. It was important to use a fast server so Blacknight was selected.  The website was built with a cache plugin to help quicken the load speed. The amount of plugins were reduced to help the load speed and all graphics were compressed too.