Credit Card Manager
BMW Mastercard
An introduction and web app of a BMW branded line of credit cards using the white label design.
Service
Web App Design
iOS App Design
WCAG 2.0 Compliance Testing
Contribution
Design Proofing
Color Recommendations
US Bank while known casually as a national bank, it also uses its institutional status to offer company-branded credit cards to non-financial companies.
Mockups & Presentations
Challenge
As part of creating a new credit card, there existed a need to stylize the white label credit card app to suite BMW’s look and feel.
Solution
Updating the original files, colors were index tested, and then implemented.
Design Process
For the most part the design process consisted of careful contributions that were compatible with pre-existing standards. The site map, design kit, and even layouts were already established. The part I played was to test colors and finalize the product within a pre-ordained UX.
COLOR COMPLIANCE TESTING - Given that these mobile apps had to be in compliance to WCAG 2.0’s requirement for contrast, we had to start testing colors to make sure the foreground and backgrounds wherever text appears have the necessary contrast.
This is a slow and complex task, whereby colors are tested. Results tracked, and when necessary follow-through with necessary revisions.
EXISTING SITE MAP - The structure of the app was predicated upon the functioning services that could be currently provided.
Since new features required ample lead time, new features during this design round were unlikely. Thus this structure was a working baseline.
EXISTING DESIGN KIT - Text content often came in the form of a doc, but sometimes it was born from a card sorting study
In this environment, the design kit had been established. As well as the layouts, so there was room to revise. Instead any new design work was expected to follow these standards.
High Fidelity Wireframes
Wireframes that have been custom-tailored for the client’s brand, serve as a final step before entering into the development phase. A tried and true method for handoff to developers is to show exactly how we expect the app to function. What variance appears is more a conversation between PM and QA.
Make a Payment
For the most part this is a bridge page, helping users launch individual features.
< Home
Often called the Dashboard, this page serves as the unified entry point, and hopefully the springboard into the most popular features.
Alerts
Alers is a type of text-only dashboard which through an accordion metaphor can show all the currently active and available alerts.
Services
Probably at first glance would be diagnosed as a link farm. Yes probably, though it does serve as a purpose for help and training.
Full Card Series
A quality goal for user experience in this project was to ultimately serve a series of MasterCard brand credit cards. Beyond BMW, there was also BMW Motorrad and MINI
Cards
BMW Precision Mastercard
BMW Mastercard
BMW Motorrad Mastercard
MINI Mastercard
Solving inside the Standard
Within a large design department, a good UX designer has to collaborate and follow-through with their set contribution. That’s a funny expectation because it requires a designer to be a good problem solver while doing so inside a strict standard.
It's not Glamourous
Designing within a pre-established design standard is part of life. It’s not always possible to create something unique or new. To be honest, a unique interaction should be avoided, since we are always trying to streamline and simplify a user’s activity.
End of the Day
What mattered at the end of the day was reaching a solution. It meant committing to a higher level of work ethic and quality of the product. Knowing that the endgame was something that would be usably impacted every part of the design effort.
Domain Knowledge
Web Content Accessibility Guidelines
Banking
Credit Card Services
Design Tools
Photoshop
Axure Teamsite
Platform
HTML/CSS
iOS