LC Pharmacy
Design System for
Mobile app E-commerce

LC Pharmacy
Design System for
Mobile app E-commerce

LC Pharmacy
Design System for
Mobile app E-commerce

Content


April 28, 2024

March 6, 2024

March 6, 2024

Overview

Overview

After completing the RSA project, our team was preparing for a major redesign of the LC Pharmacy app and website for end-users. To ensure a smooth and consistent redesign, we first needed a strong design system as the foundation. That’s why I created the RCA Design System – a unified design language that brings clarity, trust, and scalability for both the product and the team.

After completing the RSA project, our team was preparing for a major redesign of the LC Pharmacy app and website for end-users. To ensure a smooth and consistent redesign, we first needed a strong design system as the foundation. That’s why I created the RCA Design System – a unified design language that brings clarity, trust, and scalability for both the product and the team.

Principles

Principles

After spending time exploring and practicing Atomic Design, this project gave me the chance to truly put those lessons into practice and build a design system with real impact.

Atoms

Atoms

Atoms

Molecules

Molecules

Molecules

Organisms

Organisms

Organisms

Templates

Templates

Templates

Pages

Pages

Pages

Styles

Styles

Keep every user interface in the same rhythm 🎧

Grids

Grids

2 types of layout use to mobile grids: Full column and Carousel

Full column layout

Carousel layout

Mobile screen example

Spacing

Spacing

Use to define spacing between elements and sections. Working from a defined spacing system allows for faster and more consistent work. Consistent spacing eliminates guesswork during design and development.

Full column layout

Full column layout

Create a free website with Framer, the website builder loved by startups, designers and agencies.