top of page
mockuuups-ogWsfuyCYAa2kj4PipSHAL (1).png

Silhouette Coffee
Website/ Branding/ Package Design/ SEO/ Marketing

silhouette (5).png
Untitled_design__8_-removebg-preview.png
Your paragraph text (8).png
Problem/Solution

Problem

  • Brand Identity: The website needed to reflect the brand’s artistic and creative ethos, which wasn’t clearly conveyed in their existing online presence.

  • User Experience: The site lacked intuitive navigation, making it difficult for customers to explore products and learn about the brand’s story.

  • Visual Appeal: The existing design was outdated and failed to highlight the artistic elements of the brand, such as custom coffee packaging and collaborations with artists.

  • Mobile Responsiveness: The website wasn’t optimized for mobile devices, leading to a poor user experience for a significant portion of potential customers.

  • E-Commerce Functionality: The online store was difficult to navigate, and the checkout process was cumbersome, resulting in abandoned carts.

Improvements

  • Increased Sales: A 30% boost in online sales within the first three months.

  • Improved Engagement: A 50% increase in time spent on the site, indicating higher user interest and interaction.

  • Positive Feedback: Customers and stakeholders praised the website for its artistic design and ease of use.

  • Stronger Brand Identity: The website now effectively communicates Silhouette Coffee’s unique blend of art and coffee, setting it apart from competitors.

Role

Owner, Designer, Researcher

​

Solution

  • Art-Inspired Design:

    • Created a visually cohesive design that integrates artistic elements, such as custom illustrations and photography, to reflect the brand’s unique identity.

    • Used a color palette and typography inspired by coffee and art to create an immersive experience.

  • Intuitive Navigation:

    • Designed a clear and streamlined menu structure, making it easy for users to explore products, learn about the brand’s story, and access the online store.

    • Added a “Featured Collections” section to highlight limited-edition coffee blends and artist collaborations.

  • Mobile-First Design:

    • Developed a fully responsive website that provides a seamless experience across all devices, ensuring accessibility for mobile users.

  • Enhanced E-Commerce Experience:

    • Simplified the online store layout with clear product categories, high-quality images, and detailed descriptions.

    • Streamlined the checkout process with a one-page checkout and multiple payment options to reduce cart abandonment.

  • Storytelling Elements:

    • Added a dedicated “Our Story” page to showcase the brand’s journey, artistic collaborations, and commitment to quality.

    • Included customer testimonials and behind-the-scenes content to build trust and engagement.

  • Interactive Features:

    • Incorporated interactive elements, such as hover effects on product images and a dynamic “Coffee Quiz” to help customers find their perfect blend.

Scope

Completed in 2 weeks

Design Thinking Process

We use design thinking to create user-centered, innovative solutions by deeply understanding users, defining problems, and generating creative ideas to meet their needs effectively. This ensures our designs bring meaningful value to user experiences.

Emphatize

User Research

User Interview

Entrant Analysis

Define

User Persona

User Journey Map

Goal Statement

Empathy Map

Ideate

Brainstorming

Card Sorting

User Flow

Design

Paper Wireframes

Visual Design

Prototype

Test

Check Usability

Survey Insight

Improvements

High Fidelity Prototype

2023, 17_39_14 GMT-4.png
2023, 17_45_26 GMT-4.png
2023, 17_47_17 GMT-4.png
2023, 17_46_13 GMT-4.png
Untitled_design__2_-removebg-preview.png
Untitled_design__12_-removebg-preview.png
Untitled_design__8_-removebg-preview.png
Your paragraph text (8).png

Products design by mcan

Untitled_design__8_-removebg-preview.png
Your paragraph text (13).png

Ads

www.silhouette-coffee.com (1).png
Less is more, more is Silhouette-2.png

Atomic Design System

Atomic Design System methodology is used in this project

1_fOVQj8dgr1Oobj3Uta24JQ (1).png
Atoms
Molecules
Organisms
Templates
Pages
bottom of page