tuca barcelos

Overview

role:

ux/ui designer

timeline:

12 weeks

tools:

figma

photoshop

type:

e-commerce page

responsibilities

research

information architecture

ui design

design system

component library

user flows

developer handoff

Building a scalable Shopify experience.

Bravo is a Shopify storefront for a premium coffee brand, designed to support both product discovery and conversion without sacrificing the brand's visual identity.

Instead of creating isolated pages, the project focused on building reusable templates and components that could scale with future campaigns and product launches.

  • Responsive ecommerce experience.
  • Scalable page templates.
  • Reusable UI components.

My contribution.

I owned the UI design of customer-facing pages from concept to developer handoff, working closely with the Project Manager and engineering team.

  • Designed key Shopify pages.
  • Expanded the design system.
  • Improved navigation and product discovery.
  • Supported implementation with developers.
  • Produced supporting visual assets.
Check the website

Design System

Instead of treating each page as an isolated design, the project relied on a scalable component-based approach.

My work focused on expanding the existing design system by creating reusable interface elements, defining consistent spacing and typography patterns, producing new illustrations and graphical assets, and ensuring every new section integrated seamlessly with the established visual language.

This approach allowed the storefront to grow without sacrificing consistency or usability.

UI Design

The interface was designed to balance branding, merchandising, and conversion across the entire shopping journey.

  • Clear visual hierarchy for faster product discovery.
  • Modular layouts reusable across multiple page templates.
  • Responsive components built for Shopify.
  • Consistent navigation between campaigns, collections, and products.
  • Whitespace and typography optimized for readability.

Collaboration

I worked alongside the Project Manager and developers to translate business requirements into production-ready interfaces.

  • Designed high-fidelity UI for Shopify.
  • Collaborated directly with developers during implementation.
  • Maintained consistency across new and existing pages.
  • Adapted designs to technical constraints without compromising usability.

While the overall product direction and priorities were defined by the Project Manager, I was responsible for translating those requirements into polished production-ready interfaces, collaborating closely with developers throughout implementation to ensure design quality and consistency across the site.

Outcome

The result was a scalable storefront designed to support both customers and the internal team.

  • Reusable design system for future pages.
  • Flexible templates for campaigns and product launches.
  • Consistent user experience across the site.
  • Faster design and implementation for future updates.
Check the website

vertigo vinyl

made at Solo Media Group

Premium e-commerce experience focused on product discovery, responsive design, and conversion.

ux/ui design

learn more

game track

End-to-end UX case study covering research, information architecture, prototyping, and design system creation.

product design - mobile app

learn more

cosmeticon 2023

Event platform and interface designed to simplify navigation, improve information hierarchy, and provide a seamless experience for attendees before and during the event.

ux/ui design

learn more

íris palo tattoo

Custom portfolio website designed to establish a strong digital presence, balancing visual identity, responsive web design, and a user experience tailored to showcase the client's work.

ux/ui design - graphic design

learn more

bikcraft

Responsive website created as a complete UI-to-code project, translating interface design into production using HTML, CSS, and JavaScript while reinforcing accessibility and front-end fundamentals.

ux/ui design

learn more
All Projects