The Blogs and WalletSplit
Mar 04 2021
You might want to prepare some snacks before reading, just saying :))
I was never a blog person. I still don't think I am. In fact, the amount of time it took me to write and double-check the last blog cannot be overlooked to say the least. Was it worth it though? Idk.
The last blog was really to show the "history" of Math Galactica — the largest project I've ever done. There were just so many things I want out there. It was so exciting. It, like a lot of things I've experienced, led me to think even further into what this could be.
I thought about what I wanted to share and the intentions behind the blogs, and after about a month into working on a little project called WalletSplit, I think I have it figured out.
Alright, hear this. I want my blog posts to be informative, inspiring, and just fully expressive. Here's why:
- Informative
You see, I mostly learn about things I find interesting or relevant. There are things I think about and make happen, which had real benefits in one way or the other in what I do. As much as I want to share these in-depth details, there's a lot of very technical things, and there's bound to be 98% of people who can explain terminologies and lecture people better than I ever can.
That doesn't mean I won't be sharing what I think is relevant however, you'll see (read) what I mean.
- Inspiring
Ahh yes, a cliché. I don't see how my works or any of my actions could inspire others, I guess it all comes from recognition and achievements. My turning point was really the WWDC20 Swift Student Challenge win, where a small project that I thought wouldn't go anywhere, actually did just that. Huh, maybe I'll share more about that project someday.
I think if there's something to take away from the blogs, it's that the process don't lie. Bonus points for you if you find any part of what I write "inspiring".
- Expressive
If you know me personally, you'd know I'm not much of an expressive person on the outside. Add that with the fact that I type better than I talk, you (should) get more genuine expressions in a form that's easier to understand.
There is, however, another thing I'd like to address, and that's the image quality of a lot of the assets on this site. You most probably have seen quite blurry pictures here on this blog, and as much as it pains me to see it the same way you do, it is something that I needed to do.
The problem arose when I deployed the last blog I wrote about 2 months ago. It was full of images, and rightfully so. The thing is, those images took so long to load, that it wouldn't make sense at all to wait. So I did the best thing I know how to, and that is compressing. The results were astounding (if you compare it to the full blown images). Everything loaded pretty swiftly, and all is pretty good I'd say.
It's just unfortunate I guess, but I think it's a fair trade-off. You don't spend as much time trying to load images, and you get to enjoy more time in your day. Win-win.
Introducing WalletSplit, a fast and simple app that allows the user to split bills among a group. But you already know that, assuming you've seen the dedicated page for WalletSplit.
In here, I want to talk a bit about the inspiration, and really, just my journey around building it from scratch.
So after my time at the Apple Developer Academy had ended, I was super pumped to really start doing something. A personal goal of mine in the academy was to do a personal project, which would ultimately end up being an app, before my time in the academy ended. That didn't happen, but it was quite a fruitful ending, as we worked really hard and released Math Galactica to the wild. Going back to the personal project, I think it happened around the start of January, where me and a couple of friends ended up finding ourselves in a situation where it would take us forever to calculate how much each of us needed to pay for our food. Then it happened. I was motivated.
Planning didn't really take a long while. I knew what I wanted as a consumer, and thought that there were quite a few things I can learn technically. Since I've had an idea of what needed to be done, I just went in head first.
Now you might be thinking, what happened to research and design? I think this is one of those mistakes you make underestimating the complexity of something. I thought, it's not like I'm a stranger to building apps, I knew I could do it. If you ask me if I regret not preparing fully before I started developing, I would give you a firm no.
Planning was pretty straightforward, like stated earlier, I had an idea, I know what I wanted in this app, and there's no harm in starting early right?
I started to think about how it should look. I also thought about how the process should work. These 2 thoughts happened in parallel. I just wanted to see how it'll look in my hands.
Math Galactica really set the base for me when it comes to scalability and sustainability of code. Prior to that project, I've learned more about code design patterns, which I knew where pretty important when it comes to the workspace. So anyways, during the development of Math Galactica, I thought I'd be sharing coding load with one or two more person, and I started coding knowing that I have to make it as readable and scalable as it needs to be. I started with a lot of extensions, making sure we get consistent font sizes and element sizes. And that's a little like what I did here for WalletSplit.
Unlike Math Galactica, this isn't a game, rather, this is an app that should be accessible by just about anyone. The idea is the same, but the execution differs slightly, you get the point.
I think it took me about 3 days to really get the look right, and this is for both Groups and People.
One huge thing I got to explore with this project is relationships in CoreData. It's not terribly hard to understand CoreData, but touching on relationships after finishing my Computer Science degree years ago required a bit of extra learning. What I learned from the ~4 days of researching, trying, and implementing, is that CoreData (somewhat) treats linked entities as, well, another kind of attribute it stores.
Say you have an attribute called "name" stored in "group" entity, and you have another entity called "person", with an attribute "name" as well. Calling it is as simple as calling the name of the aforementioned "name", so something like: "group.person" should give you the array of persons within the group. And to get the name of the persons inside: "group.person.name". Of course, this is overly simplified and does not include code for specifically looking up the arrays, so I urge you to explore this yourself, it's quite rewarding.
TL;DR, Coding style is somewhat the same as Math Galactica, I designed as I code, and I learned about a lot of things, including money :)
There's a reason why I talk about the design after development, rather than the opposite. After reading the development part, you should probably have grasped how I approach design. But in this portion, I want to cover a lot more about the intentions of the design and ultimately, the logo.
Intentions and Process
Most of what you see on screen are intentional, unless they don't look as good to you.
I want to start with the screen you're most likely going to see the most, the Groups' section.
It's a rather simple look if you ask me. By categorizing the whole process by group, users can easily select a group they normally hang out or pay bills with, and just easily go from there. The collage of these group boxes shows more information than a traditional list in this context, and I think it's overall more inviting to press.
The things that go inside these boxes are super important. You want the right kind of information, but you really don't want to overwhelm the user in just one box. So what's important here? The first thing you're going to see is probably the roster image, which is the selection of up to 5 people's images, and for a very good reason. You see, colours, images, and shapes normally takes precedence in our brain, and it is super important to have this executed right. The rest are probably quite obvious, so let's move on.
The People's tab is quite similar to that of Group, and again, the same intentions apply. Images and names are super important information (and are literally the only worded information taken here) to just have a glance at before a decision is made. Now I'm no UX researcher or anything, so don't take my word for it. Do your own research.
Before I talk about WalletSplit's "design language", I thought I'd talk a bit about the colours. I think they have a place in this app, I really do. Some might think it's pretty useless, especially since there's really not much of a use, and to some degree, I agree. At first, it was straight up meant for just customizable fun. After a bit more thinking, I believed it had more potential. I can see people using it as a way to tag a person as, say, a family member, a close friend, or even people you deem "not very keen on paying back". And who knows, there might be more as I explore ways to make use of this wonderful (colourful) feature. Not to mention, you can even sort people by colours.
I feel very strongly about the design language I've implemented here. It's bold, declarative, and simple. I would add the word "obvious", but what do I know.
Using bold titles to provide context for contents below it allows sections to clearly state its bounds, and provide understanding of what section does what. Oh, and the gray rounded boxes beneath each section's item? Yeah, that helps with visual clarity, I think.
Making a static element feel a part of a bigger one might feel tough at times, and might show a disconnect between elements. There's a lot of ways to connect 2 or more different elements together, and with this part, I feel this is the best way to do it.
Could this part be an accessibility-centric thing? You decide. It's not intentional though. I think this part could be improved through more UX research and user testing, but this is the design language I went with, so idk. Oh, and, shadows. Gives it the 3D vibe. Nice.
Drafts and Products
While thinking about how the main feature should work, there were a couple of things that needed checking before the whole product is shipped. I wanted to make sure the experience of splitting bills were just right and natural enough. And in order to fully cater to the different ways people expect their devices to work, an alternate version of the splitting screen was made.
Now I know I'm no Picasso, but I hope you understand what I'm trying to go with here. Also, #DrawnoniPhone.
After a bit of trial and error, along with countless hours of coding, I ended up with 2 fully working views, all selectable by a single toggle.
This view, in my opinion, is super plain and straightforward. It shows the information you need, and gives you the controls where you expect. You know what they say, if it looks boring, it probably is. Fun fact for you, this was originally the Alternate view, but after some user testing, I found out that most people should be using this. Including me.
This is a fun one. It's actually my favourite way of splitting bills. Featuring a person-to-item style of splitting, users can both press and drag people to items, while also allowing for more than one portion per person on an item. It does require some kind of learning, and I don't think I have executed this properly, hence, the not-main view.
Logo
The logo really came out of nowhere. I wanted a wallet, but more than the wallet itself, I wanted a very simple-looking logo, those that literally only have very few lines, and not even complete shapes at that. While it didn't really translate to WalletSplit's logo being relatively more complicated, I'd say it looked pretty good. Or pretty pretty, you decide.
The wallet being incomplete, for me, is really what the app is about. Not incomplete per se, but more towards how transparent the app is. Notice how the things inside the wallet sticks out of the incomplete part, while not really pushing themselves out of the wallet. Also the app might be a bit incomplete on launch, but who's looking.
The receipt, or what a lot of people like to call a contacts card, is kind of like the foundation of the app. Creating personalised receipts for those individuals in groups that's looking to pay for their part (or not), which you can easily send. Not very interesting, moving on.
The money and card. It was kind of a no brainer at the time of design. Do I have to explain this part?
After looking at the logo, you might think the wallet itself looks weird. I know where that came from. So, as a challenge, if you are able to tell me the reason I put up the horizontal line on the bottom right part of the wallet, I'll send you a code for premium! First person to give me the correct answer gets it, and people who already knew from me are NOT eligible for this. I'll update this blog when it's taken.
EDIT Congrats JY, you've it all figured out! So apparently, the wallet itself is shaped as a C and a T, with the T being the weird horizontal stick. And that, my friends, completes my 'well-disguised' personal branding in my projects.
Logo Variety
Ahh yes, easily my favourite part of taking on this project. Personally, I think it's SUPER cool to not only deliver an expression through one single image, but having the ability to really let your users choose, now that's a firestarter!
I'd like to talk about some of the different takes on the logo.
This was probably the hardest one I've ever made. I wanted it to look awfully close to a real wallet, and not so surprisingly, it took me 3 days to finish the logo. But don't worry, it didn't take the 3 full days. This was an insane learning experience, as I've learned to use a lot of the tools I normally wouldn't take a second glance at. And no, I didn't use Photoshop.
This is a personal favourite of mine. It was such an afterthought, I was surprised it look so clean. Initially, I wanted an X-Ray kind of design, but after a bit of researching, I decided not to go with that.
Internally, this one is known as yellowOrange. Why? I guess I'm just bad at naming, I mean, read the app's name again. The more I think about the app's name, the more I think about better alternatives to "WalletSplit". Anyways, I wanted to try something unique. I wanted the borders gone, and overall just a flatter design. And I think this went pretty well. Close 2nd for me.
I had this brilliant idea of pushing out teasers for what I would consider a rather underwhelming product, but knowing that I worked on this for longer than I thought I would, I'd say it's only fair to give it some marketing.
Get this, I made 4 posters highlighting the 4 different elements in the logo and shared it on social media. I was afraid that it'll draw unnecessary expectations, so it went a bit more privately. I'd say it went pretty well, because people weren't getting the hints. In fact, it went too well, I really don't think anyone got it at all.
Here are the 4 posters, you tell me.
There's really not much marketing done, I guess this was just a passion thing.
Do I expect to make millions from this? No, obviously not. There are a few ways to go about "making money" from an app, and I think the choice here is obvious. But what about the "free tier"? How do I decide on what to limit? Should I even place a limit?
So what do I do? Learning from my gaming days, I wanted this app to be free, with a very (and I mean VERY) optional paid option. I want this app to do whatever you think this app does. No limits on groups, people, transactions, no nothing. I've spent so much time building this app, I thought, I might as well have some fun making it a bit more customizable, and hopefully in turn, making it more useful. So, Premium.
Premium unlocks a couple of special customisability features, namely changing of mentioned App Icons, and special colour tags for people.
I wanted it to be a really optional upgrade for users of the app. Enjoyed using it? A tip goes a long way. Don't think it's worth your money? A review or feedback helps me a ton. I hope people enjoy the honest monetisation of WalletSplit as much I believe in it.
And no, I don't expect it to be a profitable product.
Of course not everything made it into the final product. Enjoy these screenshots as we poke fun at them to make them feel bad. And yes, I have a lot of memes stored on my phone, so them ending up on my screenshots shouldn't be a surprise to anyone.
Aaaaand that's it! I hope you learned something, or at least know what went behind this app. I appreciate you being here and reading, and if you have not already tried WalletSplit, please do so! Let me know how it went for you and what you think might need improving.
Thhhhhhhhh-ank you for reading!