ONE (Financial Manage App)

University of Colorado Denver

BANK ONE

Created by Jinju Park

CONTENT

LOGO

USER JOURNEY MAPPING

SMART GOALS

WIREFRAME

PERSONA

MOBILE HIGH FIDELITY

UI PATTERN

TABLET HIGH FIDELITY

COMPETITIVE ANALYSIS

ONBOARDING

CARD SORTING

USER TESTING DATA ANALYSIS + RESULTS

INFORMATION ARCHITECTURE

MARVEL (PROTOTYPE)

PRESS RELEASE

RETROSPECTIVE

FEATURE PRIORITIZATION MAP

SMART GOALS

The easy process of payment and managing budget.

Combine all account to one app for easy access and tasks.

Manage and keep on track of all account at once.

LOGO

Shape of logo represents ONE as all accounts in ONE app.

Color C 84.32% M 71.63% Y 0.06% K 0.03%

R 63 G 90 B 168

C 63.78% M 0.00% Y 98.97% K 0.00%

R 100 G 188 B 70

HEX : 65bc46

C 71.2% M 73.06% Y 0.00% K 0.00%

R 98 G 90 B 168

HEX : 625aa7

HEX : 405aa8

Color of Blue represents Trust Color of Green represents Peace and Positive Color of Purple represents Creative

UI PATTERN INTERFACE

Action Action Button: 110 x 495 px

My Bills

Back Button: 120 x 120 px

Calendar

History

Deposit

On and Off Button: 260 x 145 px

Export Delete Button: 270 x 185 px

Bottom Bar: 1240 x 190 px

Edit Edit Button: 220 x 98 px

Adding information Button: 140 x 140 px

Save Save Button: 140 x 80 px

INTERFACTIVE PATTERNS

Action Button where its confirming the user’s actions to move on the next page or steps

Back button goes to previous page the user was on + transition is wipe.

On and off button activates when user agrees to turn the functions active or deactivates + transition is turning color to green when its on and radial button moves to left to right.

Adding button gives a adding information option to users + transition is slide down.

Delete button functions to delete the seletected items + transition is bubbles dissolve.

Edit and Save buttons are orginated from Apple, it edits and saves the contents users are at + no transition.

Bottom bar is like a menu where the most usuable categories are organized in order for users to do quck task + no transition.

My Bills

A category where users can manage their bills and pay bills.

Calendar

Calendar where spending shows right alway in monthly, weekly, and yearly based in selection.

History

A line graph where it compares the income and expenses in different time.

Deposit

A category to deposit user’s checks to selected account

Export

A category where user can export the all the finance information to CSV and PDF for desktop usage.

COMPETITIVE ANALYSIS

Expense

Pocket Daily

Money Tracking & Free Credit Score

personal Finance Assistant

Rating

6248 Ratings

Rating

8120 Ratings

Compatibility

Requires iOS 7.0 or later. Compatible with iPhone, iPad, and iPod touch.

Compatibility

Requires iOS 9.0 or later. Compatible with iPhone, iPad, and iPod touch.

Color Account view Analysis Stats

Blue - trust List view calendar view ($$) cash flow, category, summary, net worth. (line graph, list, pi-chart, bar graph)

Spending

icon categories, customizable in many different icon. (although, no visual data showing)

Color Account view Analysis Stats Spending

pink and orange – excitement and friendly card view None ($$) pi-chart & bar graph categories (shopping, online services, transfer, taxes and fee, etc customizable)

Budget Bills Currency Passcode Export files Sign in Sync

cash, charity, education only 3 items customizable icon one selectable 4 digit # CSV and PDF Not required controllable, auto sync available

Budget Bills Currency Passcode Export files Sign in

none none can not manage bills no selection 4digit # none required

Sync

not controllable

The expense is more likely to have diverse features that can help users who want to have multi-task in one app. Although navigatoin seems to be hard to understand at first, but need multiple trials to figure it out.

Prosper Daily is more likely to be simple, easy to look at when few tasks are willing to be done by the users. Although because it is simple, its way too simple that they only manage account, but can’t do anything else with it while user is already entering their actual bank account information

CARD SORTING

Information Architecture

PRESS RELEASE This is the Money App you want! Manage & make a payment of all banks account in one app.

Do all financial management with one app without wasting your time on accessing each bank apps and keep track on your bills and spending.

You can easily input and manage your accounts. There are many different features such as track your account, track your bills, multiple currencies & language, export the all analytic datas, and etc. Track your account due to all your account will display in simple design where you can control separately or all together. Track your bills to customize the list of bills and make sure you will never forget by our reminding alert system with tracking on your bill. Multiple currency & languages for those who might not only using currency in dollars but different! We offer multiple language and currency that you can use any bank account from the world. Also, See your spending by customized category. Simple visualization analytics of bills including easy comparison on the expenses, incomes, and total.

When you have to download each of all the banks app or two different thrid party app to manage and bills it is very itrritating! Although our app ONE has solution to your problem. You don’t need to download several apps nor two different apps to pay or manage your bank accounts and bills. We are the solution to you by downloading ONE app.

“ We are here for you to solve your problem of managing so many differnt bank apps and thrid party app!”

- by Bank One company All you gotta do is log in once for your banks account and choose any account you want to manage or pay. Easy steps easy navigation.

Got me back into financial security - by Kfrugle

“Get rid of all the bank app and use one for multiple!”

Useful - and great customer service!

- by Jakeboi125

“Much faster, easier, and no irritation in accessing each bank app!”

If downloading many different bank apps and complex navigation system irritate you, this is the right app you will be using for the last.

Many different unique features will give you more opportunities for your easy task.

We are a team who cares about you and friendly to our customers. If you have any problems or suggestions, please send a email to ONE@OinkyJinju.com, you’ll get the response in a short time.

FEATURE PRIORITIZATION

USER JOURNEY MAPPING

WIREFRAME

MOBILE HIGH FIDELITY

TABLET HIGH FIDELITY

ONBOARDING

USER TESTING DATA ANALYSIS + RESULTS All of the user testings done in face to face. Since it is a first mobile prototype, I met a conflict of what kind of questions can improve the product in the future. The questions I started with was -What is the first impression you got when you started the app?

-How do you find yourself-using this app in your daily life?

-What is the most hate and liked features and design you have and please explain why.

-If you could redesign what part would you redesign and explain why -in the scale of 1 to 10 do you think the information is enough showing for your purpose of using the app?

- in the scale of 1 to 10 how much visualized information do you want to see on the app ( differ from the desktop and tablet version)

Did you like the concept and idea of this app?

Yes

No

Did you understood why expense and income bar had two different opacity?

Yes

No

Total of six testers tested and gave feedback on the prototype of ONE. All six of the tester showed positivity of using ONE app and was willing to try all features through the test. Also, during the trial all of the users wanted to see all features and had a curiosity of every feature I added to the app, which is good in the sense of at least it was successful to make the users wanted to know more about the app.

From the conflict, I met during the process was the expense and income bar on the “My account.� was seems to be too much if the explanation was added to the page or having no explanation seemed clean and nice, but half of the tester was confused and did not understand what it was. Those who did not understand had no experience in finance managing app and those who understood what it stands for knew what the function of the bar was. In the future I am willing to take more time and figure out the solution on the bar problem since it seems to be the most conflict the tester had.

MARVEL (PROTOTYPE)

https://marvelapp.com/32951i4/screen/17366693

RETROSPECTIVE 1. What was most challenging about creating an original product concept? What part of this the project did you enjoy most?

It was very challenging to create an app that I have never used before and no relation from the background and dealing with information to visualize it right to make sure users can understand and adapt quickly to their task. Although it was very fun because it was challenging and creating everything starting from the bottom basic information, graphic designs, etc for. app. I would love to do more assignment like this if I had enough knowledge to complete this project that can deliver to the real world!

2. Describe the differences in your approach to designing for desktop and designing for mobile. What were the similarities? What were the differences?

The similarities of designing for desktop and mobile is that it must have same information appearing no matter what and the theme and style of the web and mobile must stay the same. Although, the way the contents and information are organized was different, the navigation system was much simpler in mobile than desktop, and visualized information was presented differently in size, and some of the features could be shown more on the desktop than mobile.

3. What new challenges did you face when prototyping and testing your mobile product? How did you overcome them?

Visualization of data was the challenge I face while creating an app and it became a challenge again in prototyping and testing for the mobile. It faced a conflict in balancing visualized information, Some of the testers liked by having less explanation on the actual app and have it on onboarding, but some wanted to see what the visualized information stands for with detailed information on the app it self with the explanation on onboarding. So it was hard to balance what is enough for both groups of the tester. I found the solution by revisualizing data with one or two more information that is considered as necessary for both groups and took out the others and presented as its optional choice of seeing on the app.

4. Between designing for desktop and mobile, which do you prefer? Why? I think it depends on what kind of product it is, if I am creating data visualization app I would prefer to do on a desktop since it requires to show a lot of information and tasks to the users. If its a product that does not require a lot of information or navigation, would prefer to do on mobile since it is simple and easy to organize with finished feeling on the product.

5. For this project, you had to simultaneously focus on original concept, functionality, and aesthetic. How did you juggle those responsibilities? Which were your strengths? Which can you improve on, and how will you work on it in future projects?

I think my strength was the aesthetic and concept, but weakness seems to be appeared on functionality. Some of the functions ended up not having detailed explanations in functions that confuse users and myself during the process. Thus, building a robust and more accurate information architecture can improve in the future project.