WebsiteCuratedPics-23.png
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.
BellezaRicaLogoVariations-11.png
BellezaRicaSign.jpg
Menu.jpg
WEBSITE DESIGN
LaptopMockup.jpg

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.

PhoneMockupProcess.jpg
PhoneMockupMenu.jpg
PhoneMockupMenu.jpg

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.

LightRoast.jpg
darkroast.jpg
coffeebeans.jpg
COLLATERAL
BellezaRicaShirtj.jpg
apron.jpg
longsleeve.jpg
THE PROCESS
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.
StyleGuide.jpg
StyleGuide3.jpg
StyleGuide2.jpg
Screen Shot 2020-09-05 at 6.03.54 PM.png
Screen Shot 2020-09-05 at 6.00.58 PM.png
MoodBoard.jpg