Introduction
Introduction
About The OTT Pocket App
The membership card management mobile app is designed to help users keep track of their membership cards in one place, eliminating the need for physical cards.
The app features a loyalty program that allows users to earn and redeem points at participating merchants. Additionally, users can add merchant gift cards/vouchers under the merchant's membership card.
Design Goals
Streamline Onboarding users: Design a cohesive and intuitive sign-in, sign-up process, and account page.
Goal: Simplify the onboarding experience by creating a clear and user-friendly interface for the sign-in, sign-up, and account pages. This will help users quickly and easily create accounts and access their profiles, ensuring a smooth entry point into the app.
Enhance Core User Interactions Objective: Redesign the home and membership pages with a clean, minimal interface.
Goal: Improve user experience by crafting a visually clean and functional interface for the home and membership pages. Focus on decluttering the layout, improving readability, and making key features more accessible to enhance overall usability.
Improve Navigation and Quick Access Objective: Redesign the menu bar and introduce a floating button for member QR code access.
Goal: Enhance navigation by redesigning the menu bar for easier access to app features and adding a floating button for quick access to the member QR code. This ensures that users can navigate efficiently and access their membership details with minimal effort.
Understanding The Context
Project Background
The membership card management mobile app is designed to help users keep track of their membership cards in one place, eliminating the need for physical cards. The app also features a loyalty program that allows users to earn and redeem points at participating merchants. Additionally, users can add merchant gift cards/vouchers under the merchant's membership card.
Features:
1. Barcode/ QR code scanning
2. Display of membership cards
3. Promotions display
4. Loyalty program
5. Gift card/ Voucher
When I joined the project the user research and persona creation were done. I did not have access to research and persona results. To gain the project insight and get familiar with the project's goals and objectives I had an "interview with stakeholders" and ran a "competitive analysis".
Stakeholder Interview
Purpose: To ensure the design aligned with business goals and user needs, I conducted stakeholder interviews aimed to uncover the project's objectives, identifying pain points, and prioritizing features.
Methodology: I interviewed key stakeholders, including the business owner and project manager. The interview lasted about 2 hours and focused on understanding their perspectives and requirements.
Summary of Insights: Several critical insights emerged from the stakeholder interviews. The project manager highlighted the need for a user-friendly sign-in/sign-out process. The business owner emphasized the importance of a visually appealing interface and pointed out common user frustrations, such as difficulty navigating the apps' different parts.
Competitive Analysis
I decided to run the competitive analysis with 4 (direct and indirect competitors) pocket apps that existed in the market to:
Learn from competitors' strengths and weaknesses
Explore user-centric improvements
Design inspiration
Understanding user expectations
Top key findings are:
All the apps analyzed use clean, modern sans-serif fonts, favored for their readability and simplicity. This suggests a preference for typography that enhances clarity and aligns with modern design trends.
Implication: Stick with a clean, sans-serif font for OTT Pocket, ensuring it’s easy to read and aligns with current design standards.
Competitors generally favor simple, structured layouts prioritizing ease of use and navigation. Even apps like Snaplii, which have a more dynamic design still maintain a clear structure to avoid overwhelming the user.
Implication: Maintain a simple and intuitive layout in OTT Pocket to ensure a seamless user experience. Avoid clutter and focus on guiding the user through the app with a clear visual hierarchy.
There is a trend toward either minimalist color schemes (e.g., Stocard) or vibrant, attention-grabbing colors (e.g., Snappii). However, even in apps with bold colors, there is usually a balance to prevent overwhelming the user.
Implication: Consider using a more dynamic color palette in OTT Pocket to add visual interest, but ensure it doesn’t detract from usability. Balance vibrant colors with neutral tones to maintain visual harmony.
Top key findings are:
Accessibility features, such as customizable font sizes and clear navigation, are common among the analyzed apps, reflecting a broader industry trend toward inclusive design.
Implication: Strengthen OTT Pocket's accessibility by offering more customization options and ensuring all design elements are accessible to users with varying needs.
Competitors prioritize efficient user flow and easy navigation, making it simple for users to accomplish their tasks without unnecessary steps or confusion.
Implication: Ensure OTT Pocket’s user flow is streamlined, reducing the number of steps needed to complete key actions like purchasing or redeeming gift cards. Consider adding shortcuts or personalized navigation options.
Successful apps use onboarding processes that quickly familiarize users with key features. Interactive tutorials or clear, concise guidance are common approaches.
Implication: Refine OTT Pocket's onboarding process by focusing on quickly demonstrating the app's value, possibly through interactive elements or a brief tutorial that highlights the main features.
Design Process
I started the design with rapid sketching.