Robinson Marroquin | UX & UI Designer

AlgaeCal

UX & UI Projects

Stronger Bones For Life

Below, you'll discover a variety of UX and UI projects

I completed working at AlgaeCal Inc.

PROJECT ONE

Dark Mode E-mail Improvements

My Role: UI/UX Design | Graphic Design | Prototyping and Layout.

Target: Mature women 50 years +

Sector: Natural Supplements

Location: USA and Canada.

Design problem: Improve the user experience based on data

Tools: MaroPost, Adobe XD, Adobe Creative Suite, Jira, and Miro

Background:
AlgaeCal routinely communicates with its customers through email, employing MaroPost for email distribution.

Upon joining the team, I observed that these emails needed to be compatible with dark mode despite around 81% of smartphone users utilizing this feature. Consequently, I suggested alternative layout enhancements for the email team to adopt.

These enhancements aimed to maintain flexibility while ensuring readability, conducting A/B tests, and preserving content flow. Below, you'll discover some examples illustrating how each content block adapts to dark mode.

Desktop Version

Mobile Hero Block

Mobile Product Block

Mobile Text Block

PROJECT TWO

Bone Building Sales Page

My Role: UI/UX Design | Graphic Design | Motion Graphics

Target: Mature women 50 years +

Sector: Natural Supplements

Location: USA and Canada.

Problem: Increase conversion rates

Tools: Adobe XD, Adobe Creative Suite, ChatGTP, and Blender

Like other e-commerce companies, AlgeaeCal relies on conversion rates to increase revenue, and one of the best ways for the company and its audience is through sales pages.

One of my initial responsibilities as a UX/UI designer involved assisting the e-commerce team in creating the new product sales page. This collaborative effort involved designing the page in modular blocks and working closely with another UX designer, copywriters, web developers, marketing specialists, and a design lead.

My responsibility involved guaranteeing that the page was user-friendly and aesthetically pleasing, all while fine-tuning for optimal conversions. 3D animation was used for the creation of the 16 Nutrients Block.

See Page Here

PROJECT THREE

Iconography Guide Style

My Role: UI/UX Design | Graphic Design | Design of Rules

Target: Men and women 40 years +

Problem: Maintain a cohesive icon system between devices.

Tools: Adobe Illustrator and Adobe XD

I addressed another design challenge by refining the style guide for AlgaeCal's iconography. Recognizing the importance of enhancing icon readability across diverse devices and platforms, I designed a comprehensive guide structure to help designers create and implement distinct icon sets tailored to the brand's needs. Additionally, in collaboration with a fellow UX designer, we integrated these newly designed icons into the new AlgaeCal's design system. Below, you'll find examples of the guidelines and icons already developed.

PROJECT FOUR

Special Offer Landing Page

My Role: UI Design | Graphic Design | Motion Graphics

Target: Mature women 50 years +

Sector: Natural Supplements

Location: USA and Canada.

Problem: Increase conversion rates

Tools: Adobe XD, Adobe Creative Suite, Blender, Jira and Miro

I had the chance to contribute to an intriguing project involving the creation of a landing page for the "Healthy You Healthy Bones" book, exclusively accessible to a specific clientele. This collaborative effort involved working alongside web developers, copywriters, and another UX designer. My role primarily centered on crafting the visual elements, encompassing a unique 3D animation. I introduced creative visuals that set us apart from competitors and were challenging to duplicate.