A complete brand identity and app experience for a neighborhood coffee roaster, built from logo to full website.
FullBrand system
5Screens delivered
App ยท WebSurfaces
3Design tools
The Challenge
Big Bear Coffee needed a complete visual identity and a digital product that felt like one brand, not a logo bolted onto a generic app template. The task was to build a cohesive system from the ground up: a distinctive logo, a warm and inviting palette, and app screens that translated the feel of a real neighborhood coffee shop into something people would enjoy using on a phone.
The work also had to stretch across surfaces without falling apart. The same identity had to read clearly as a compact app icon, carry a focused mobile experience through login and the main screen, and scale up to a full website, all while staying unmistakably Big Bear Coffee. Holding that consistency across mediums, tools, and formats was the central design problem.
Approach
Anchor the brand in place and characterBefore touching a screen, I defined what Big Bear Coffee stands for: a warm, grounded neighborhood roaster with an outdoorsy, mountain-town spirit. That positioning became the filter every color, mark, and layout decision passed through, so the identity felt intentional rather than decorative.
Build the logo in Illustrator as the system's cornerstoneI designed the Big Bear Coffee logo in Adobe Illustrator as a clean vector mark, engineered to hold up from a tiny app icon to a full-width website header. Working in vector kept it crisp at every scale and gave the rest of the brand a single, unambiguous visual anchor.
Design the core app flow in FigmaI laid out the primary app experience in Figma, starting with the Login Screen and Main Screen. Component-based design kept spacing, type, and buttons consistent across screens and made the whole flow easy to iterate and hand off cleanly.
Enrich the visuals in PhotoshopI used Photoshop to refine imagery, texture, and product photography treatment so the app screens carried the same warmth as a real cafe. Figma held the structure; Photoshop gave the surfaces depth and a tactile, appetizing feel.
Extend the identity to the full websiteI carried the same logo, palette, and type system into a full website layout, proving the brand worked beyond the phone. One coherent language now spans app and web, so customers meet the same Big Bear Coffee wherever they land.
Key Features
Vector logo mark
A custom Big Bear Coffee logo built in Adobe Illustrator, designed as a clean vector so it stays sharp from app icon to website header.
Login screen
A focused, welcoming entry point that sets the brand tone the moment a customer opens the app.
Main screen
The core browsing experience, laid out in Figma with clear hierarchy so ordering feels effortless and on-brand.
Cohesive brand system
A unified palette, type treatment, and logo usage that hold together across every screen and surface.
Photoshop imagery
Product and background imagery refined in Photoshop to give the screens warmth, texture, and appetite appeal.
Full website layout
The identity extended into a complete website, proving the brand scales cleanly from mobile to desktop.
A logo is only as strong as the system around it. I design the mark and the screens as one language, so the brand feels the same whether it is an app icon or a full website.
Chris Cooper, design rationale
Results
Delivered a complete Big Bear Coffee brand identity, from custom logo to applied app and web screens.
Produced a scalable vector logo in Adobe Illustrator that holds up from app icon to full-width website header.
Designed a focused mobile flow covering the login and main screens with consistent, on-brand components.
Extended the identity into a full website layout, giving the brand one coherent language across app and web.
Strategy
Position Big Bear Coffee as a warm, grounded neighborhood roaster with a mountain-town character
Define one visual language to span app and website
Treat the logo as the cornerstone that anchors every other decision
Design
Custom vector logo designed in Adobe Illustrator
Login and main app screens laid out in Figma with reusable components
Imagery and texture refined in Photoshop for warmth and depth
Full website layout extending the identity to desktop
Consistent palette and type applied across all surfaces
Tools
Adobe Illustrator for the logo and vector marks
Figma for app screen layout and components
Photoshop for imagery, texture, and photographic treatment
