Product Design, UI/UX Design, iOS Development
In collaboration with Matthew Lin
Winter 2017
818 app downloads since launch
5 star rating

A Redesign and iOS implementation of the 2nd version of Bill-Util: an iOS utilities App. Updated features include improved user experience, realtime currency API and slider UI components. App installs increased from ~50 downloads to 818 downloads as of 8/31/2017.

Matthew came to me for a redesign of the iOS App he built at PennApps XV, 2016. The original design and implementation of the App can be found on his submission on DevPost. During the redesign, several problems were identified:

1. The App lacks an overall visual guideline
2. The UITexfields are stacked together without careful UX thinkings
3. Redundant UI components in each view, the whole App utilizes UILabel, UITextfield, UIPicker, UIProgreeBar, UISwitch and UIButtons.

Since this App is a collection of daily utility applications, we have to rethink each individual view as a standalone project while keeping the above problems in mind. The following image is a screenshot of the original design Matthew implemented at PennApp.

When Matthew approached me with an idea of redesign, I started off suggesting him a new design of the App Icon. The old icon not only does not comply to the Apple HCI guidelines, but also not attentive to the visual details. Through communication I kept the primary color of green and the dollar sign, since it suggests App is money related. I carefully chose a secondary red-shade color as the secondary color to complement the logo. I then changed the aspect ratio of the dollar sign to be 2:1 and juxtaposed 3 dollar signs together with an opacity difference of 5%.

Since Matthew wanted to keep a playful experience with the app, I choose the following 2 fonts to achieve this idea. Avenir Next is a close sans-serif font to the iOS system font San Francisco, yet it adds more personalities to the user experience due to the horizontal stretch. Kaushan Script is a handwritten cursive font, which adds even more playfulness to the name Bill-Util, since Util is a Unix term for utility library.

Home Page
We modified the home page from a list layout to modular layout, having all features presented to the user with a icon indicating the highlight of each page. The previous prompt Matthew had on the top of the page "What would you like to do?" is both ambiguous and not concise, so we decided to completely give rid of it. With the new layout system, users will be able to see the app features without seeing the literal promopt.

Currency Convertor
The previous version had UIPicker view right above the UITextfield for user input. In the new design, we moved the textfield to be above the currency conversion results, with a button triggering a slide-up UIPicker from the bottom. This is much more intuitive for users to visualize the currency results and a nice way to hide the UIPicker view when it is not needed.

Tip Calculator
Instead of manually entering all the numeric inputs, is there a better way to interact with numbers? The solution I came up is UISlider. For small integers, you can really use the slider to pinpoint the numbers you want to select given a fixed range. Besides, you can configure the steps of a slider, so that the numeric input can fit better with the context. For example, with tips, people usually have an increment of 2% as the step. So when you're calculating tips, you wanted to see the number incrementing as 16%, 18%, 20%, etc. Sliders are also a good way to get rid of unnecessary steps and interactions. With UITextfield, users have to first click on the textfield, a keyboard pad will pop up from the bottom, then type in the desired values. Lastly, users still have to hide the keyboard in order to see the changes updated. All of these can be solved with UISlider, where you can use a visual guide instead of keyboard input. Plus you can see the changes without the obstruction of keyboard on the same view.

After we decided that UISlider is a good alternative to interact with a fixed range of integers, two more views were implemented with the same fashion.

Income Calculator
The last view is the income calculator, which you can use to compare the annual salary of two companies. In the original design, the whole screen was split into two parts with company A on the left and company B on the right. This really is a suboptimal solution, since mobile devices already have smaller dimensions, and splitting screen will further hamper the accessibility. The solution I came up is a page view, with two pages aligned horizontally and indicators at the bottom to suggest which view the user is on. This is a natural UI design for users, since on mobile devices people are already educated to interact with carousels and slideshow layouts. This way, not only the users have an non-obtrusive view of the screen, but also have the ability to switch context easily.

Final Results

App Store
818 app downloads since launch
5 star rating

App Store
Play Store

Find me on