Metropolis Capital Bank
Banking Made Simple: Designing a Seamless Digital Experience
Project Type: High-Fidelity App Mockup (UX/UI + Interaction + Visual Design)
 |  |  |  |  |
|---|---|---|---|---|
 |  |  |  |  |
Project overview
Metropolis Capital Bank is a conceptual financial services brand that needed high-fidelity mobile mockups to make banking feel clear, trustworthy, and user-friendly. The goal was to translate complex financial operations into an interface that feels seamless, intuitive, and aligned with the brand’s identity.
Role: Sole UX / UI Designer & Visual Designer
Deliverables: Mid-fidelity wireframes, high-fidelity mockups, prototype, documentation of design decisions and rationale
Tools: XD, Illustrator, Photoshop
Industry: Financial Services
Duration: 1/14/2025 – 2/1/2025
Objectives
-
Present core banking functions (bill pay, deposit, transfer) in a clean, easy-to-navigate interface
-
Balance informational depth (bank history, values, support) with clarity and readability
-
Design responsive, mobile-first screens that feel polished and professional
-
Reinforce brand trust and consistency through cohesive visual identity
Design approach
Trust-Driven Storytelling
I leaned on a professional and modern visual tone to instill trust and clarity. The color palette used deep blue and muted blues for stability, alongside neutrals (white and gray) to support readability. Typography was centered around Montserrat (Semi-Bold for headers/CTAs, Regular for body) to combine modernity and legibility. Layouts were structured, with generous spacing and clear visual hierarchy so information never felt overwhelming.
Process work
The brand style guide played a vital role in shaping the high-fidelity mockup for Metropolis Capital Bank, ensuring consistency, professionalism, and user trust throughout the design process. By establishing a clear framework for typography, color schemes, imagery, and UI elements, the guide helped maintain visual cohesion across the Home, About, and Contact pages.
The defined typography choices ensured readability and reinforced the bank’s identity, while the color palette—selected for its professionalism and accessibility—enhanced visual appeal and user engagement. The guide’s layout principles influenced the structured placement of key elements, such as call-to-action buttons, navigation menus, and content sections, ensuring an intuitive and user-friendly experience.
Mid-fidelity wireframes
The wireframing process in XD began with thorough research and planning to ensure a user-friendly and intuitive layout. Using the client’s requirements as a guide, I focused on layout and functionality without detailed styling. I used XD’s grid system and alignment tools to maintain a clean, organized structure, ensuring consistency across all pages.
Placeholder text and basic shapes were used to represent key features like login fields, informational sections, and contact forms.
After completing the wireframes, I conducted a review to assess usability and information hierarchy. I then incorporated feedback, making adjustments to enhance clarity. The final wireframes provided a strong foundation for the high-fidelity mockups, ensuring a seamless transition into the visual design phase while maintaining alignment with user experience best practices.
.jpg)
.jpg)
.jpg)
Visual design development
The color palette played a important role in shaping the high-fidelity mockup, reinforcing both usability and brand identity. Their chosen colors created a professional, trustworthy, and visually balanced interface.
Typography also played a key role. The use of Montserrat Semi-Bold and Montserrat Regular ensured a modern, clean, and highly legible design. Semi-Bold was strategically applied to headers and key CTAs (calls to action) to emphasize important information, guiding users naturally through the interface. Regular weights provided a smooth reading experience for body text, ensuring accessibility without overwhelming users.
High-fidelity mockups
The creation of the high-fidelity mockup was heavily influenced by the choice of color palette and typography. The colors worked together to convey professionalism, trustworthiness, and modernity. The deep blue provided a strong, stable foundation, commonly associated with financial security, while the muted blue introduced a sense of modernity and approachability. White provided clarity and ensured readability, maintaining a clean and open design. And gray was used for neutral elements, preventing visual overload by balancing the design.
Typography, with the use of Montserrat Semi-Bold for headers and CTAs, and Montserrat Regular for body text, ensured a modern, clean, and accessible layout. This thoughtful approach to color and typography not only enhanced user experience but also aligned the design with the bank’s brand, creating an intuitive, aesthetically pleasing interface.
.jpg)
.jpg)
.jpg)
Challenges & solutions
Challenge: Designing for a dense, information-heavy domain like banking meant ensuring clarity and usability despite the abundance of numbers, forms, and support content.
Solution: I established a clear content hierarchy, grouped related functions logically, and used ample spacing and contrast to separate sections. Key CTAs and information were given visual weight to naturally guide the user’s eye and support faster decision-making.
Challenge: The About and Contact pages required balancing rich informational content—including the bank’s history, mission, values, and multiple contact methods—without overwhelming users.
Solution: I organized support options (phone, email, business hours, FAQs) into digestible sections and applied whitespace and modular layouts to improve readability and visual flow.
Challenge: The existing high-fidelity mockup demanded refinements in content organization, accessibility, and responsiveness while staying true to Metropolis Capital Bank’s branding.
Solution: I restructured page layouts to ensure intuitive navigation, improved visual hierarchy for critical services, and optimized the design for cross-device responsiveness, maintaining both brand integrity and user trust throughout the experience.
Deliverables
-
Mid-fidelity wireframes in XD
-
High-fidelity mockups
-
Interactive prototype for all key pages (Home, About, Contact)
-
Documentation of design decisions and rationale
| | | | |
|---|---|---|---|---|
| | | | |
Outcome & reflection
The mockups delivered a polished, user-centered mobile banking experience. Users would have clear, fast access to core functions, with brand identity woven through every screen. By focusing on clarity, visual hierarchy, and consistency, the design met expectations for usability and brand trust. This project sharpened my skills in designing for information-heavy systems, organizing content intelligently, and balancing brand expression with utility.
Final thoughts
Designing for Metropolis Capital Bank reminded me that simplicity in complex domains is one of the most powerful acts of design. Every screen, typographic choice, and layout decision has the potential to build or erode trust.
If expanded further, I’d implement accordions and progressive disclosure for longer text and explore dashboard personalization to let users tailor financial views depending on their priorities (savings, expenses, investments).
Disclaimer
Metropolis Capital Bank is a fictional financial institution developed by the innovative team at Southern New Hampshire University (SNHU) as part of the GRA-362 User Centric Design course, created solely for educational purposes. Any resemblance to real banks, companies, or financial services is purely coincidental. This project serves as a creative exploration of branding, user experience, and digital interface design—where strategy meets sophistication in the world of modern finance 💵💳.