Web Design

Specialty Cafe Webstore

A conceptual eCommerce site for Oro, a specialty café and roastery, designed to reflect the in-store experience through a clean, mobile-friendly storefront. Strong visuals, minimal UI, and consistent design language create a conversion-focused interface that’s approachable, adaptable, and aligned with the café’s identity.

Role

Solo Designer

Web Design

Specialty Cafe Webstore

Macroshift Keycaps

macroshift.com.au/keycaps

Macroshift Keycaps

macroshift.com.au/keycaps

Macroshift Keycaps

macroshift.com.au/keycaps

Clear CTA and primary shopping category displayed first

Top categories highlighted with professional imagery

Trust building via candid staff imagery and down-to-earth brand language

Offering value with free tutorial resources

Clear CTA and primary shopping category displayed first

Top categories highlighted with professional imagery

Trust building via candid staff imagery and down-to-earth brand language

Clear CTA and primary shopping category displayed first

Top categories highlighted with professional imagery

Trust building via candid staff imagery and down-to-earth brand language

Clear CTA and primary shopping category displayed first

Top categories highlighted with professional imagery

Trust building via candid staff imagery and down-to-earth brand language

Clear CTA and primary shopping category displayed first

Top categories highlighted with professional imagery

Trust building via candid staff imagery and down-to-earth brand language

Offering value with free tutorial resources

Design Rationale

Design Rationale

Design Rationale

Design Rationale

Creating consistent imagery

Images taken from different sources are colour graded, cropped and given a new background where appropriate.

Visual harmony is achieved through matching colour temperature and similar framing.


Images taken from different sources are colour graded, cropped and given a new background where appropriate. Visual harmony is achieved through matching colour temperature and similar framing.

Images taken from different sources are colour graded, cropped and given a new background where appropriate.

Visual harmony is achieved through matching colour temperature and similar framing.

Image Disclaimer

Image Disclaimer

Image Disclaimer

Image Disclaimer

Modular Card Displays

All cards are created with set padding, typography, image constraints, and also stack naturally depending on current screen size.
This ensures ease of use for a business later down the line when making changes to their webstore.

All cards are created with set padding, typography, image constraints, and also stack naturally depending on current screen size. The modular cards lead to a much simpler process when updating images site wide.

All cards are created with set padding, typography, image constraints, and also stack naturally depending on current screen size.
The modular cards lead to a much simpler process when updating images site wide.

Creating Movement with Micro Animations

Subtle scroll anchor animations implemented for fluidity without impacting overall readability or UI interactions.

Additionally, looping videos are used tactfully for pulling attention to key sections.

Ecommerce Insights

Brand identity panel uses conversational copywriting and lifestyle imagery to connect the online presence with the real world brand. Soft CTAs lead customers to trust building content, encouraging further interaction with the brand.

Brewing guides give customers immediate value and increases webstore traffic through SEO techniques. The blog achieves similar outcomes, as well as being a funnel from other brand platforms such as social media

Ecommerce Insights

Brand identity panel uses conversational copywriting and lifestyle imagery to connect the online presence with the real world brand. Soft CTAs lead customers to trust building content, encouraging further interaction with the brand.

Brewing guides give customers immediate value and increases webstore traffic through SEO techniques. The blog achieves similar outcomes, as well as being a funnel from other brand platforms such as social media

Breakpoints

Breakpoints

Breakpoints

Breakpoints

Reflections & Insights

Reflections & Insights

Reflections & Insights

Insights

Balancing Brand, Conversion & Personality

Creating a clean, conversion-focused layout while maintaining brand warmth was a key challenge. Subtle copy choices, real-world imagery, and strategic placement of personable content reinforces authenticity without disrupting commercial intent.

Imagery as a Unifying Force

High-quality photos were central to the brand experience. Through consistent colour grading and lighting tweaks, I was able to unify mixed-source images into a cohesive visual system that elevated the site's polish and professionalism.

Adapting Components Across Viewports

Designing card components with image fills required careful attention to padding, focal points, and text hierarchy. I implemented multiple layout states to maintain visual clarity and functionality across screen sizes without sacrificing design integrity.

Available for work, send me an email or view my CV

© 2025 Jordan Oliver

Contact Me

Based in Melboure, Australia

Available for work

© 2025 Jordan Oliver

Contact Me

Based in Melboure, Australia

Available for work

© 2025 Jordan Oliver

Contact Me

Based in Melboure, Australia