University RSA Submission

Brunch & Brew

Client

Ulster University

Category

Web & UX Design, Branding, Ideation & Problem Solving

Project Date

November 2019

How might we reimagine common spaces to build diverse communities through food?

This was the brief for the RSA Student Awards, the challenge was to create and develop a solution that helps bring people together using food as a catalyst. We worked on this project in Semester 1 of final year as a two-week sprint. In class we were split into groups of four to brainstorm the key areas we could base our project on. Some of these included:

  • Care homes
  • Student halls
  • Care Homes
  • Festivals
  • Town Squares
  • Co-Kitches
  • Food Trucks

Brunch & Brew

Bringing People Together

Brunch & Brew is a volunteering organisation which will work with young people aged 16 - 19. We will offer to pair them off with an elderly person in the care home, so every volunteer has a partner. They’ll host afternoon tea and get to know one another over sandwiches and a cuppa. This makes the idea intergenerational as it’s letting people from two very different age groups interact and converse with one another, when they may not have otherwise. It’s also enabling them to further develop social skills and use their time for positive impact within the community. It definitely has a community impact, and it’s meeting the RSA brief requirements as it’s bringing people together over food and tea.


Ideation

I started the brief by carrying out the How Might We (HMW) statement in order to begin with my Point of View & problem statement to generate some ideas. Through beginning with this step, the HMW statement opens up ideas that can help me solve the design challenge.


Initial Logo Sketches

I started sketching some very rough ideas of what I’d want my logo to look like for the RSA brief. The common theme was having a cup of tea icon illustrated within the name. I also tried to experiment with using teapots and the idea of two hands holding a cup of tea to show the idea of two people sharing a cuppa together. I’ll develop these ideas further using both Procreate to design the illustration and Adobe Illustrator for the font and to be the logo together.



Experimenting with Typography & Icons

Brunch & Brew is my chosen brand name; I think it works really well as it’s clear that it’s about lunch and tea which is the entire idea behind my project. After researching some signage for afternoon tea, they tend to be a lot more sophisticated in their lettering style. I decided against this as I need my logo to be clear and legible on my website. I also experimented with different icons to represent my logo.


Further Logo Development

Further development of my logo for Brunch & Brew, I’m still experimenting with different fonts and icons to represent my branding. I’m not sure whether the tea label really works. So, I’ll refine my logo further by just focusing on the text alongside the teacup icon. I think the icon I’m going to use alongside the logo is a tea icon as its what reflects afternoon tea in the quickest format.


Final Logo Development

This is my last process for my logo development for Brunch and Brew. I've used the colour palette I selected from a photo of afternoon tea. I’ve also used the icon for the teacup and teapot and tried to expand it further, through creating it as an outline icon and adding finer details. The selected font I’ve used is a sans-serif font - Luca Regular.


Final Logo for Brunch & Brew

This is my final logo for Brunch & Brew and I'm quite pleased with the final outcome.


Wireframes

Creating this low fidelity wireframe helped me get a better understanding of how to structure the website content. I want to ideally create a very minimal website but with enough icons, imagery and content to ensure it gives users all the information they need at an instant glance. I want it to be laid out very clearly so that each section of the website is easily discoverable and that there are no issues trying to find one particular section.


Wireframes

After drawing loads of sketches of very rough wireframes of my website layout in my A3 sketchbook, I decided it was time to start creating some low fidelity wireframes using Adobe XD. I wanted to get a clearer understanding of how I should lay out all of the content I planned to have on the website, as I wanted to ensure that it didn’t appear too busy or cluttered looking to users.


Low Fidelity User Flow

A flow of how users would navigate through my Brunch & Brew website. There are only 7 sections within my website, so only a few actions can be taken with these. It starts with the user seeing the landing page which welcomes them. This then redirects users to section 2 - Our vision. Through there, users can scroll through the website easily and also navigate through the separate sections through the use of the navigation bar on the top right-hand side.











The Final Outcome