Design for reflection in human-computer interaction (HCI) has evolved from focusing on an abstract and outcome-driven design subject towards exposing procedural or structural reflection characteristics. Although HCI research has recognized that an individual's reflection is a long-lasting, multi-layered process that can be supported by meaningful design, researchers have made few efforts to derive insights from a theoretical perspective about appropriate translation into end-user visual means. Therefore, we synthesize theoretical knowledge from reflective practice and learning and argue for a differentiation between time contexts of reflection that design needs to address differently. In an interdisciplinary design-science-research project in the mHealth nutrition promotion context, we developed theory-driven guidelines for “reflection-in-action” and “reflection-on-action”. Our final design guidelines emerged from prior demonstrations and a final utility evaluation with mockup artifacts in a laboratory experiment with 64 users. Our iterative design and the resulting design guidelines offer assistance for addressing reflection design by answering reflective practice’s respective contextual requirements. Based on our user study, we show that reflection in terms of “reflection- in-action” benefits from offering actionable choice criteria in an instant timeframe, while “reflection-on-action” profits from the structured classification of behavior-related criteria from a longer, still memorable timeframe.