"Part 1
You’ve been tasked to update the Click and Collect section of the Joe’s and Bros website.
Use a prototype software of your choice to mock up one idea. You only need to do the first page of the menu (choose a location and click on ‘Start Ordering’ to open the first menu page you need to work on).
NOTE
You haven’t been asked to re-brand the company or redesign the whole website.
Part 2
Based on the website examples we have seen today, make a list of which other changes you would make to the Joe’s and Bros website?"
Research:
Company story:
The company "Joe's + bros" was founded by 3 friends who "met over the years working in the service industry or out socializing and always enjoyed talking shop or bouncing ideas off each other."
They want their business to be a reflection of themselves by creating an atmospheric hub for people to hang out, drink good coffee, eat better food and listen to great music.
Currently they have two coffee shops in Cork, Ireland. One is located on Gillabbey Street and the other at the Winthrop Arcade. They also offer catering and from recently a "Click and Collect" option witch allows the customer to pre-order and collect their food and drinks at the shop without having to wait for the queue.
Design:
Both for the shop layout and their website they have used bright and fun colors like blue, green, pink and teal.
The website was created with the help of Squarespace.
The home page consists of a large logo in the top center surrounded by the menu on both sides of it. They have used large images of some of their food, photo links to both of the shops, some decorative text and icons and an Instagram showcase in the end. The font used is "Motor-Normal" and the main colors are Pale pink (#FAD7DB) and Bdazzled blue (#2F56A5).
The overall feel of the website is simple and customer-friendly. The menu pages are easy to read and scan over.
Example:
The only page that does not fit with the rest of the website is their new "Click and Collect" page, where people can order and pay online.
This is the page we are going to work on in this task. :)
Part 1
For the first task I decided to follow the color palette and design choices made by the company and make the page in the same style. I did find some inconsistency in the blue color and fonts use throughout the original website.
I used the content that was already on the page with the only exception being the illustration of the coffee. I thought it will be a nice touch to add, since the original website contains some illustrations on it's pages.
The prototype was made in AdobeXD
Part 2
The main change I would make is to further develop the brand voice, visual language and archetypes to make the company more distinguishable among the competition and show that on the website.
1. Brand voice and purpose:
Reading through the information on the website I get the feeling that the brand was created with passion for food and drinks from the owners. They aim to make their business a reflection of who they are by creating an atmospheric hub for people to hang out, drink good coffee, eat better food and listen to great music. The brand needs a stronger voice in order to convey this.
2. Visual Language
The current website appeals simple and generic.
Throughout the years they have experimented with different visual styles, colors and fonts and that can easily be seen. I would fix all the small inconsistencies on the webpage and decide on a uniform color palette that can be used on all company related products and make them stand out. I would also change and maybe simplify the webpage menu on top to make it fit the rest of the site better.
Another thing I would do is to make the website more dynamic and modern. The client age range is between 20 and 40 years old, so I would make the page appeal to the customers more. I would invest in and include better quality photographs of the food and drinks as well as better illustrations.
3. Archetype
So far I have gotten the feel that the brand's core archetype is the Jester and the influencer type is the Magician so I would further push the brand to use that.
Jester similarities include fun, happiness, laughter, togetherness and positivity. They aim to provide good time and good memories to their clients through the food and drinks.
Magician similarities include transformation, vision and discovery. They make food and drinks that takes customers on a taste journey they will never forget, but they need a way to better advertise that on their page.
Commenti