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:
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).
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
CalculatorTextBoxthat 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:
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.
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!
Here are all my bookmarks currently under my Windows Phone folder:
- Centwise | Windows Phone Apps+Games Store (United States)
- The art of simplicity: Caliburn.Micro: Design time support
- Elegant Code � WPF String.Format in XAML with the StringFormat attribute
- Processing Sequences of Asynchronous Operations with Tasks - .NET Parallel Programming - Site Home - MSDN Blogs
- Implementing Windows Phone 7 DataTemplateSelector and CustomDataTemplateSelector | WindowsPhoneGeek
- Jeff Wilcox Creating a global ProgressIndicator experience using the Windows Phone 7.1 SDK Beta 2
- Daniel Vaughan | Binding the WP7 ProgressIndicator in XAML
- Adding/Removing AppBar Buttons on the fly � Cyberherbalist's Blog
- Silverlight BringIntoView() extension method (with OnGotFocus behavior) - Josh Schwartzberg high-fives the CLR
- Working with GIF images in Windows Phone - Jaime Rodriguez - Site Home - MSDN Blogs
- WP7 Context Menus with Caliburn Micro - Compiled Experience - Freelance Windows 8 and Windows Phone Application Development
- Caliburn Micro: WPF, Silverlight, WP7 and WinRT/Metro made easy. - Home
- Silverlight ListBox Add and Remove Animations
- Using async/await without .NET Framework 4.5 - BCL Team Blog - Site Home - MSDN Blogs
- Metro In Motion Part #4 Tilt Effect | Colin Eberhardt's Technology Adventures
- Task Exception Handling in .NET 4.5 - .NET Parallel Programming - Site Home - MSDN Blogs
- good way to cancel async method
- How to: Cancel a Task and Its Children
- Cancellation in Managed Threads
- Task Cancellation
- Fiddler and the Windows Phone 7 Emulator - Fiddler Web Debugger - Site Home - MSDN Blogs
- Silverlight 3.0 RTW: The CollectionViewSource
- How to: Search for a Contact and get Contact Picture in Windows Phone | WindowsPhoneGeek
- Windows Phone 7 - Part #3: Understanding navigation
- Redirecting an initial navigation - Peter Torr's Blog - Site Home - MSDN Blogs
- Clarity on Windows Phone 7
- How to: Encrypt Data in a Windows Phone Application
- Windows Phone, Silverlight and WPF Multi-Touch Manipulations - Home
- Dynamic Layout and Transitions in Expression Blend 4
- Silverlight 4 Property Triggers | Clarity Blogs
- Expression Blend Samples - Home
- Jacob Gable: Silverlight 4 Property Triggers
- Loading Data when the User Scrolls to the End of a List in Windows Phone 7 - CodeProject
- Dynamic Layout and Transitions in Expression Blend 4 - Expression Blend and Design - Site Home - MSDN Blogs
- How to target multiple versions with your app for Windows Phone
- Tile design guidelines for Windows Phone
- Multi-resolution apps for Windows Phone 8
- Logging exceptions of Windows Phone applications to a central server with the help of FogBugz - CodeProject
- Creating Progress Dialog for WP7. - Alex Yakhnin's Blog - Site Home - MSDN Blogs
- How to fix the standard header of a pivot control using a style and how to fix - ge using the TitleControl � .NET App
- How to crash other WP7 applications? | Niko Vrdoljak's Blog
- WP7: Splitting Application to Multiple Assemblies when using Caliburn.Micro - Mikael Koskinen
- Background Agents - Part 1 of 3 - Peter Torr's Blog - Site Home - MSDN Blogs
- Oren Nachman � Talks
- Sterling NoSQL OODB for .NET 4.0, Silverlight 4 and 5, and Windows Phone 7 - Home
- MSDN Magazine: Windows Phone 7 - Sterling for Isolated Storage on Windows Phone 7
- Modern UI Icons
- Nicolas Humann | Save disk space with IsolatedStorageGZipFileStream
- Using Isolated Storage on the Phone
- Windows Phone 8: Critical Developer Practices for Delivering Outstanding Apps | Build 2012 | Channel 9
- � Wicked Wireframes: WP7 Vector UX Kit on Windows Phone 7
- Windows Phone 7 Wireframe Paper Sketching Template | Flickr - Photo Sharing!
- Jeff Wilcox Displaying static maps on the Windows Phone for performance and scenario wins
- Launchers and Choosers for Windows Phone
- People Hosting Open Office Hours
- iconmonstr - Free simple icons for your next project