Incard iOS App – Jacqueline Chadwick

The above image represents the Home Screen of the InCard iOS app. As the product designer, the focus was on creating a clear, user-friendly interface that provides quick access to essential financial information and actions. Here’s a breakdown of the design and decisions made:

Key Elements of the Home Screen:

Header with User Profile: At the top, the user’s profile picture and company name are prominently displayed, making it easy to access account settings or switch accounts. The clean design here helps users personalise their experience while maintaining a professional look.
Total Balance Overview: The total balance is highlighted in bold, making it the focal point of the screen. It’s accompanied by a dropdown, allowing users to switch between accounts or currencies. This feature is designed to prioritise users’ need for quick access to their current financial standing.
Primary Actions (Add Funds & Send Money): The two main actions—’Add Funds’ and ‘Send Money’—are clearly represented with simple icons and large buttons. These actions are positioned right below the balance to enhance usability, ensuring that users can perform their most frequent tasks without any friction.
My Cards Section: A carousel of virtual cards is displayed, giving users easy access to view their available InCard Visa cards. The ‘View’ link allows users to dive deeper into card management. This feature ensures that users can manage multiple cards seamlessly, whether for personal or business use.
Recent Transactions: The recent transactions section shows the most recent financial activity in a clean, concise format. With the use of avatars and transaction details (name, time, amount), users can quickly scan their recent activity. This section ensures financial transparency at a glance.
Bottom Navigation Bar: The bottom navigation bar includes four primary sections: Home, Pay, Cards, and Rewards. The iconography is simple and recognisable, supporting ease of navigation while keeping the design minimal.

Design Considerations:

Balance of Functionality & Aesthetics: The design balances rich financial functionality with a sleek and modern aesthetic, ensuring that the app feels professional yet accessible.
Action-Oriented Layout: The placement of the most common actions directly under the balance ensures a smooth flow and minimises the number of taps needed for essential tasks.
User-Friendly Navigation: The simple and clear navigation bar at the bottom ensures that users can easily switch between core functions without confusion.

This Home Screen design was carefully crafted to ensure that users can manage their finances efficiently while maintaining a smooth and intuitive user experience. It focuses on quick access to important information and commonly used actions, making the app practical for day-to-day use.

The above image represents the Cards Screen of the InCard iOS app. This screen provides users with an organised view of their physical and virtual InCard Visa cards. As the product designer, the primary objective was to create a user-friendly interface that simplifies card management and improves overall accessibility for users.

Key Elements of the Cards Screen:

Segmented Card Types (Employee vs Company Cards): The screen is divided into two tabs—Employee Cards and Company Cards—allowing users to easily toggle between their personal cards and those issued for company use. This segmentation ensures a clear distinction between individual and organisational cards, making it easier to manage finances based on role or purpose.
New Card Creation: The prominent + New button in the top right corner encourages users to create a new card. Positioned at the top, this button ensures that users can quickly add cards, enhancing the flow for users who frequently issue cards for employees or projects.
Card List: Each card is displayed with relevant details, including the cardholder’s name, card type (physical or virtual), and the last four digits of the card number. This structure ensures clarity and ease of identification, especially for users managing multiple cards across different categories (e.g., personal vs team cards).
Visual Card Representation: The visual representation of each card in different colors helps users visually distinguish between various cards at a glance. This color-coding approach not only enhances usability but also improves the overall aesthetic of the app.
Card Management & Overview: The View All link at the top-right of the “My Cards” section allows users to access a complete list of their cards for detailed management. This ensures scalability for users who might hold several cards and need quick access to them.
Bottom Navigation Bar: The consistent bottom navigation bar remains present, allowing users to easily switch between Home, Pay, Cards, and Rewards without needing to go back to the home screen. This improves user flow and efficiency.

Design Considerations:

Card Organisation and Categorisation: The layout prioritises card organisation, ensuring that users with multiple cards can manage them without confusion. The clear distinction between physical and virtual cards and the ability to quickly toggle between tabs creates a user-friendly experience.
Scalable Design: The design allows for scalability, ensuring that as the user’s list of cards grows, the interface remains easy to navigate. The View All function supports users managing larger card inventories.
Visual Feedback: The use of colors and card representations adds a layer of visual feedback, making it easy to quickly identify cards associated with different purposes or teams.

This Cards Screen design ensures that users can effortlessly manage their cards, whether they are for personal or company use. The layout emphasises simplicity, clear organisation, and ease of access, making it an integral part of the overall user experience in the InCard app.

The above image represents the Payments Screen of the InCard iOS app. This screen provides users with an organised and efficient interface for managing and viewing their payment contacts and history. As the product designer, the focus was on simplicity and quick access to frequently used payment functions.

Key Elements of the Payments Screen:

Top Navigation for Payment Types: The screen is divided into two main categories—Contacts and Scheduled—allowing users to easily switch between their payment contacts and any scheduled payments. This segmentation ensures that users can focus on specific tasks without unnecessary clutter.
New Payment Button: The + New button is prominently placed in the top-right corner, enabling users to easily initiate a new payment. The design of this button makes it clear and intuitive, encouraging users to take action with minimal effort.
Recent Payees List: The Recent Payees section provides users with quick access to the contacts they have recently paid. This list is displayed with clear contact names, icons (for individuals or businesses), and corresponding bank details, ensuring that users can easily identify and initiate payments to these contacts again. The presence of country flags further aids in distinguishing contacts based on location or currency.
View All Link: The View All link allows users to expand the list of recent payees, offering a comprehensive view of all payment contacts without overwhelming the initial screen.
Bottom Navigation Bar: The navigation bar at the bottom is consistent with the rest of the app, allowing users to seamlessly switch between Home, Pay, Cards, and Rewards. The Pay section is highlighted, giving visual feedback on the user’s current location within the app.

Design Considerations:

Efficient Navigation and Organisation: The layout prioritises recent payees and quick access to payment contacts, reducing the steps needed to initiate payments. The segmentation between contacts and scheduled payments ensures that the user interface remains clean and focused.
Visual Hierarchy and Clarity: The design uses a clear visual hierarchy, with larger fonts and icons for the most important elements like contact names and the New Payment button. The addition of country flags and icons for individuals and companies ensures quick identification of contacts.
Action-Oriented: The large + New button encourages users to initiate new payments, ensuring the primary action is always visible and easy to access.

This Payments Screen design provides users with a streamlined experience, offering them the ability to quickly view and pay recent contacts while ensuring easy access to new payment functionality. The clear organisation and intuitive navigation enhance user satisfaction and make managing payments simple and efficient.

The attached image represents the Rewards Screen of the InCard iOS app. This screen allows users to track their InCard points, redeem rewards, and view recent point transactions. The design focuses on a clean and intuitive layout that offers users quick access to their rewards status and history.

Key Elements of the Rewards Screen:

Points Overview: At the top, users can see their current InCard points balance, presented prominently in large, bold text for easy visibility. The information icon provides more details or explanations about the points system, allowing users to understand how their points are accumulated or redeemed.
Redeem Button: The + Redeem button is positioned in the top-right corner, making it easy for users to redeem their points whenever they choose. The button is highlighted with a bright color, drawing attention and encouraging interaction.
Rewards Promotion: A promotional banner featuring an image with a caption encourages users to earn more points. In this case, the banner promotes earning InCard points through advertising. The visual banner adds a dynamic, engaging element to the screen, making it both informative and visually appealing.
Recent Point Redemptions: The Redeemed InCard Points section displays a list of recent redemptions, showing transaction details such as cashback amounts, times, and the type of transaction. The View All link allows users to view a complete history of redeemed points, supporting transparency and detailed tracking of rewards.
Bottom Navigation Bar: The consistent bottom navigation bar is present, allowing users to seamlessly switch between Home, Pay, Cards, and Rewards. The Rewards section is highlighted, indicating the user’s current location within the app.

Design Considerations:

Clear Visual Hierarchy: The design prioritises important information, such as the points balance and the redeem function, ensuring that users can quickly access the features they need most. Large text and high-contrast buttons guide the user’s attention to key actions.
Action-Oriented Interface: The + Redeem button encourages users to actively engage with their rewards, while the promotional banner offers additional opportunities to earn points, enhancing the user’s interaction with the app.
Engaging and Informative: The combination of a visually appealing banner and practical point information provides users with both engagement and transparency. The design strikes a balance between functionality and visual interest.

This Rewards Screen design provides users with a clear overview of their points and redemption history, while also encouraging further engagement with the rewards system. The layout ensures a smooth, intuitive experience, making it easy for users to manage and redeem their rewards efficiently.