THE CHALLENGE

Create a site design brand for a Costa Rican inspired coffee shop based in San Diego.

THE OUTCOME

THE OUTCOME

belleza rica roastery

BRANDING, UI/UX DESIGN

A fully designed UX/UI desktop and mobile website with external branded assets inspired by Costa Rican culture and tradition.

NOTABLE ATTRIBUTES

The name Belleza Rica means rich beauty which is inspired by the country’s deep traditions and beautiful flora and fauna.

DESKTOP

The desktop website is focused on the user experience of immersing into the world of Belleza Rica. Vibrant full-bleed photography paired with playful and colorful typography lockups keep the sophistication, while tying in the vivid beauty of Costa Rica. The site utilizes a balance of heavy imagery with clean white space to ensure a professional look.

​

MOBILE

The mobile website is adapted from the desktop. The heading typography is not stacked, but instead is set linear to avoid any awkward white space. This choice also ensures that the headers do not distract from the copy content. Additionally the menu bar is changed to a hamburger menu for easier usability in navigation.

After receiving the project brief I first started to develop a moodboard to grab inspiration for this brand’s Costa Rican roots. I gravitated towards the natural flora and fauna of costa rica as well as traditional motifs associated with the culture in Costa Rica. I next brainstormed name ideas through word association. Based off of the brief I chose to conceptualize off of the feelings and visuals associated with coffee, local, care, and Costa Rica. I reached my idea of naming the coffee shop Belleza Rica Roastery was to determine the audience I wanted this coffee shop to target. I developed a persona to help me identify what direction to focus on, which led me to creating a site map for the website. Understanding the persona's values and motivations helped to figure out what type of pages would be important to this audience. Once I solidified the site map, I began to write the copy for the site and decided on how best to break up content. Following writing the copy I sketched and digitized wireframing for both my desktop and mobile site. This allowed me to create the bones of the layout and ensure it was user friendly in UX before beginning the UI design. After prototyping and testing out my wireframes I established branding guidelines and ideated logo marks and logo type. Additionally I played around with creating some patterns for the brand that could be used beyond the website branding. The final step was combining the brand identity with the layout and prototyping of the wireframes.