Apr 11, 2013 8 min read Windows Phone

I've released my first Windows Phone app: Centwise

I'm excited to talk about my latest project that just went live a couple weeks ago: Centwise. Centwise is a Windows Phone 7 & 8 app client for a service that I use regularly, Splitwise.

You can download the app to your Windows Phone below:

What's Splitwise?

Splitwise is a web app that lets you manage IOUs and bill splitting. I use it day-to-day during outings with friends but mainly I use it to keep track of bills and household expenses between me, my fiancee, and our roommate. It's a great tool and they provide native apps for iOS and Android. When I started Centwise, they didn't have a WP app and I figured as an avid user of the service, my first app could be a Splitwise client.

I really want to thank the Splitwise team (Jon & Ryan!) for helping me out, answering questions, and for mentioning Centwise on their blog.

First app experience

I bought a HTC 8X when it was announced on Verizon day one. I knew I wanted to leave my old Droid Incredible in the dust and move on to greener pastures. Being a Microsoft stack guy, I figured Windows Phone would be good not only because I like the interface and experience but also because I could make some apps for the platform.

In the past, I've worked with WPF and XAML before, so learning the ins and outs of the pared-down Silverlight for Windows Phone wasn't too terrible but there were certainly roadblocks. I've tried to bookmark every article or post I came across that helped me out, which I'll share at the end. Coming from a primarily web-based focus to a native XAML/C# platform was certainly jarring and there were times I slammed my hands on the keyboard exclaiming, "THIS WOULD BE WAY EASIER IN CSS AND HTML!" Like making a transparent button, for example.

I hope to go more in detail with certain issues as well as share some tips and tricks I learned along my journey to building my first app. There can be a lot of crazy things you wouldn't know XAML can do if you didn't spend time deconstructing bigger open-source libraries (which I highly recommend, I often kept Phone Toolkit open alongside my own app to see how they built controls).

The beginnings

All apps have a beginning. Mine began on paper using the excellent paper templates provided by Michael Bach.

Here are the paper sketches I made that helped me form the screens for the app. I spent most of my time sketching the more complex pages, the ones that needed to do or show a lot of stuff but where I wanted to keep it as simple as possible.

I've found it helpful to do these types of sketches to help me visualize the UI. It also helps me see immediately whether or not my idea makes sense.

From there, I could start working on the XAML and the screens to put my ideas into the app. However, as you'll soon see, my first ideas usually weren't the best.

Optimizing the UX

If you look at the first image, you can see that my initial idea when creating expenses was to display a list of people to choose from. In fact, pre-1.0 that is exactly what I had done. The flow looked like this:

User specifies "Create an IOU"
User chooses other person or chooses from address book
User is shown IOU screen

This was pretty straightforward... after all, there are only 3 steps. But that was one step too many. It also ended up complicating my code quite a bit due to managing the back stack (i.e. what happens when a user cancels or hits 'Back').

In the final 1.0 release, I changed it to be easier and faster:

User chooses to create an IOU
User is shown screen and either a) the other person is already populated or b) user can tap the avatar placeholder to choose someone

That's just one example of a change I had made that was different from my first implementation.

If you take a look at the second set of sketches, you can see I drastically changed how the IOU (and other) screens were laid out.

Here are just some of the changes I made:

Instead of a button, I created a CalculatorTextBox that combines a calculator and amount textbox into one.

This was huge because it also greatly simplified the UI of the Divide a Bill screen

Moved the currency button to the appbar menu items because it's not something a user will typically use often.
Made the static arrow shown between avatars a button to easily swap people in case the user made a mistake

Easy but not simple

Someone wise once said:

Making things easy is hard.

That's been true with everything I've ever had the pleasure to work on. Easy is hard.

I didn't have any formal beta testers, mainly because the Windows Phone Dev Center didn't let me (sigh), but that didn't stop me from showing it to friends and family to have them test it out.

The core implementation of the app is pretty simple... it's all the extra work I had to put in to make the app simple that wasn't easy. Not only was it my first time trying to learn Windows Phone development, I also have a tendency to spend a lot of time on little things.

For example, let's consider the "people picker" functionality. When a user wants to choose people to add to the expense, there's more logic than simply "show the user's friends". The control actually does several things:

If the user adds an expense type in the context of a group, then the picker shows the people in that group first.
If the user divides a bill from the home screen, the picker shows available groups which:

Automatically adds all the people in that group to the bill
Sets the "filed in" value to the group they chose, regardless of the context the user was in (home screen vs. group)

Makes sure not to show people already added to the expense
Let's the user choose someone from the address book (but not for payments!)

I use this people picker anywhere I need to, including when creating a group. By reusing the same experience, the user never has to learn a new way of picking people.

There's just a ton of little things like that throughout the app that the user probably won't ever notice but I hope surfaces in the form of, "Hey, this is easy to use!". I didn't want the app to get in the way of the user doing whatever they needed to do.

I cannot count the amount of hours I've spent so far, although I tried to keep track at first but once I hit 60+ hours in less than a week, I stopped. Luckily, GitHub has a great visualization of how often I worked the app:

Commit Activity

Let me break it down for you: I am insane.

You can forgive me if I plan to take it a bit slower with updates. I was hoping to finish in time for the Next App Star challenge but unfortunately even spending countless hours during the week, the app just wasn't in a good state in time for that deadline.

What's next?

I hope to go into more technical detail around some of the things I did with my app at a later point. I was really excited to learn how to build a Windows Phone app and am very pleased with the result. I didn't build it expecting to make thousands of dollars; I'll be lucky (and happy) if I break $500 but making it a paid-for app motivates me as a single developer to keep the app up-to-date and full of useful features. I have personal projects and open projects that eat up time that I need to make sure I can support each one of them.

As far as what I have planned, you can keep tabs on CentwiseApp.com or follow Centwise on Twitter or Facebook. I hope to do a UI refresh soon and I have about 20+ enhancements to incrementally add. I already released the 1.1 update that added several new features, so that's a good start!

Resources

Here are all my bookmarks currently under my Windows Phone folder:

What's Splitwise?

First app experience

The beginnings

Optimizing the UX

Easy but not simple

What's next?

Resources

Enjoying these posts? Subscribe for more

You might also like...

Controlling Browser Permissions in Cypress End-to-End Tests

Storyflow: Using Storybook to Build a Better... Game Engine?

Role of Indexing in RavenDB vs. MongoDB and PostgreSQL

Frontend Masters Workshop: React Native Recap

Throttling Outgoing Requests in Node.js and .NET Core

Popular tags