El Tico’s Café
Branding | UI/UX Design
El Tico’s Café is a local coffee shop with a Costa Rican flair. Before opening their first location, they were seeking help both in branding and website design. I had the task of creating a full design package for their site launch that would embody the cafe’s Costa Rican roots and showcase their, “made with care” coffee to customers.
The Challenge
The biggest challenge I faced during this project was creating a website for El Tico’s Café that scaled seamlessly from desktop to mobile. With the convenience of smartphones, I wanted to make sure that the mobile experience was just as smooth and successful as the desktop experience.
Inspiration
Inspiration was taken from the tropical climate of Costa Rica. Geographically diverse and full of adventure, this country has it all. Mountains, volcanos, forests, and bright blue waters to name a few of Costa Rica’s best features that helped to inspire the creative direction for this local coffee shop.
Design Choices
El Tico’s Café’s logo is simple and organic. A clean but rugged typeface that appears to have come straight from nature itself.
Bright and tropical colors have derived from the beautiful land of Costa Rica. Brown hues to speak to the warm, rich colors of coffee contrasted with bright blues and greens of the vibrant water.
Graphic elements give life to the luscious plant life and growth of coffee beans in the rich Costa Rican soil.
User Persona
A user persona was created to personify the ideal user of the cafe’s website to get a better understanding of who they are. This user persona was referenced to influence later design decisions.
Site Map
A site map was created before moving onto the UX/UI design phase to have a clear understanding of all pages needed. The site map helped to visualize how the website would flow from page to page.
Wireframes
After mapping out the pages of the site, the wireframing process began. By using simplified, grayscale shapes, I was able to establish a sense of hierarchy and create layouts that would work for the content that was needed on each page.
Interface Design
The final step was to bring the website to life by adding in content and making thoughtful design choices based on the previous steps in the design process. Buttons are kept a consistent size and color for usability reasons, and large blocks of color and imagery is used to break up sections.
Branded Applications
Seeing the brand applied to different applications really helps bring the brand to life. While applying the brand to different applications, the goal was to keep the look and feel consistent so that it was obvious that all applications embodied the El Tico’s Café brand.
