Spark Camera on iOS (and circles on your interface)

Spark Camera is free on the iOS App Store for a while, so Charlie suggested that I download the app since it was really pretty for a video recorder+editor. I’m not used to taking videos, more less editing them, so I don’t think I did pretty well compared to Charlie’s tests.

It’s interesting because it seems like circles are slowly becoming more common in mobile UI (thinking about Paper’s undo function) and there are  cases where it works and it makes sense. Spark Camera also uses more gesture-based actions such as sliding to move from one screen to another, or for menus, and at first I would miss some things, but playing around with it twice I think gave me a good idea on how to do things.

Attractive UIs really help getting word out about your app. :P It’s actually very simple, and the videos filters are lovely (reminds me of Path filters).

Here are some screenshots of the app:

UI design: donation form design done right

While I was looking for an organization to donate to, so I could help in some way families who have been devastated by the typhoon. There was one site that stood out from those that I’ve looked at (which aren’t many, to be honest): Unicef (PH)’s donate page.

Most sites that would ask for money look like this: you have a simple form that asks for the amount you want to give, sometimes options for specific campaigns, method of payment, etc.

Red Cross donation page screenshot

 

I know it’s Red Cross and is probably trust-worthy, but I could imagine some kind of misappropriation of funds. What if????

Unicef’s form, however, builds reassurance or trust. It shows me where my money will go or what exactly it will be spent on, which is especially helpful when you have a corrupt government and you’re just bred to distrust.

Unicef Donation page screenshot

 

The photos are also a nice touch to show me what exactly I’m donating with my money.

Not that I don’t trust Red Cross, but there are a couple of other sites I have never heard of, nor have known people affiliated with them that would vouch for trustworthiness. The Unicef form is definitely a good example of where to start when it comes to designing for emotion.

All I really wanted to do was to build stuff

So I was cleaning up one of my domains today and decided to check out one of my old projects: ZAGGER. It’s a CMS I made for my friends’ original table-top game. I was really proud of it when I started coding it in 2011, since it was my own way of learning some PHP+mySQL stuff. There was a point wherein I had a job interview as a mobile designer (which I failed, btw), and they asked me if there was any project I wanted to show them or that I’m proud of and this was it! 

This project wasn’t going to revolutionize the app world. The only problem I was solving was the problem of paper, and how some people either (1) forget to bring their piece of paper with their character’s stats and (2) lose their stats paper. We usually played at Eat (behind Katipunan) before, and it always had internet, so having a site to keep everyone’s stats made sense. 

I wasn’t gonna make money. I just wanted to make my friends’ lives easier when we play the Zombie Apocalypse Game (ZAG). 

image

I stopped developing it for a couple of reasons: 

  1. I became really busy.
  2. We stopped playing the Zombie Apocalypse Game.
  3. I forgot my own username and password. 
  4. The forgot-password page never worked before.

For some reason, I tried retrieving my password today and it worked! AND I GOT TO LOG IN. AND I’M BEGINNING TO CHERISH THE MEMORIES.

If anything, it was one of my first exercises in UI design. 

image

After logging in, you get redirected to the Dashboard. The header of the Stat Sheet is made of click-to-edit input boxes, to make it easy for anyone to update their stats in the middle of the game. 

Since this was a table-top game, basically the dashboard should be open while you’re playing. So for the stat changes, such as HP or immunity or hunger or anything, the plus and minus buttons are clickable. They’re scattered throughout, even on the tabs, like with the Skill Points. 

image

For the tabs, I just used PHP and Ajax since I had no knowledge of other languages at that time. It didn’t even use hash yet. 

image

There were a few modal windows, but the other forms had buttons adding rows of input boxes. 

I also enjoyed designing the flow of the Registration. There aren’t any illustrations or anything since I was focused on learning how to code the thing. But I tried to make the registration as fun-sounding as possible, and also friendly and welcoming.

I used javascript/jQuery for simple things like real-time updates on the page when you type in your name for the first time.

Even if there isn’t any illustration of a character, I think the tone of the intro headers sound pretty friendly.

It was fun. It was great. I was working at a corporate company when I was developing this, and during that time I’d work on it (since I was using my personal laptop at work) whenever I didn’t have any assigned tasks. It always made me feel excited that I often wished I didn’t have official work stuff so I could finish this.

Seeing ZAG again just reminded me of what I really enjoy: building stuff. I’ve never finished ZAG, and so many things happened among my friends that Emile is making a new game now. I could do this again, maybe try it on Rails now. I have no knowledge when it comes to securing this site, and stuff like that. I just wanted to make my friends’ lives easier and maybe more fun. It’s not much, but I enjoyed doing it, and I want to keep doing it.

I want to keep building stuff. 

Dashboards

I’ve been working on dashboards. Not very often, but I’ve had a few projects, and I usually start out feeling lost and confused about where to start.

I recently signed up at froont.com to check out their responsive-making tools and was greeted with this pretty simple dashboard.

Damn, I really need to work on my design skills more. When I try to do something minimally, it usually just looks boring. :(

Why SMART’s “re-design” of the User Accounts page has a horrible UI

Charlie asked me how I liked the new design of SMART’s User Account Page, and I said it was pretty bad. It was one of those examples of “style over function” because even if it looks neater than the old version, my experience as a customer was worse than before.

I only ever log in to check my balance whenever I have to pay my bill. Charlie logs in to pay his bill from the Bancnet link on the site. To be honest, I can’t remember how it used to look like, but I’m pretty sure I had an easier time looking for my bills and paying with the old layout than the new one.

To illustrate — this is the screen that I see once I’ve selected the account to “manage”:

image

I saw my outstanding balance, but a few days ago I got a weird “0 balance” email from SMART, so I wanted to first check my old billing statements to find out the last bill I’ve paid. This is the first link I try to click: image

Apparently, it doesn’t work. My clicks do nothing, and the page I’m at is the entire “Account Balance” page. There was a “View bill details” link there below my “Outstanding Balance” which I didn’t really notice at first, so I decide to click it thinking it will open up the PDF copy of my current balance’s billing statement.

image

And then it brings me to:

image

The billing page.

Well, ok, I still can’t equate “View bill details” = list of all billing statements. It made more sense in my head that it was the billing statement that was related to my Outstanding Balance.

And so, apparently the Billing Page is under “Manage Services” instead of “Account Balance”.

I’m sure I’m not the only one who would assume I’ll find my statements under “Account Balance.” It is, after all, related to accounts and money. This is obviously a bad case of Information Architecture and I wonder if SMART’s design team tested this particular layout on any human being. If they really wanted to push it, how hard was it to put a “Billing Statements” button from the Account Balance page because it really sounds like Balances = Money = Bills!

What else could they have “RE-DESIGNED”? Why not add a “Paid” status (or unpaid) or even show the total balance in each row of the billing statements? I had to assume it was the most recent one, but if I really wanted to check if my billing statement had the same balance as the one on the Account Balance page, I must open the PDF.

Likewise, the ATM link was under “Bills Payment”, which Charlie couldn’t find initially because he couldn’t associate paying bills with “Manage Services”

image

Whatever the internal name SMART has for these billing things are definitely not what their customers would assume or think of. “Manage Services”? Sounds like it’s where it says I’m subscribed to their network still, or the length of my contract, or if I’ll be terminating my contract, etc etc.

If they only invested a little time into their info architecture, it would have saved me a good few minutes.