Numbers Made Beautiful
UI/UX design techniques to guide mobile app development.
For my project, Kunance, the plan called for a mobile app that was clean, intuitive, and more importantly one that avoids data overload for the user. The user (a homebuyer in our case) should easily understand their next steps once the outcome is presented.
We had to deal with numbers — lot’s of them. There are two main requirements to fulfill:
- Several data entry field’s to capture user data.
- Charts to visually indicate to the user their personal outcome.
The following are the design techniques we used to build the app.
White background
Having a white background provided a lot of freedom in choosing color palettes and allowing for text, numbers, and charts to be in focus.
It’s the cleanest way to make the user feel at ease.
Forms with visual cues
It’s boring to enter data on any form. They are plain and dull.
For a better user experience we used three cues to guide the user:
- Description of the field above the text box.
- Helper placeholder text within the text box.
- A relevant image that acts as a visual guide.
Once you try this technique it may be hard to go back to just a plain old data entry form.
Switches to automatically fill-in default values
The typical user didn’t want to calculate their monthly costs such as transportation and healthcare — they would much rather use a predetermined value.
By using a toggle switch we gave the users an option to use a predetermined value if they so choose.
Dynamic menu
We wanted the menu to match the current state of the app at all times to provide a consistent user experience.
Colored icons and black text signified next steps. Greyed out icons showcase what the app has to offer and what could be unlocked.
Most apps today have a static menu but if your app has changing states I would recommend investing in a dynamic menu to set yourself apart.
Flat UI colors
This is the most frequented website for me during the project. The color palette is limited but is a good combination to work with.
The entire set of icons to charts were created using this color palette.
Common color for links and buttons
The Apple HIG recommends to use a common color for links and buttons and we did just that.
By using the same color throughout the app we trained the user to always associate blue to a link.
Choose a color for buttons and links very thoughtfully as you won’t be able to reuse that elsewhere.
The legend
We used color and large font text for the main data display to also act as a legend.
The approach is minimalist but there is some potential to cause some confusion in new users.
Minimalist branding within the app
Branding was an integral part of the app to cater to realtors but we wanted to avoid blatant advertising.
We added a simple contact button on the main dashboard and in the menu. The dashboard button calls out the realtor’s first name giving it a personal touch.
Clicking either of the buttons would lead the user to a dedicated screen where they can either call, text, or email the realtor.
The realtor database is stored on Parse providing a consistent branding experience for a user on any device.
Designed for a larger screen — fitted to a small one
One of the toughest challenges was how to fit multiple charts and data entry fields across two small screens (3.5" and 4").
I designed for the larger screen first and tweaked it to fit to a smaller one.
Why? Analytic data from Mixpanel Trends was used to determine what should be done.
We realized that the market share will trend towards the larger display with time.
For the forms we used Auto Layout on the UIScrollView and flashed the scroll bar when loading the view. Charts were resized programmatically.
It took a significant amount of time and iterations but we were able to maintain the white space and a similar user experience across both screens.
The end result
It was a very challenging design experience but in the end we were able to release the app given the short time constraints.
Is this the best we can do? No.
Can we improve it further? Most definitely.
There are very few apps that showcase and represent numerical data well and I hope my experiences help your cause.
The challenge remains — provide a consistent & intuitive user experience across multiple display sizes.
Special thanks to customers, friends, and designers at the San Jose User Experience Meetup group without whom the current design of the app would not have been possible.
