Café Juliet

Why does Café Juliet need a website?

Café Juliet was open for a few months and started gaining more customers, so they would like to build a website that revolves around their existing brand while addressing their customers’ needs.

How did we want to address this?

Create a responsive website that allows customers to easily access Café Juliet’s menu and learn more about the café’s atmosphere.

What did I do to improve the café’s digital presence?

• designed and coded a fully responsive website using HTML and CSS, ensuring accessibility across digital platforms
• implemented text-based menu listings to improve readability; compared to scanned menus commonly found on competitor sites
• analyzed research insights to create user personas and moodboards and guide the digital interface and design decisions

Measurable outcomes & improvements

• created ~7 responsive screens and an improved brand design to align with the café’s atmosphere, maintain consistency, and improve readability
  
• conducted 2 surveys with ~50 participants and competitor analysis to identify 5 key usability issues to improve with this site
  
• made the café’s menu directly accessible in 1 click to customers compared to several searching through images and other sites
  

Understanding the café’s users & competitors

Before designing the website, I conducted a competitive analysis on different café websites on Staten Island to understand common patterns and usability issues.

Here is some key information I found after researching some competitor websites:

• establish a responsive layout to make sure users can access the site from different digital devices
• maintain clear, consistent branding to strengthen the brand identity and user trust
• avoid hard-to-read menu formats, like images

Additionally, here’s some insight I gained after conducting surveys with overall coffee shop customers:

• customers value a calm and cozy in-store atmosphere, I can reflect this feeling onto the website
• accessibility across devices is crucial to appeal to all audiences through all platforms
• strengthening the café’s online presence will help attract new customers

My ideation & design process

I guided my design decisions based on the analytics from user surveys and competitive analysis. With this information, I created several deliverables prior to the main site:

• mid-fidelity wireframes
• moodboard, updated style guide, and a refined logo
• clear information architecture map
• created 2 personas representing an existing Café Juliet customer and a potential new visitor

Transforming Café Juliet’s online presence

I translated the wireframes and other deliverables into high-fidelity designs that involve everything: the updated branding, text-based menu, and product images to reflect the café’s calm and welcoming atmosphere.