Habana Sandwich

Brief

Select a restaurant, bar, or café in the Los Angeles area to take on as a “client” for a website redesign. Imagine that the owners of this business have hired you to redesign their website

Requirements

Use HTML, CSS, and Javascript. Code the website from scratch.

Timeframe

1 month

Project Type

Web Design,
Web Development

Tools

HTML, CSS, JavaScript, Adobe XD

Client

Habana Sandwich Company (fictional)

Process

Stakeholder Interview

To start the design process, I met with the owner of Havana Sandwich for an interview to understand the business as well as the goals of its current website. I explained that I am creating a website about Havana Sandwich for my class project.

Audience Specific Goals

Customers Feeling

Let customers know: I hope you enjoyed the food and your experience!

Customers Action

See menu, order food.

Site Maps

The site map shows the list of pages I would like to include in the Habana Sandwich website.

Wireframes

Wireframes of the site helps me think about the layout of all the information on each page.

Branding

I based the branding on the insights I gathered from my interview with the owner of Havana Sandwich Company.

Insights about the Brand and the Business

Competitors

Other coffee shops and breakfast restaurants.

Typical Customers

Regulars, workers as weekday lunch diners. Families as weekend diners.

Differentiators

The prices, the service, consistent opening times, fast service. Offers something unique: cuban style sandwiches and side items.

Brand associations

56’ chevvy, classic styles, tropical atmosphere,
Gloria Delgado-Pritchett from Modern Family, “Chico” (a word used a lot in Cuban market where you feel at home), fun, casual, family.

Based on these insights, I created two versions of branding style tiles, and combined the best part of each for the final version of the branding.

Design Comp Version 1

I created multiple versions of design comps, here is an initial version.

Design Comp Version 2

Development

In this project, I created a restaurant for a real local business, Havana Sandwich Company. However, because it is only a class project, the submission requirement is that the name of the business needs to be slightly modified. I renamed it Habana Sandwich Company in the final website.

I developed the website using HTML, CSS, and some JavaScript. You can see it live here:

See Live Website

Reflection

What worked?

I was able to practice my skills in HTML, CSS, and JavaScript. It was a really fun project to make.

What I would do differently next time?

I would love to practice my skills in developing websites. There were certain effects that I had to abandon because I could not implement them effectively. I would like to figure out new ways of creating more interesting effects on my websites.