About project Overview Design process Branding Consistancy Conclusion

Pike Street Bank Online banking.

15 Dec 2024

Pike Street Bank is a comprehensive online banking solution for quickly launching your own digital financial platform.

Hero image for Pike Street Bank Online banking.

Archway

Client

Tech Stack

Services

#Product Strategy

#Research

#Product Design

#UX Design

#UI Design

#Branding Extension

#Ongoing Production Support & Product Evolution

About project

Client and idea

A leading tech-driven banking institution collaborated with our team to develop a modern online banking application—aimed at giving financial organizations the ability to launch secure, user-friendly digital platforms with minimal effort. The overarching vision was to empower both banks and their customers with intuitive tools and robust functionality.

Challenge & Goals

The digital finance landscape is already populated with numerous solutions providing similar features and polished interfaces. Our challenge was to set this platform apart on every level. We aimed to create a holistic solution where a seamless user experience and advanced capabilities come together under a modern, appealing interface—ensuring straightforward onboarding and strong engagement.

Solutions & Result

Through comprehensive market research and user needs analysis, we constructed a detailed sitemap to guide the application’s structure. Our team then carried out iterative tests on the UX wireframes, verifying smooth transitions across all key features. Well-crafted visuals and carefully integrated motion design further enhanced the platform’s appeal, culminating in an online banking solution that balances practicality and aesthetics.

Victoria Kruse

Lead Product Manager, Archway Software

Tino Digital Agency delivered high-quality work on time, allowing the client to transition easily from design to development. The team effectively communicated the status, timeline, and questions. Overall, Tino Digital Agency’s designs received positive feedback from both partners and directors.

All reviews

Investment raised

1400

Design hours

900

Screens

project Overview

Main app features

Pike Street Bank is an innovative online banking platform engineered to streamline everyday financial activities for both institutions and their customers, offering a user-friendly environment for managing accounts, scheduling transfers, and accessing integrated financial tools. Users can effortlessly open new accounts, handle various transfers, and gain valuable financial insights—all within a single, secure interface. Supporting multiple transaction types and robust on-the-go functionality, Pike Street Bank ensures a smooth, intuitive experience that meets the evolving needs of today’s digital finance landscape.

Customizable dashboard

The app features a personalized dashboard where users can tailor key banking tools—like account balances, transaction history, and upcoming payments—to suit their preferences. Recognizing that nearly half of all users interact with their smartphones one-handed, the main navigation is strategically placed at the bottom of the screen. Additionally, a simple swipe motion allows quick switching between dashboard sections, delivering a seamless experience without requiring users to stretch or reposition their grip.

All accounts details

Pike Street Bank goes beyond simply listing account balances. For instance, users can view, edit, and manage multiple accounts in one place, while also updating or customizing account nicknames and preferences. This flexibility includes adjusting display settings, viewing detailed transaction histories, and quickly toggling between different accounts—giving users full control over their financial landscape in a single, user-friendly dashboard.

Various money transfers

To further enhance Pike Street Bank's capabilities, we implemented a suite of flexible transfer options—covering everything from internal account transfers and external ACH to wire transfers and real-time P2P payments. All it takes is a few taps, and the application securely handles the rest—making it easy to schedule, edit, and track transactions in one place. This streamlined approach removes the complexity behind banking operations and provides a more intuitive, worry-free experience for users on the go.

Budget tools & financial health

One of our client’s top priorities was ensuring users could easily maintain and improve their financial well-being. To achieve this, our team developed a suite of robust budgeting features in Pike Street Bank—enabling customers to categorize expenses, set personalized savings goals, and track cash flow in real time. We also integrated tailored insights and reminders to encourage healthy financial habits, helping users stay on course and achieve their long-term financial objectives with ease.

Bill payments & check deposits

Another convenient feature of Pike Street Bank is the ability to handle everyday financial tasks—from scheduling bill payments to depositing checks—in a matter of seconds. Our team developed a straightforward workflow that allows users to easily set up single or recurring payments, ensuring they never miss a due date. We also integrated remote check deposits: by simply snapping a photo of their check, users can securely deposit funds without ever stepping into a branch. This unified approach streamlines essential banking chores and keeps finances at users’ fingertips.

Account settings & custom menu

Users can assign smart tags for their documents. With tags, it's easy to find documents on the same topic.

Design process

Research

During the research phase, our team conducted a comprehensive analysis of the digital banking market, examining over 20 competitor platforms. We pinpointed core usability challenges and assessed potential solutions for critical features like account management, bill payments, and check deposits. This in-depth study allowed us to apply best practices in UX design while ensuring that the user interface remained visually engaging and supportive of a wide range of functionalities.

Design process

Sitemap

We developed a comprehensive sitemap that shaped the app’s structure and ensured intuitive navigation. Using user story mapping, we thoroughly tested potential user scenarios, verifying each path performed seamlessly and preventing any critical gaps. This method helped maintain a cohesive, user-focused experience across the entire platform.

Design process

UX Wireframes

We began by solidifying the core functionalities and translating them into a clear, high-fidelity wireframe set. This concise visual representation allowed us to validate user flows early and ensure that the interface remained intuitive.

From there, our team conducted iterative feedback loops—examining edge cases, refining navigation elements, and streamlining overall task completion. Each wireframe iteration was rigorously tested, both in-house and with potential end-users, to confirm that every user journey—from account opening to daily transactions—flowed smoothly. This process not only helped refine visual elements, but also ensured that the final product would meet real-world banking needs in a cohesive, user-friendly manner.

Design process

UI Design

Our team set out to craft a visually appealing interface that promotes concentration and fosters trust in the platform. We opted for hues of blue and purple, known for their calming effect and suitability for extended screen use—striking the perfect balance between professional aesthetic and user comfort. To ensure a consistently smooth experience, we employed fluid interface elements that reduce distractions and support intuitive navigation.

Design Concept

Drawing on a detailed user persona provided by the client, we chose blues and purples to convey business-mindedness, confidence, and reliability. Meanwhile, orange accents in key illustrations and interactive elements highlight users’ creativity and drive. This strategic color scheme, paired with thoughtful motion design, offers a cohesive visual language that resonates with the modern professional audience and enhances overall usability.

Widgets for dashboard

Our approach to the dashboard’s design centered on creating customizable widgets that give users immediate access to the banking features they use most. These modular components display real-time account balances, recent transactions, and quick links to essential services—like bill pay or check deposits—right on the home screen. By allowing users to pick and arrange widgets based on their individual preferences, the dashboard offers both convenience and personalization, improving overall engagement and enabling a smooth, efficient banking experience.

Branding

Typography

For Pike Street Bank, we chose a modern sans-serif typeface that embodies clarity and professionalism. Each character is designed for optimal legibility, ensuring a comfortable reading experience across different screen sizes. We paired subtle weight variations with consistent spacing, allowing essential information—like account details and transaction histories—to stand out without overwhelming the user. This deliberate combination of readability and visual appeal reinforces the brand’s approachable yet trustworthy identity.

Outfit

RegularMediumSemiboldBold

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

010203040506070809

Branding

Colors

We selected a palette featuring Midnight, Sky Blue, Arctic Blue, Ingot, and Champagne to convey business-mindedness, confidence, and trust to Pike Street Bank’s professional users. These colors are easy on the eyes, making them ideal for prolonged screen use. Midnight serves as a strong primary color, while Sky Blue adds a calming touch. Arctic Blue and Ingot provide subtle contrasts, and Champagne is used as an accent color to highlight creativity and energy. This thoughtful combination creates a cohesive and visually appealing environment that enhances the overall user experience.

#163548

Midnight

#7CA0B5

Sky Blue

#E9F0F3

Arctic Blue

#EBE5C7

Ingot

#F4F2E8

Champagne

Consistancy

Design system

Our team crafted a cohesive design system for Pike Street Bank that ensures a consistent and intuitive user experience across all platforms. Utilizing the Outfit typeface and a color palette of Midnight, Sky Blue, Arctic Blue, Ingot, and Champagne, we created a visually appealing and trustworthy interface that aligns with the bank’s professional and modern values.

Conclusion

Pike Street Bank delivers a seamless and secure online banking experience, empowering users to manage their finances effortlessly and confidently. Our team’s innovative design and user-centric features ensure that customers enjoy a modern, intuitive platform tailored to their evolving financial needs.