Storefront integration, rewards overview, wallet and missions
01 / The brief
Make rewards part of shopping
The working brief
Give shoppers a clear way to see what they earn, understand the value of their points and use them. Connect the e-shop.gr homepage with an account area for the overview, wallet and missions.
Context and constraints
The storefront already has a dense retail layout and a strong yellow identity. LOOP needs to fit around shopping, rather than ask people to learn a second website. Account data, earning rules and reward values in these screens are illustrative.
This is a summary of the design goal, not a quoted client brief. The work shown is a design proposal and an earlier Framer prototype.
02 / The journey
From a product to a reward
01
Discover
See LOOP in the homepage and beside products while browsing.
02
Understand
Open the overview to check points, their value and tier progress.
03
Check
Use the wallet to separate available, pending and expiring points.
04
Use or earn
Choose a redemption amount or follow a mission to earn more.
Two reasons to visit, two routes
A shopper may want a quick answer: “What do I get from this purchase?” A returning member may want to check a balance or use a reward. The storefront answers the first question; the member area handles the second. Linking them keeps rewards close to the purchase without putting every account detail on the homepage.
03 / Key decisions
What I chose, and why
Keep the storefront recognisable
The yellow retail header and product layout remain the shopping context. A LOOP account entry, balance panel and product prompts introduce rewards within that context. The trade-off is limited space: the homepage should explain the benefit and offer a route in, rather than become the account dashboard.
Show money beside points
“735 LP” describes a balance, but “7,35 €” explains its value. Showing both makes the next step easier to judge. The conversion shown is an example in the proposal; a real release would need agreed earning, redemption and expiry rules.
Separate available from pending
The wallet gives pending and expiring points their own places. This avoids presenting every point as immediately usable. Before implementation, the system would also need to explain when pending points become available and what happens after a return.
Give missions a clear state
Each mission has a specific action, reward and progress indicator. Active missions offer a next step; completed missions show a completion state. The layout supports a repeatable pattern, while the actual mission rules still need product and operational validation.
04 / Visual system
Related to the shop. Easier to read.
The LOOP lockup used in the member screens.
A quieter account space
The member area uses white surfaces, Geologica headings and Inter details. Lavender, rose and mint distinguish groups without competing with balances and actions. The storefront keeps its existing retail character; the member screens give account information more breathing room.
Navigation, balance summaries, progress counters and mission cards repeat across the screens. Colour supports the hierarchy, while words and numeric states carry the meaning.
05 / The screens
Four screens. One account.
Current desktop designs, shown in the same order as the member navigation, followed by the storefront integration. Account values, transactions and rewards are examples. Open any screen to inspect the full SVG.
Member overview · Design proposal
Where am I now?
The overview brings available points, euro value, pending points and tier progress together. Product suggestions and mission links offer a next step, while the balance remains the main account reference.
Balance first; useful next steps below. The same navigation leads to the wallet and missions.
Wallet and redemption · Design proposal
What can I use?
The wallet pairs the available balance with its value, then separates pending and expiring points. The transaction list explains where points came from or went. Example redemption amounts connect the balance to a possible discount.
A live flow would need eligibility checks, a confirmation step and clear feedback when redemption is unavailable.
Missions and progress · Design proposal
What should I do next?
The missions screen turns earning into specific actions: collect from an e-shop point, add a device to My Setup, or explore a related service. Progress and completion states make the difference between an available action and a finished one visible.
These mission examples are illustrative. Completion rules, credit timing and repeat limits need agreement before release.
Storefront integration · Design proposal
Why should I open LOOP?
The proposed homepage integration adds a persistent My LOOP entry, a balance-and-value summary and earning prompts near products. This gives the programme a presence where shopping already happens.
This storefront was created as an integration example. Product-page, basket and checkout flows are not included in the current screen set.
06 / Prototype and motion
See the work in context
The recorded walkthrough shows the interface direction.
Ask shoppers to find their usable balance, explain a pending transaction, choose a redemption amount and start a mission. Watch where they hesitate. Check the same tasks on a small screen, with keyboard navigation and with long Greek labels. These are proposed checks, not completed research.
Agree the rules before building
Confirm how purchases earn points, how returns affect them, when points expire and where discounts apply. Define signed-out, empty, loading, error and insufficient-balance states. The current desktop screens establish a direction; mobile designs and the final checkout flow remain to be worked through.
How I would measure it
Start with task completion and errors in prototype testing. After a release, measure storefront-to-LOOP visits, redemption completion and support questions about balances. Compare against an agreed baseline and time period. No conversion lift, engagement increase or commercial result has been measured for this proposal.
08 / Result so far
A defined rewards journey, three member-area designs and a storefront integration proposal.
My contribution shown here is product UX/UI and prototyping. The deliverables make the proposed structure and visual direction reviewable. They do not establish that the rewards rules, responsive implementation or production integration are finished.
