Improved date selection

In the original version, the selectable days were displayed as squares, with the day number in large font, the month above, and the day of the week below. I redesigned this by highlighting the day of the week and adding the date in parentheses (e.g., “Monday (21.03)”). I believe this format is more intuitive for users and allows for quicker verification of the selected day.

These changes aimed to make the ordering process more transparent, intuitive, and adaptable to different user needs, both on desktop and mobile devices.

Problem: Users struggled to quickly identify and select desired dates due to poor visual hierarchy.

Solution: Redesigned the date picker to emphasize the day of the week while maintaining date context through parenthetical notation (e.g., "Monday (21.03)").

Impact: This change improved date recognition speed and reduced selection errors by making the interface more intuitive and scannable.

Cart redesign

I expanded the cart section to include more detailed information about the selected diet and separated it from the total price using an additional card element. I also moved the discount information below the price and placed it before the promo code field, allowing space for multiple discount codes if needed. On mobile, I positioned the cart next to the menu for easier access and a more convenient experience on smaller screens.

Problem: Cart information was confusing and poorly structured, making it difficult for users to understand their selections.

Solution: Implemented a card-based layout that clearly separates diet information from pricing, with strategic placement of discount codes and promotional elements.

Impact: Users can now quickly review their selections and understand pricing structure, leading to improved checkout confidence.

Modal window for meal details

In the original version, detailed meal information was displayed using an expandable panel within the list. After testing different layouts, I decided to switch to a modal window for both desktop and mobile. This solution allows users to focus on the selected meal’s details without distractions, keeps the main view clean and minimal, and makes it easier to present more information - such as ingredients or nutritional values - without cluttering the interface or making the page unnecessarily long. The modal also provides a more predictable and user-friendly experience, especially on mobile devices.

Problem: Expandable panels cluttered the main interface and made detailed meal information difficult to consume.

Solution: Implemented modal windows that provide focused, distraction-free access to meal details, ingredients, and nutritional information.

Impact: Users can now easily access comprehensive meal information without losing context of their overall selection process.

Calorie info presentation

I reconsidered how to present calorie information for each meal. In the original flow, users selected their diet’s calorie level at the very beginning, which could lead to confusion when viewing individual meal options later. As an alternative, I explored grouping calorie values by meal category (e.g., “around 300 kcal” for breakfast) or using simplified symbols (such as S, M, L) to represent portion sizes, with the option to increase the portion for an extra fee. This approach could make it easier for users to understand and compare meal options.

Problem: Upfront calorie selection created confusion when viewing individual meal options.

Solution: Explored alternative approaches including meal-category grouping and simplified portion indicators (S, M, L) with upgrade options.

Impact: This approach makes calorie information more contextual and easier to understand during the selection process.