Rodrigo Amuchastegui got their new app design by running a design contest:
** Extended / Prize Increased ** Create a clean, modern iPhone App UI for Kards
Check out Rodrigo Amuchastegui's App design contest…
This app helps users to keep track of their spendings on their credit cards. Setting up each credit card's statement dates, it's possible to ad new expenses and know exactly how much the user will have to pay on each month for each credit card.
The app should follow iOS 7 styles and themes. This would mean a clean layout, lightweight fonts, yet modern. For the main screen, the user should quickly recognise the card he wants to use to add a new expense. Also, the percentage bar should catch he’s attention when the budget is close to it’s limit. Feel free to enhance the experience if you feel like it.
Kards (not sure this is going to be the name)
*** MAIN SCREEN **** This is the main screen of the app. From where the user will take all actions needed. * What users will see: - An "edit" button - A "settings" button - A list of all credit cards that the user has added to the app. Along with each credit card there’s a summary for the next due statement (invoice). The credit card is represented by an image selected from a list of images when the users sets a new card. That list of images contains the same card image, with different colors. The summary of the statement contains: The brand of the card (American Express, Visa, etc), the label given to the card (“Platinum”, “Corporate”, etc), the abbreviated due date (Dez, 23), the total amount spent and a progress bar with the budget percentage achieved. So, if the budget is set to $5,000 and the total spent is 2,500, the progress bar will be at 50%. - A segmented button that allows the user to sort the cards “alphabetically (A-Z)“, “most used”, “best purchase date”. * What users can do: - Add a new card by clicking “edit" then “add”. the “add" button will replace the settings button when “edit" is clicked and the “edit" button will become “done" button. - Delete a credit card by clicking “edit" then the “delete" button next to the card. - Add a new expense by clicking over the card image. - See the detailed statement when clicking over the statement summary. - Sort the cards by changing the segmented control *** NEW EXPENSE SCREEN *** This is the screen that’s shown when the users taps on the credit card image on the main screen of the app. Actually, a new expense is set in 3 screens, however, all screens will look exactly the same, so there’s no need to design all 3 of them, just the first one. Workflow to add a new expense: 1st: Purchase Amount 2nd: Purchase Description (optional) 3rd: Purchase Date. (optional, default is set to current date) Whenever the user enters the first of the three screens, he can set the amount of the purchase in his current currency. After informing the amount the user can click “next" to go to the next screen (purchase description) or click “save”, to save the purchase with the amount informed and the default values for the other 2 screens. What users will see: - The numeric keyboard already shown on the screen - A “cancel" button to cancel - A “next” button to go to the next screen - A “save” button to save the purchase. - A view with 3 labels in it: - The title of the screen (“Amount” in this case) - The amount typed on the numeric keyboard - The tool tip of the screen. In this case a text saying “Type in the amount of the purchase. If you need to change the purchase currency, please click over it’s symbol to choose from all currencies available.” If you find it better, this label can be changed by a “?” button. *** STATEMENT SCREEN *** This is the screen that’s shown when the user taps on the Statement Summary on the main screen. * What users will see: - The same Card Image and summary as in the main screen: - A list of all purchases contained in that statement. - The purchase must be grouped by currency. So that would be a Grouped Style Table View. the sections would be the Currency Symbol and the rows of each section would show the purchase date, description and amount. - For the sections containing purchases made in foreigns currencies it's rows should show: the purchase date, description, amount in foreign currency and the amount converted to the current currency. - A “previous" and “next" button to allow the user to navigate through all the statements for that selected card. Example: the user might be seeing December’s statement and want to check the purchases from november’s statement. For that, he would click “previous”. Or maybe the user wants to check the future statements to see how much he’s going to pay next month, considering that he has recurrent purchases or that he has made a purchase paid in instalments (available in some countries). - A label informing the current Month and Year for that statement.
What to avoid
* Although I want an iOS7 layout, I don’t want it to look like it’s part of the system, like Whatsapp does. * Avoid bevels, emboss, etc. * Try to avoid textures, but if you think that by using textures somewhere in the app will make it look perfect, than go for it. * Do not use the brand logos (like VISA, American Express, etc) as they are protected marks and I can't use them. Rather than using the logo, I prefer a clean design representing the credit card.
Every design category has flexible pricing for all budgets. App design starts at $599.
Full copyright with production-ready files for digital and/or print.
It all began with a design brief.
A quick, interactive guide helped them understand their design style and captured exactly what they needed in their app design.
Designers across the globe delivered design magic.
Rodrigo Amuchastegui collaborated with designers to refine their ideas
99designs has great collaboration tools so you can pinpoint and capture your ideas
And then… they selected a winner!
Along the way, they met lots of talented designers…
We think contests are a super fun way to get design.
Recently completed contests:
Kids on Bikes in a Youtube video blog on downhill mountainbiking, where kids test out bike parks across Europe. The ta
AIDA is an AI Discovery Assistant tool which helps with AI document classification for Legal use-cases. Target is multi-
Consulting for private security, law enforcement, military and private sector business. Tactical training, firearms trai
we will be selling custom, artisan-built liquid cooled computers and high-end parts
My company creates web applications and software. Primarily for companies all over Europe but also for private persons.