The shop is situated in the historical center, though not right in the heart of it, so people need to know about it to find it. This poses a real problem when trying to attract tourists, especially if there is no website. Without an online presence, the business misses out on better search visibility, increased professional credibility, and valuable marketing opportunities.

The first course of action was understanding the users. After spending some days inside the coffeeshop, talking to customers from all backgrounds (*drinking too many decaf lates*), I could easily sketch the personas in my mind. Google analytics provided extra info.

I began by developing the brand identity for this small family business. I knew it needed to have a cool, hip, and fresh look to match with te coffeeshop's image. To get a sense of the tone and voice for the website, I studied their social media posts.

Based on my findings and on the client's wishes, I went on to define the site's architecture. It would contain 6 pages: Home, Menu, Our story, Coffee, Partners and Contact.

After endless iterations, I decided that the homepage needs to be iconic. A drawing made for the owner by a local artist would frame the logo, followed by the shop's address in Brasov and social media icons. The message is clear: we're a (hip) specialty coffeeshop, come find us HERE.

This project was mobile first, so I designed the hamburger menu with a full screen modal, as opposed to the navigation bar on the desktop version.

Romanian or English? There was a long debate about the language the website should display. The analytics clearly showed a preference for English. I advocated for the possibility to switch between languages. Eventually, to keep things simple, the client decided to do it all in English.

Online shopping or no online shopping? The coffee shop also sells their coffee in bags, to be prepared at home, as well as other goodies. Setting up an online store was a nice idea, but due to budget and speed considerations, we decided to leave it for later and proceed without it.

Should the customers be able to order online from the menu? The client did not want to complicate things, so we went with a QR code referring to the menu page.

Starting in June 2025, European law will require all digital products to comply with digital accessibility standards. This means I needed to be thorough in its implementation: ensuring a text contrast of 4.5:1, adding alt-text to all images, using large enough fonts on mobile, providing clear navigation, properly tagging all elements, and making sure interactive elements are easily recognizable without relying solely on color.

While horizontal scrolling isn't the most accessible option, it's a natural gesture on mobile devices and helps save vertical space. So, I've decided to use it sparingly and clearly indicate its presence by slightly cutting off the content.

To add to the overall look and feel, I also played around with the links' underline style, creating scribbled lines to enhance the informal vibe.

This project was a lot of fun to work on, especially since I've known the owner and their business for so long. One key lesson I learned from this experience is that no matter how small the project, you have to go through the discovery, define, prepare, ideate, and execute phases (and repeat as necessary) to ensure the best UX possible.

After testing, I made some iterations on the design - designing the interaction of the landing page, turning the address displayed as text on the home page into a Google maps link. After that, I was ready to build it myself in Webflow. The website is currently under development. More iterations will follow once it goes live.

Stay tuned for its launch!