Mind Coffee
Project Overview
This Berkeley business needed a new website design, so my student organization, UX @ Berkeley, reached out to help.
My Contributions
I joined a team of some of UX @ Berkeley's members to create a lo-fi prototype. We are still awaiting feedback to move forward to hi-fi.
A New Cafe at Berkeley
Mind cafe is a business that prioritizes community events and mental health by providing a lovely space close to campus which offers delicious drinks. They opened just this year, and made a website that we thought needed some design help.
What needs fixing?
The first step we took was to identify the weak points in their current design. Most notably, the font color, size and arrangement did not convey the most important information about the cafe. Here is an example:
Inspiration and Ideas
After looking at examples of coffee shop websites to get an idea of the industry standard, we brainstormed ways to personalize the experience to fit Mind Coffee's mission to the Berkeley community. Some of the questions we asked were:
What info should be in a coffee shop homepage?
What would be the first thing that customers want to see?
Lo-Fi
After meeting with the team, we created this lo-fi design. This was our reasoning:
Homepage:
Before, the homepage was trying to communicate too much using a wall of text. Now, we tried to mention the key things about their drinks, mission statement, location and service hours all in one place. We tried our best to fit the aesthetic of the business by avoiding blocky elements and instead focusing on dynamic and fluid elements. This was done with waves, cloud text boxes and a lot of spacing. The graphic below shows how the many elements of the company lead to a delicious drink, which was a decision we took after seeing not enough focus on the product itself on the original website.
Mission/About:
Continuing with the dynamic design, this page would be the only one with a lot of text, and either an image background or a fluid graphic in the back to balance it.
Contact Us
The circle icon in the upper right leads to this page. This form format is the same method as Mind's original page, but we included rounded edges, less typing (by using the category selection button) and a circular image. We figured that the contact form needed its own space on the navbar because many different people would be interested in contacting them regarding their community events.
Resources
Likewise, this page took a large amount of text and organized it into categories to make it easier for each person to find the resources they want (the quick user personas gave us this idea). The title of the page would be in-front of a transparent image banner at the top, which might be either fixed in its position or dynamic as you scroll into the drop-down menus.
Competitions
After a lot of discussion, we decided to make competitions its own category. This was because someone who sees that this coffee place has competitions may think it may take too long to join if they try to find more information on the resources tab. Thus, to make joining look as easy as possible, we designed this 'path' of images and information to follow.
This is one of my favorite frames, because it combines the brewing of coffee with the information on competitions. The button below is a 'back to top', which we included in the pages where you have to scroll a lot.
What comes next?
The above design has been sent to Mind Coffee, who have said that they will reply with feedback, so all my team can do now is wait in excitement!
