penny.de – Market Search & Detail Page
Rewe Group GmbH Food Retail Responsive Web App
by Maximilian Heere
Summary
The market search allows users to easily find, select and inform themselves about their Penny market. It includes a search functionality and market detail pages with specific information and links to the most important features.
About the business
The REWE Group is one of the biggest players in the European food market with it's subsidiary Penny being one of the largest discount supermarkets.
Features & functionalities
All features were fully developed and productive.
Search: Initial state
Clear focus
The search field is positioned directly in the initial viewport for clear user focus, accompied by an activating headline. Lighthouse reults in the lower viewport provide additonal context.
In the initial state, users can search for markets either by typing or by pressing the location search icon for a quicker search.
Tapping the search bar moves the pre-filled helper text to the top of the field as a helper label and allows users to enter text. The focus of the search bar in typing mode is highlighted by an elevated shadow.
Typing, executing & results
Search with ease
Typing in the search bar replaces the location search functionality with a reset option, enabling quick text corrections. This change updates the component's status to make it easier for users by showing suggestions.
Executing the search removes the focus from the field and lowers its elevation. Two labels display the number of results and the search radius to keep users informed.
Browsing results
Seamless integration
As users scroll through the results, the search bar and labels float sticky at the top of the screen.
The labels have slight transparency and blur in their background to ensure readability while seamlessly integrating the informative elements into the viewport.
Map view
Choose your view
Sticky button for seamless switching between map and list view.
Location markers provide quick access to market locations. Clicking a marker opens a market tile with additional details and link to the full market information page.