+44(0) 1803 391 993

Transform your business with us today through web design & development - we will achieve all your goals and objectives

contact us now

Bean and Gone Theme Website Design 

Business Identity:

Design is all about communication, so even for a templated design it's helpful to really think about what you're trying to communicate and to whom.

I liked the idea of having a trendy coffee shop, whose unique selling point was their high-quality coffee, sustainability focus and atmosphere, something you might not get at a chain coffee shop for example. I also guessed their demographic would be young professionals, maybe on a break from the office (back when we were allowed in offices). Their demographic would be used making online purchases and would be happy to order a coffee in such a way.

 

So, the key areas the design needed to communicate were:

  • The company would provide quality ingredients, with a heavy emphasis on sustainability and ethics.
  • A trendy young feel and atmosphere.
  • The Company would be privately owned rather than a large chain corporation.

 

Design:

 I first thought about what the user would see when first loading the website. I wanted a nice striking image and a strong call to action to be the first visible section of the website, this would then set the scene for the user as they explored the website further. The image that I chose for this was a bag of coffee beans in a rustic sack on a deep brown background. The image is heavily textured and mood provoking, so it stands out nicely from the background and would feel more tangible to the user. I then had the one call to action over to the right, as that's where the user's eye would naturally move to next.

  beanandgone.wbwebsites.uk_instagram-desktop-4-1 

Continuing on the first page, above the fold, I wanted to communicate the company's identity, without overwhelming them with text or images; a nice clean and simple introduction to the rest of the website. The green curve then draws the user's eye to follow the page further down, if they haven't already clicked the call to action at the top. I used green as it's a colour that represents nature, as well as complimenting the dark brown of the header image.

  

I wanted to use icon style graphics throughout the site and then have these short bursts of information. The icons could look a little out of place in contrast to the more rustic header image, and so I made sure to use the green colour to tie the two sections together.

 beanandgone.wbwebsites.uk_instagram-desktop-5-1 

Build:

During the build is where you can make the information more dynamic. I wanted the ordering options to be bold and so I set them on a dark background, similar to the colour of the header image to create consistency. I then had a product slider underneath that would give the user examples of what they could order. I wanted to create the idea of "I want that, how can I get it" and then present the user with the path to achieve their goal.

 beanandgone.wbwebsites.uk_instagram-desktop-6-1 

It takes a lot more persuasion to get a user to download an app than to use a website. This is seen with all the promotions that come with getting different coffee shop apps.

 

The website allows the user to order whatever they want and pay for it online, then they can either collect their drink or drink it in the shop. This allows for a contactless payment and is very COVID friendly and a lot of coffee shops are offering this service, however not the independently owned ones. This is another unique quality which sets this website apart from others. This website package is also an extremely affordable option for smaller businesses.

 

Overall, this website draws a simple yet beautiful design with accessible and useful functionality, perfect for independent businesses to keep their doors open and remain safe. Easily edited, this website can be up and running to take orders in days not weeks, leaving you with one less thing to worry about. Explore this website and our variety of other themes. Interested in having a website with us? Contact us today!

 

Subscribe to Updates

Subscribe to:
Like   Back to Top   Seen 28 times   Liked 0 times

Subscribe to Updates

If you enjoyed this, why not subscribe to free email updates ?

Subscribe to Blog updates

Enter your email address to be notified of new posts:

Subscribe to:

Alternatively, you can subscribe via RSS RSS

‹ Return to Blog

We never share or sell your email address to anyone.

I've already subscribed / don't show me this again

Recent Posts

WebBoss New Business Information Feature

| 21st October 2020 | Blogging

WebBoss New Business Information Feature

Our New Business Information Feature Can Help Improve Your Search Engine Results As you may already know, our sister company WebBoss.io is our proprietary content management system (CMS), that is used to build all of our customer websites and of course our own. Our development team are continually working to improve our CMS, so that we can offer you the most up to date, high quality features that will ensure your online business thrives. So with this in mind, our developers have been busily working on a new feature that could provide a huge positive impact on your SEO (Search Engine Optimisation). You may have noticed that when you type in a company name or specific search term into Google, a variety of different search results will appear. A few years back, when you searched for a company or something similar, you only had the choice from a list of webpages that would appeared on the Google search results page. Back then it was incredibly important that your website appeared at the top of the first page, or that was the goal at least. However, now we are provided with a lot of different search options when we conduct a Google search. One of which is a rich result, which goes beyond just bringing up a webpage link on the search results page. This information is far more useful for the user and often includes images, telephone numbers, locations etc. When you are searching for something specific, often the information that you are looking for will be displayed in one of these rich results, making it far easier to find what you are looking for.  You may have also noticed that when you search for a specific company, on the right-hand side of the search results is a box of information, this is called a ‘knowledge panel’. This type of rich result can be hugely beneficial to the user, as they can easily find exactly what they are looking for. Is a Knowledge Panel Important for SEO? Absolutely! A knowledge panel can be hugely important for your visibility on a search results page. If your target audience is searching specifically for your brand name, then you will pretty much dominate the top of the search results page on both mobile and desktop searches, with easy to find information like your phone number, where your business is located and your opening hours. This type of information is going to be very beneficial to you, as your business will be able to stand out from others and make you easy to find. This can help with your SEO, as you are more likely to gain clicks through to your website from your Knowledge panel. How Does Google Find this Information? Google bots love structured data when they crawl a website, this information highlights exactly what the webpage is about, and makes it easier for the search engine to identify relevant data for different search terms. This data is what Google will pull from a website and show in their rich results. The way in which the code is structured, means that each element must be filled out to describe what is on that webpage, for example, a recipe may have a name/title, author, ingredients list, cooking method, etc. All of this information will be pulled by a search engine to feature in the rich results as a rich snippet, again meaning that you as a user can gain all of the information that you require by doing a single search. However, filling this information out on a regular webpage can be a struggle not only for you as the user, but also for the search engine to find all the information that it needs. Our New Feature We have created a ‘Business Information’ feature within our CMS, that will allow our clients to fill out the important information that they want the search engine to see, such as opening times and amenities. Our developers have designed this feature to mimic the structured data that Google and other search engines will be looking for on your website, which will fulfil the rich results shown on the search results page. This will make the information ...

The Stoneygate Eye Hospital - Website Design Process

| 21st October 2020 | Blogging

The Stoneygate Eye Hospital - Website Design Process

Identity and goals: The Stoneygate Eye Hospital, a private eye hospital based in Leicester, is a company that specialises in corrective eye treatments, including laser eye surgery among many other services. It was vital that the high quality work and professionalism of the hospital was reflected in the finished website. With this in mind, the main goals for the website were to provide the user with information about the hospital, the procedures and the surgeons; as well as providing the user with an easy way to book a consultation. Another challenge that would need careful consideration was the fact that the user could potentially be partially sighted and so accessibility options would need to factor into the website's overall design.   The main goals were: ·         To provide necessary information to the customers. ·         To provide users with an easy way to contact the hospital. ·         To showcase the hospital’s professionalism. ·         To have accessibility for visually impaired users.   The Design: When the website design began, I needed to make sure that the website would be readable to the company’s audience, whilst also incorporating all of the brand colours. I chose to use the colours that were very contrasting to each other to create the titles and headings; this would ensure that it would be easier to read for people accessing the website who may be visually impaired. As such, I needed the titles to stand out well from the background and be very descriptive of what the text in the heading would contain. The most used headings took the form of dark grey text contrasting with a white background and then white/yellow text on a grey background to fulfil the contrast.   The Website Build: Accessibility was going to be my main challenge when building the website, ensuring that the hospitals’ clients would be able to access the website was extremely important within this particular website build. The main areas that I needed to focus on were ensuring that everything text-based could be read by screen readers and could also be re-sized. The text would need to be able to become enlarged, in order for it to be easier to read for visually impaired users. There would also need to be the option for users to invert the colours on the website, by doing this it intensifies the contrast between text and background and the darker colour is also not as harsh on sensitive eyes. To add this functionality to the website, the accessibility options that are included within the WebBoss system were used, meaning that users would have the option to change the font sizes to their desired size for their sight ability and invert the colours. Using research into similar websites, most other websites include their accessibility options at the bottom of the homepage, usually in the footer. However, these options would not only be included within the footer, but also at the top of the home page, to make sure they were visible when you first access the website, meaning that all users could easily access these tools.   All the information was laid in a clear and simple format, this was to ensure that users could find the information they were looking for easily and concisely. All the phone numbers that were visible on the website were made clickable, this makes calling the hospital a very straightforward process for the user, allowing them to call the hospital straight from their smartphone, or even send the number to a synced phone from their desktop. Contact forms were also used on the website as an alternative way to easily contact the hospital for a consultation. Call to action buttons were used throughout the website to direct the user to one of these end goals.   After the Website was Finished: After a website is launched, it is always a good idea to make sure that the goals that were originally set out by the company are being reached. To do this, we look at a mix...

Is it too early to think about Christmas?

| 28th September 2020 | Blogging

Is it too early to think about Christmas?

Depending who you talk to, September may seem too early to think about Christmas, but as the country heads towards autumn and winter following strict regulations to help control COVID-19, now is the time to make sure that your business is ready for the long winter season ahead. We have already heard reports about how COVID-19 has changed the way customers shop. As the landscape of the high street was already witnessing a rapid change, there are concerns that strict regulations to help reduce the spread of coronavirus could be the death knell of the high street as we know it. Those who depend entirely on a brick and mortar store may have found reduced opening hours and customer number restrictions have forced them into a corner with plummeting profits and the constant threat of redundancy. To these businesses, the message seems to be loud and clear, customers are moving online to shop to stay safe. If you are not already online, then the time is now! For those who have an online presence, they may have found that over the past 6 months they have received more engagement and orders via their website. With this in mind, businesses should begin to consider how they will approach Christmas from behind a screen. While it may seem ludicrous to consider talking about Christmas in September, preparation now could help to ensure that you maintain your customer base over the winter months, while keeping in line with the current restrictions. For many businesses, it is normal to have considered your Christmas stock and how this will be displayed in your shop by this point, complete with Christmas decorations and a Christmas classics CD playing through the stereo and this can really help to instil the Christmas spirit into your customers. Unfortunately this year, it seems likely that shoppers will continue to shun shops in favour of ordering online. To keep your customers willing, your business needs to shine online as well as instore. If you already have your instore plan ready, it may be time to think of your online store and how you can market this to your current customer base. A simple seasonal redesign can be a great way to display your Christmas products over the holidays, and with the WebBoss system, this can be an easy switch back to your original design. If money is tight, you can always use the built-in template tag to add some animated snow to your website completely for free! On top of a redesign, you can even select if you would like your shop products to be purchasable online, or to be displayed as a catalogue to help drive customers to your physical store. You can even offer gift vouchers or discount vouchers to customers if they sign up to a newsletter! You can even still offer your usual gift wrapping service, (to many this is a lifesaver at Christmas), at your pricing or for free! With a range of different delivery options to suit every business, an online shop could provide you with the flexibility to meet all your customer needs, without increasing your workload. Your delivery area can be customised to a few miles around your business, (perfect for greengrocers, butchers and bakers), to the whole of the UK, Europe, or even worldwide. The choice is all yours! We are happy to announce that soon our online shop can even offer a click and collect option for your customers, to make the last-minute rush even easier! Once your customers have signed up for a newsletter you can keep them up to date on your latest products, special opening times, or even secret offers available only to subscribers! WebBoss has a newsletter creator within the system that will allow you to contact your subscribers and is completely GDPR compliant, meaning you have one less thing to worry about in the run-up to the big day. Of course, let's not forget that Christmas is the season of giving, and so if you are a charity, church, or not for profit organisation you can even accept donations via your website. If you already have an online payment...

How to Take Pictures for Your Website - 6 Tips

| 08th September 2020 | Blogging

How to Take Pictures for Your Website - 6 Tips

Strong imagery can really make a website; if a website has clean, professional-looking images then this instils trust in the brand and encourages visitors to buy products or services. Website images can grab our attention and make us feel a type of way, not only will this improve your user experience, but in turn, can boost your SEO (Search Engine Optimisation) by improving your bounce rate. If that's not enough, using the right images can improve your conversion rates, as people will respond well to a website that uses good quality imagery and may make your website seem more trustworthy and professional; therefore people may be more likely to use your Call To Action (CTA) buttons. However, not everyone has the budget to hire a private photographer to take beautifully framed, wonderfully lighted images for their website, so instead of relying on the same stock photography as everyone else, here are our 6 tips for taking perfect pictures yourself.  1. Understand your theme Before you reach for your camera ask yourself "why am I taking these pictures?" While this may seem like a simple question, it is important that you understand the motivation for taking the pictures, and what message you want to portray to your visitors. For example, if you own a relaxing spa, you may want your images to really portray a message of tranquillity and relaxation. This could be clean white images showcasing some of your spa area, your massage table or products. You can use similar businesses to yours to get some inspiration for your own pictures, try and put your own spin on them though so that your pictures are unique. You could even use Google images for inspiration and paste some pictures into a word document, this way you can look back at them when you are ready to take your pictures. You may even want to use Pinterest for inspiration and pin some of your favourite looking images. Looking at professional pictures will give you a good idea of image composition, do you want your subject central or are you going for something a bit more quirky? Also, look at the type of backgrounds they are using, are they clean and crisp or are they colourful? Are they in focus or blurred? Once you have got your vision nailed, you can then go wild with creativity.   2. Have a plan Good execution comes from good planning; with a well thought out plan, you can counteract difficulties before they arise. The main areas to consider are: What images would you like to have on your website? This will depend on whether or not you currently have a website. You will probably have a rough idea of how many images you would like on each page of your website. For example, you may have a photo gallery featured where you can display as many images as you would like. You may have a banner at the top of your homepage where you may show three or more header images. You may need product images for your online shop and even some team photographs to feature on your About Us page. It's a good idea to make a list of all of the images you would like to shoot, so that you don't miss the all-important banner image or your best selling product, then you can cross them off as you go! Where will you photograph your images? Location; where are your pictures going to be taken? This could be very straightforward if you own a hotel or attraction, you will be taking your photographs at your business! But be specific, which rooms or features are you going to shoot. If you are taking your own product photographs, then this could be in a room in your house or even outside to make the most of the natural light! You will also need to consider the background of your images. If you want a clean background then a white screen or wall will work well (you could even make this out of paper and cardboard for your own DIY studio). It may be worth having a quick look at your premises and note down some areas that are on hand. Finally, remember that light is important when taking photographs yourself...