BACK

Cafe Bassam

Visit the Website!



This was my final project for my COGS187b Pro Web Design class. The purpose of this project was to find a client in the San Diego area and create a professional website for them. With a team of four other members we decided to create a website that focused on mobile design for our client Cafe Bassam located in Bankers Hill, San Diego. Together we met with the client to understand his wants and needs for his ideal website. We did user interviews to get user needs on cafes, created story boards for different personas, ran multiple levels of competitive analysis between competeing cafes, created low and high resolution wireframes and prototypes, and implementing our design into a tangible product for our client.



Half the team and I went on to do in person user interviews. We went to our 5 competing cafes to find users to interview. Our target audience were locals in the area, potential students nearby, and Coffee/Tea lovers. Our questions focused on the enviornment of the cafes, the quality of the drinks, and why they decided on the specific cafe.



We conducted our competitive analysis on Bird Rock Coffee Roasters, James Coffee Co, Communal Coffee, Dark Horse Coffee Roasters, and Holsem Coffee. We compared their different branding, site architecture, functionality, design, navigation, and content of each one to see what we can improve in each aspect. We also wanted to see what great designs we can take away from it and what are some problems we disliked about it.





We created a Creative Brief as part of this assignment to propose to our client for how the website will look. The document would have a nice outline of what the potential finished product would look like. The websites content, number of pages, certain features for design, and a low resolution sketch of the mobile version of the website.



After having everything planned out and decided we finally began creating high resolution wireframes and prototypes using Invision to implement it.



I was in charge of the menu page. Using html and css I coded a responsive menu page. It was really hard using tables in html especially when trying to organize all the different types of items on the menu page. The many different kinds of tea's they had gave me a difficult time trying to sort them and arrange things in a way users can easily see.



First time working on a large design project and I have to say it was a lot of fun working with my team and I learned a lot. It isn't easy comapring 5 different peoples design ideas and then finally agreeig on a certain one, but in the end we got it done and it was a great experience for me.