Figure 1 - Mockup / Title of Image: Cafe Sign / Source: [(Online) Imogen Buttimore, 2024]






The Coffee Nook

Final Project.





Project Overview & Brief

For my last semester of university, I undertook a final project in which I was able to create my own project idea and brief. The Coffee Nook is a cafe that specialises in hosting a quiet and cosy space for book and coffee lovers. A range of book related social events also happen within the cafe. The brand also offer a range of subscription services involving the cafe's speciality coffee and a choice of book. Therefore, within this project I needed to create the branding, website design, packaging design, subscription model and a brief menu.



unshackled

Figure 2 - Mockup / Title of Image: Coffee Cups / Source: [(Online) Imogen Buttimore, 2024]

Research

Brand Competitors

The first step of research was to identify any brand competitors that The Coffee Nook may have. For this, I googled current book cafes that specialise in the social reading aspect.

I first discovered BookBar, a bookshop and wine bar based in London. BookBar was opened by a former bookseller and they have now created a comforting atmosphere focused on socialising around books. The BookBar holds regular events, creating a bookish community with live music, wine tasting and even 'read dating' (Poole, 2021). This brand is similar to the project as it focuses on the social aspect of reading, and offering readers a cosy environment. A number of differences include that they also host alcohol related events and do not offer any sorts of subscriptions.


unshackled

Figure 3 - BookBar Image / Title of Image: BookBar / Source: [(Online) BookBarUK, 2021]




The Common Press - This is London's first queer intersectional bookshop which provides a safe space for the LGBTQIA+ community. They host a diverse range of events from book clubs, book launches, workshops and yoga. The Common Press has a large range of books available, primarily from authors within the LGBTQIA community, along with tea and coffee available (Poole, 2021).


unshackled

Figure 4 - The Common Press / Title of Image: The Common Press / Source: [(Online) LondonTheInside, 2022]




Books on the Hill - this brand offer reading rooms within their cafe. They provide a comfortable space to enjoy a drink and read a book, meet with friends or enjoy an event. They host a number of book clubs, from breakfast book clubs to after hour book clubs (Books on the HIll, n.d.). These three cafes showed me what is already available on the market and how I can make mind stand out from these.


unshackled

Figure 5 - Outside of Cafe / Title of Image: Books on the Hill / Source: [(Online) Books-on-the-hill, n.d]

Branding Research - Colour Palettes

For the second part of my research, I looked into potential colour schemes that I could use for the branding colours. According to Martinez (2023), one of the key aspects to consider when deciding on brand colours, is which colours will create a cosy atmosphere. Many cafes and coffee brands opt for shades of brown, yellow and white. I then thought it was best to research into the connotations of colours, and to decide on which colour connotations I thought would work best for The Coffee Nook.


Colour Connotations (Martinez, 2023)

Branding Research - Typography

Once I looked into colour options, my next task was to conduct brief research into typography choices. I already knew from the start of the project that I wanted to utilise a handwritten font. This is because I want the branding of The Coffee Nook to be friendly and comforting. According to www.quillcreativestudio.com (2023), handwritten fonts add a personal and informal touch to brand messaging. Brands seeking authenticity and approachability often use handwritten fonts. Spivak (2020) also states that handwritten fonts can emphasise the unique characterisitcs of a project or design, as well as, generating more attention. Spivak (2020) says that because these fonts require a little more brain power for full comprehension, they force people to look at the design for longer.


unshackled

Figure 6 - Fonts / Title of Image: Websites with Handwritten Fonts / Source: [(Online) Wix, 2020]

UX Research

As I am designing the website for this project, I looked into user experience research so that I could achieve a user friendly and accessible website design. It was important for me to design a simple website to prevent confusion amoung users, so that they have a seamless experience with the website. According to Devaney (2014), there are several guidelines and practices for exceptional web design and usability. This article states that I will need to prioritise user experience by designing with the user in mind and understanding their needs. It is also important to include simple navigation, by implementing clear navigation menus, organising content logically and using descriptive labels to guide users effectively. Devaney (2014) further says that websites need to be responive and mobile friendly to provide a smooth experience across different devices and screen sizes. Next, it is said to focus on visual design by using appealing visuals to enhance the look of the website and to engage users effectively. Following these guidelines will ensure that I design a user friendly website that will be smooth and easy to navigate for all.

To further my research, I thought that it would be beneficial to include user experience laws within my website design to acheive a user friendly design. Yablonski (2022) staes that users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. This is known as Jakob's Law. To ensure that this law will apply to my design, I looked at other coffee and book subscription service websites to identify the clear design elements that were used throughout these sites. When analysing these sites, I found similar elements across the sites such as, a simple navigation bar, the use of white space and drop down menus for curating a subscription. To follow Jakob's Law, I tried to include these elements I found from alernate websites in my own designs to ensure that users will feel comfortable using The Coffee Nook's website.


unshackled

Figure 7 - Web Design / Title of Image: A range of Web Designs / Source: [(Online) Imogen Buttimore, 2024]

Sustainable Web Design

Sustainable website design is an apporach to designing web services that puts people and planet first (sustainablewebdesign.org, n.d.). It delivers digital products, services and data that respect the principles of the Sustainable Web Manifesto which is to be clean by using renewable energy, to be efficient by using the least amount of resources and energy possible, to be open by being accessible, to be honest by not misleading users, to be regenerative by supporting an economy that nourishes people and planet, and by being resilient through functionality. I wanted to try and implement sustainable web design into my work so that I support putting the planet first within my design. I also thought that it would be crucial to do this due to the current state of the climate.


unshackled

Figure 8 - Web Sustainability / Title of Image: Sustainable Web Design / Source: [(Online) sustainablewebdesign.org, n.d.]

Target Audience

To finalise the brand's target audience, I utilised ChatGPT to generate a suitable audience. To achieve this, I asked ChatGPT what the most suitable audience would be for my project. It gave me a variety of different audiences, and I picked the ones that I thought reflected the brand the most.


unshackled

Figure 9 - ChatGPT / Title of Image: ChatGPT and Target Audiences / Source: [(Online) ChatGPT, 2024]




unshackled

Figure 10 - Audiences / Title of Image: The Coffee Nook Target Audiences / Source: [(Online) Imogen Buttimore, 2024]



User Personas

These user personas helped me create a clear picture of the user's needs and expectations, and how they are likely going to use the brand and website. Making personas also gave me a deeper understanding of how our user's will respond to the brand and website navigation, and therefore helping me to create more user friendly designs.




Subscription Models

The next part of my project was to create a desirable subscription model. To achieve this, I opted for ChatGPT again due to its efficiency. ChatGPT helped guide me to create the prices and subsciption box options, and I then looked at current coffee subscriptions such as Pact Coffee and Rave Coffee to create my own prices based on prices I had seen online.


unshackled

Figure 12 - Subscriptions / Title of Image: Subscription Models/ Source: [(Online) ChatGPT, 2024]





Branding

Once I had established my target audience, it was time to create the branding. Initially I already had an idea of what I wanted the branding to be like with a cosy and calming aesthetic. The branding research that I undertook earlier in the project helped me to decide on which colours and typography I wanted to use within the brand. I first made a moodboard with a variety of inspiration that I could take ideas from throughout the branding design process. Within my moodboard, I selected a range of colours to choose from and then make my own colour palette out of these colors.

But before carrying on with the branding process, I needed a name for my project. I knew that I wanted a cute and cosy name so that it reflected the desired aesthetic and atmosphere for the upcoming branding. The name ideas that I came up with were, The Reading Bean, The Literary Mug, Coffee and Chapters, Coffee Corner, Literary Latte and The Coffee Nook. Out of these names my favourites were The Reading Bean and The Coffee Nook. To help me make a choice, I asked fellow peers and family to tell me what their favourite names were. The most common answer was The Coffee Nook as it felt cosy and fit the brand's ideology.


unshackled

Figure 14 - Branding Inspiration / Title of Image: Moodboard / Source: [(Online) Imogen Buttimore, 2024]

Colour Palette

I opted for a green and neutral palette to reflect the feelings of relaxation and calmness so that our customers have a serene place to relax as well as socialise. The shade's of green will create a calming ambiance with the cream and brown reflecting the colours of coffee and providing a timeless and versatile backdrop. The neutrals will also create a sense of warmth and cosiness, an important part of The Coffee Nook's branding.

These colours also recieved positive feedback from my peers, noting that the colours are cosy and reflect the colours of a cafe as well as the desired aesthetic.


unshackled

Figure 15 - Colours / Title of Image: Coffee Nook Colours / Source: [(Online) Imogen Buttimore, 2024]

Typography

For font choices, I already knew that I wanted to include a handwritten font from my branding research. This is because handwritten fonts seem more personal and reflect cosiness. From my research, I discovered the font 'Adabelle Handwriting' which caught my eye as it was the exact font that I was looking for. For the secondary font, I chose 'Quicksand' which is a san serif font. I chose to utilise this font because it is easy to read and contrasts well against the primary font. It was important to include a simple font because it will increase the level of usability throughout the branding and website.


unshackled

Figure 16 - Fonts / Title of Image: Coffee Nook Typography / Source: [(Online) Imogen Buttimore, 2024]

Logo Design

With the logo design, I already had somewhat of an idea in mind after I created my initial branding moodboard. My vision of the logo included a minimal design with just the brand name, or the brand name with a simple illustration. Below shows my intial sketches of what I had in mind. However, I found working with the sketches difficult as it was hard to visualise a high fidelity logo.


unshackled

Figure 17 - Logos / Title of Image: Logo Sketches / Source: [(Online) Imogen Buttimore, 2024]



After sketching, I designed a few options so that I could choose which one I preferred. I used the Adabelle Handwriting font because it reflects the overall aesthetic and looks inviting to our audience. I then added the handdrawn icons of the book and coffee cup as they also reflect the brand's purpose and ideology. For two of the designs, I added 2024 as when looking into logo ideas I noticed that it was a common choice to include the year that the brand was established in within coffee and book related logos. After some final thoughts, I decided to choose the top left logo because it was the overall favourite to me and was not too complicated of a design. This logo was also the most praised when introducing my peers to my project.


unshackled

Figure 18 - Logos / Title of Image: Final Logo Choices / Source: [(Online) Imogen Buttimore, 2024]

Final Logo Design

unshackled

Figure 19 - Logo / Title of Image: Final Logo / Source: [(Online) Imogen Buttimore, 2024]

Brand Guidelines

Figure 20, 20.1, 20.2, 20.3, 20.4, 20.5, 20.6 ,20.7, 20.8, 20.9, 30, 30.1 - Branding / Title of Image: Brand Guidelines / Source: [(Online) Imogen Buttimore, 2024]

Menu Design

Once I had established my branding, my next task was to design a menu for The Coffee Nook. This allowed me to practice my skills within graphic design and create my own menu. I did not bother to look into current cafe menus as I wanted to choose my drinks from scratch, as well as prices. However, I did look on websites such as Pinterest and Dribbble to find a range of menu inspiration, and to gain an understanding with layout and font sizes. To decide on prices, I based these prices off of cafe menus that I had seen in person in independent cafes such as Harvey & Honey, and chains such as Greggs. I wanted the prices to be inbetween the prices of an independent cafe and a chain, in order to cater for a bigger audience because having a menu that is too expensive will not attract customers.


unshackled

Figure 31 - Menus / Title of Image: Menu Inspiration / Source: [(Online) Pinterest, 2024]

Menu Sketch
Once I had gained inspiration, I drew a brief layout and design for an ideal menu. I opted for the menu to be split into coffee, non coffee drinks, tea and then a range of speciality drinks in order to cater for everyones taste. I wanted the design to follow the same direction as the website and logo, so I kept the design fairly basic and minimal and following the branding style throughout.


unshackled

Figure 32 - Menu Idea / Title of Image: Menu Sketches / Source: [(Online) Imogen Buttimore, 2024]

Final Menu Design
For the menu, I chose the brand's cream colour for the base to make the text as visual as possible. I then added handwritten icons behind the text to make the design not look as bland. These icons also match the overall branding and logo. To make the menu stand out more, I added a range of speciality drinks so that customers had a large range to choose from instead of the standard cafe menu of tea and coffee.


unshackled

Figure 33 - Menu / Title of Image: Menu Design / Source: [(Online) Imogen Buttimore, 2024]


Packaging Design

For the subscription box designs, I did not undertake much research for this part of the project as I already had some initial design ideas. I knew that I wanted the boxes two be two different colours in order to differentiate the boxes from each other. For this, I chose the light green and cream colour. I also thought that it would be important to make sure that our packaging was sustainably made, with recyclable cardboard as the primary material. The boxes can then also be reused as storage or as a keepsake box.


unshackled

Figure 34 - Boxes / Title of Image: Packaging Sketches / Source: [(Online) Imogen Buttimore, 2024]

Packaging Labels
Below show my designs for the two boxes. I opted for a clean and minimal look with just the logo and box name to follow the overall direction of branding for The Coffee Nook. As mentioned before, I chose to use the cream and light green colour to give a light and airy feel to the packaging. I thought that the other two branding colours of dark brown and green would be too heavy and dark for the box colours.


Figure 35.1, 35.2 - Packaging Labels / Title of Image: Label Design / Source: [(Online) Imogen Buttimore, 2024]


Packaging Mockups
Take a closer look at what the subscription boxes will look like below. Here, I used a software called PackHelp and I imported my label designs onto specific sized boxes. Please see Appendix B to view more box mockups. These mockups will show you what the boxes may look like on the inside.

Figure 36 - Cappuccino Book Box / Title of Image: Box Mockup One / Source: [(Online) PackHelp, 2024]

Figure 37 - Latte Box / Title of Image: Box Mockup Two / Source: [(Online) PackHelp, 2024]

Website Design

My final task was to design a user friendly and sustainable web design for the brand. I implemented my intital user experience research by choosing a simple navigation bar with the main pages, such as, home, subscriptions and menu. I also followed Jacob's Law by implementing white space throughout, and simple dropdown menu components for the subscription choice options.

As I am only creating the design and prototype for this website, it was more difficult to include sustainable web design. However, I was able to create this website sustainably by following a minimal design that avoids excessive use of high resolution images and no use of animations to improve the loading time as well as reducing the energy to render pages. The efficient navigation also reflects sustainable web design because users will be able to find what they are lookign for quickly. This reduces the number of server requests and overall energy consumption.


Low-Fidelity Wireframes
My first step was to complete a set of low-fidelity wireframes so that I can gain an idea for layout and navigation. This step allowed for quick ideation and feedback from peers. As they are not highly detailed, I was able to modify them throughout the design process if necessary. One feature that I decided to change after this, was to only offer two subscription boxes instead of three, as I thought the two options that I had come up with were the best options that should be available for customers. If I were to do this project again, I would consider creating a third box which could include merchandise or other accessories for a higher price.


unshackled

Figure 38 - Wireframes / Title of Image: Low-Fi Wireframes / Source: [(Online) Imogen Buttimore, 2024]

Final Design (before user testing)
Below shows my working prototype and design for The Coffee Nook's first website. This was my first design before I finalised the design after undertaking user testing. Please view the Figma file here to see my annotated designs.

Figure 39 - Design One / Title of Image: Coffee Nook Website One / Source: [(Online) Imogen Buttimore, 2024]

User Testing
Before I completed my final design, I thought that it was best to undertake user testing to identify any potential problems and implement any recommended changes suggested by my user tester. I gave my user access to the Figma file shown above, and gave them a set of three questions to answer and leave feedback for me to read through. Below shows my user tester's initial feedback, and their answers to my testing questions.

This user testing allowed me to identify a range of changes that could be made and also demonstrated the most liked features of my designs.

Figure 40.1, 40.2 - User Testing / Title of Image: Website User Testing / Source: [(Online) Imogen Buttimore, 2024]

Final Design
This is my final design and working prototype for the website. Please view the Figma file here to see my final annotated designs. In this file, I have only added the annotations to what I changed after completing user testing. Feel free to view the mobile version file here. I decided to go with this new design featuring a few of the changes suggested by my tester to ensure a more positive user experience from my customers, instead of sticking to my initial website design. I also agreed with all of the feedback given, but did not make every single change that was suggested due to time limits.

Figure 42 - Final Design / Title of Image: The Coffee Nook Website / Source: [(Online) Imogen Buttimore, 2024]

Project Reflection & Anaylsis

Sustainable Development Goal 10
Within my final project, I needed to try and implement sustainable development goal 10.

unshackled

Figure 43 - SDG 10 / Title of Image: Sustainable Development Goal 10 / Source: [(Online) Imogen Buttimore, 2024]

Time Management
To ensure that I stayed on track with completing the project on time, I created a Gantt chart with what I considered key goals to achieve and estimated time against each one. Each activity is represented by a bar and the position and length of the bar determines the start date, duration and end date (Duke, 2019). Thankfully, I was able to achieve each goal set within my chart due to setting aside enough time for each desired goal. On top of this, I also made lists in my physicl planner, as well as an overall checklist on my Notion page. I kept a checklist of each task that needed to be completed throughout the whole semester so that I know what needs to be done. Within this project, I set aside enough time to pursue substantial user testing and time to make my final changes instead of not recieveing any testing or feedback at all, which is a mistake that I have done in previous projects before. Lastly, I was lucky enough to not run into any issues or contingenices throughout this project, allowing for a smooth process during the semester.

unshackled

Figure 44 - Time Management / Title of Image: Gantt Chart / Source: [(Online) Imogen Buttimore, 2024]



Overall, I thoroughly enjoyed this project, with it being one of my favourites throughout my time at university. It allowed me to dive deeper into the areas of branding, graphic design, website and packaging design. As I usually focus on mobile interface, it was a positive change to experience designing for web interface instead. It was also my first time prototyping a website which I enjoyed immensely and gave me a new level of prototyping skills in Figma. I was lucky enough to not run into any setbacks and was able to complete my project to a high standard, gaining more experience in digital design. I also showed my peers and lecturers my progress every couple weeks to see if they had any feedback I could add throughout the semester.

If I were to do this project again, I would try to improve my packaging design skills, for instance, being able to create a mockup of my subscription boxes with the items inside.

unshackled

Figure 45 - Mobile Version / Title of Image: Mobile Website / Source: [(Online) Imogen Buttimore, 2024]

References / Bibliography / Appendices / Blog / NLT 2 Form / Live CV / Marketing Plan