B2C, Mobile, Website, Animation
CLIENT
eConto – Loyalty Program
PRODUCT
iOS / Android mobile app Landing page
PROJECT TYPE
Commercial / Freelancer
ROLE
UI & UX Designer Web Designer
DURATION
3 months – Dec 2019
TOOLS
Sketch, Photoshop, Lottie, Html, CSS
eConto is a B2B and B2C loyalty platform that allows users to accumulate points, track their rewards, and redeem them across various partner stores.
In this project I was responsible for the design of the mobile app and a landing page based on the client branding.
Design a seamless user interface to engage users managing their account. Through an unique and user-friendly navigation, users will have access to their accounts, statements, points dashboards, redeeming points, partner stores, and referral program.
This project challenged me to think critically about user experience, visual consistency, and how to make the most important app features intuitive and engaging.
The final eConto design provides users with a rewarding experience, ensuring that loyalty management is both practical and enjoyable.
Understanding project scope, variables and opportunities
Before jumping into the design process, I conducted research on existing loyalty programs to identify key features that contribute to user satisfaction. The key insights included:
- Ease of Use: Users appreciate clear dashboards that give a snapshot of their points balance and redemption opportunities.
- Instant Gratification: Loading animations should be subtle and engaging to prevent user drop-off.
- Referral Incentives: Successful loyalty programs often incorporate referral bonuses, which needed to be prominently displayed in eConto.
Customizable charts and libraries were also required to be used in the project. Additional research and team syncs were necessary to define viable solutions based on different platforms, iOS and Android.
Defining a clear, user-centric solution
I began by wireframing key screens to ensure that the user flow was logical and intuitive. The user flows focused on the following:
- Dashboard that immediately shows points balance, quick access to recent activity, and partner stores.
- Account Statements: A section for viewing transactions history.
- Points visualizing through progress bars and graphs, so users can easily track their progress toward specific rewards.
- Partner Stores where users can redeem points.
- Referral Program that allows users to invite friends, share referral links, and track rewards earned through referrals.
I created high-fidelity mockups using Figma focused on creating a clean, modern aesthetic that aligned with the brand’s identity.
- Color Palette: A calm and professional color scheme with pops of vibrant colors to highlight actionable areas like points balance and CTA buttons.
- Typography: I used a modern, sans-serif font for easy readability and a sleek look, with larger font sizes in key sections like the dashboard and referral program.
- Icons & Visual Elements: Custom icons were designed to represent key features such as transactions, points, and partner stores, ensuring a cohesive visual language throughout the app.
Meeting requirements, improving user experience, interface, and more!
Meeting requirements, improving user experience, interface, and more!
I created a landing page design to presenta the program and its benefits, also redirecting new users to download the app and start gain points through the app.
The main features are:
- Present the program, goals, and benefits;
- Guide step by step to onboard new users;
- Highlight partner stores;
- Follow the brand guidelines to match the app experience;
- Responsible design since 75% of the users comess from mobile devices;
- Program contract pages.
The landing page was builded using Slim, PHP framework focused on routes and views, HTML, CSS, and Bootstrap CSS. The project was published in a GitHub repository provided by the company.
Meeting requirements, improving user experience, interface, and more!
Custom loading -- I created a custom loading animation to keep users engaged during short wait times. This animation reflects the eConto branding through playful yet minimal visual elements, using Lottie for smooth integration into the mobile experience.
Account Statements -- The design for the account statements section prioritizes clarity, allowing users to view their full transaction history, including points earned and redeemed. Filters and a search bar were added to help users navigate the data effortlessly.
Points Dashboard -- The dashboard gives users a quick snapshot of their loyalty points. Progress bars and dynamic charts help users track their points accumulation and see how close they are to reaching their next reward.
Partner Stores -- This feature allows users to browse through a list of stores where they can redeem their points. The design incorporates filters by store type, location, and offers available. Each store page provides clear call-to-actions for redeeming points.
Referral Program -- The referral program allows users to easily invite friends and family by sharing a link via social media or messaging apps. A visual tracker shows how many friends have signed up and the rewards earned through referrals, encouraging further engagement.
Some design artefacts of this project.
