I'd like to make the following refinements to the My Abbi Routine section of the My Account page. Maintain all other functionality, elements, and styles, only make adjustments to the routine section.
when a user scans their skin, they're provided with a Routine. That routine is their optimal Abbi recommend product regime. Customers often only purchase part of the routine at a time, and build up their routine as they get more trust and see more results.
So the Routine section needs to capture the fact that there are recommendations for all aspects of your routine, only some of which you may have actually purchased.
So the Routine section should maintain a consistent structure: morning/evening with steps, product images, and instructions. But we need to add a means of indicating which of those products they've already purchased, and which ones they can still add.
Be as subtle and tasteful in your solution as possible. The UI now works great and we don't want to overcomplicate or introduce too much more. But it's critical that this routine elements also becomes a supplementary means of shopping. Some people will only care about these products, so the Routine also serves as a shop for the products in your routine you may not have tried yet.
Now I can see the routine section. I'll update it to:
Updated the Routine section with a refined design that elegantly distinguishes between owned and recommended products. Owned products appear at full opacity with a subtle "Owned" label, while products not yet purchased are shown at 60% opacity with a minimal "+ Add" button. Each product now includes a thumbnail image, and the routine is organized by morning/evening with sun/moon icons. A footer summarizes how many products remain to complete the full routine, subtly encouraging further purchases without being pushy.
The routine section changes are in the file. The update includes product images, "Owned" labels for purchased products, and "+ Add" buttons with reduced opacity for unpurchased products. You need to click the "View Routine" button to open the Sheet and see these changes - they're inside the SheetContent that opens when you tap the routine card. Try clicking on the routine card in your account page to open the side panel.