Debby has emerged from the lack of high-quality apps in the niche market of debt management apps. It's an ongoing side project I am working on with a friend of mine. Debby is the update to woy, an app we developed 2 years ago.
A FEW FACTS ABOUT WOY
Two years ago, my friend Lucas and I had the idea to start making apps as side projects. Since he knew how to code in Swift and I started to work towards being a UI / UX designer, it made perfect sense to work together. Woy was the first project, we decided to realise. A debt tracking app, that was better, easier to use and more pleasant to the eye, than other options available.
We designed and developed for woy and published it on the App Store. Woy experienced a fair amount of traffic, with a total amount of about 10,000 downloads. With the four main markets being Germany (56%), China (26%), the USA (7.1%) and Russia (3.4%).
We thought about updating and redesigning woy for a long time. Now, after a long pause, Lucas and I started working on apps again. Since the reception of woy was actually pretty good, we wanted the update to be our first project, after two years.
SO WHATS WRONG WITH WOY? A LOT
In retrospect we noticed a ton of mistakes and things we made, that just could have been done better. Of course our skillset also improved over the two years, since we released woy. One big mistake we, or specifically I, did two years ago, was to immediately start styling the app instead of working out a solid flow. Of course, we had a rough idea and concept but it was not really worked out. Therefore the UX of Debby suffered from it. Because we did not first finalise a flow, we redesigned the app 3 times within the development phase, which slowed down the process of developing the app a lot.
WHAT IMPROVED? — THE WORKFLOW AND MAKING OF DEBBY
For the update of woy, we wanted to start anew. Design and develop the app from scratch. Since we realised our past mistakes, we learned from them and avoided doing the same ones.
We started by working out a complete list of tasks Debby had to perform. We also took a lot of user feedback, we collected over the two years into consideration. When our feature list was completed, I started making first wireframe sketches. At the same time Lucas made a rough prototype out of those wireframes. Once the prototype was ready, we had a great way, to test out if the flow and layout made sense.
We worked through multiple iterations of our flow until we found one, that would be intuitive and clearly arranged. Of course, we made a few tweaks along the way, but it was not as bad as with woy. Once the flow was set, I began styling the app.
I chose the five colours below for Debbys theme:
A dark but still pastel blue color (#1F7A8C) as the main accent color.
A lilac black (#241623) as a text color to match the blue tone of the accents.
A yellowish white (#FAFAF9) as the background color, for good contrast with the lilac black text and blue accents.
A pastel red (#DA5A63) and a pastel green (#62BE77) for the positive and negative amount labels. Both colours match perfectly with the white background and the black text.
I designed the app with the atomic design method and thus creating a design system for Debby and potential future apps.
Let's start with typography. I chose to use Source Sans Pro.
It is a very nice and clean, but still traditional, open source sans serif typeface with 12 different weights. I wanted to use this typeface in Debby, because the app should emit a professional and clean look, but still alive and not sterile. In my opinion Source Sans Pro fits this perfectly. Since we also localise our app in russian language it's a good bonus, that Source Sans Pro supports the cyrillic alphabet.
We use 4 weights and 7 different font sizes in the app. This makes for a total of 15 different font styles in our use.
As for UI atoms, we have 23 icons, four button types, a text input with two states and two list items.
FLOW & Features
To be honest, working out the flow and features for Debby was hard.