Keren Gu's Picazón

Sharing and Scratching Itches Everywhere


Warmer – A Progress Update

(If you are new to Project SmartCart, get an intro here.)

As Techfair approaches each day, SmartCart needs to meet up to the expectation.

I have written many things I’ve learned about UI and UX, something I’ve never cared for before this project. Though the things I’ve learned and realized about UI are obvious to those with experience, this might be the same reason why I haven’t written about the backend of SmartCart, or about developing for Android.

So here is an overview of everything else about SmartCart.

Top Level Overview

As shown on the SmartCart Poster, SmartCart is comprised of 1) the cart, 2) interactive display, 3) barcode scanner, and 4) Square. The Square connects to the interactive display via the headphone jac; the barcode scanner (Motorola CS3070) communicates with the interactive display via blue tooth; the interactive display, in this prototype, is a Motorola Xoom tablet, running Android 4.1.2; and the interactive display will be mounted on the shopping cart.

The Android App

The work that I’ve been doing so far is developing the app that connects it all. ADT and Stack Overflow has made my life incredibly easy. In fact, I’ve been shamefully playing for most of this winter. The app consists of an Activity for each functionality, such as Find and Checkout. Then there is the SmarCart’s Model, which consists of User/Session model, and item model. Third, there is the database of items. Lastly, the UI, which is being handled in android’s /res. I wouldn’t call this MVC pattern exactly, but it’s about the same idea and it works.

Problems I’ve encountered

The main problems that stressed me are connecting the components of this project. There are a couple of connections: Tablet – Barcode Scanner, Tablet – Square, and Tablet – Cart.

Tablet – Barcode Scanner: Months ago, I purchased a cheap Barcode Scanner on Amazon that promised to work with computers. When I got it, it worked with Windows very quickly, but it would only work on OS X Lion and not Snow Leopard. Not a big deal. Then, one day, I realized… it can’t power itself. Tablets also don’t supply power externally. I didn’t have to try, I knew it wouldn’t connect to Xoom. While in China, I ordered CS3070, 10x the price of the previous Scanner. Will try it out next week, and it better work.

Tablet – Square: For some reason I thought integrating with Square would be trivial. Another thing that I left till (sort of) the end, and it turned out to fail me. With my limited connections, I was able to find a friend of a friend who works at Square. From that friend of a friend, I was able to get an advice from the expert, on prototyping. I found out that there is no integration available, at this time. Oh well. But by listening for mic-input, I will be able to detect card-swiping. I’m not going to write my own square register, but at the very least, I will be able to simulate the experience.

Tablet – Cart: I found a cart. I have the tablet. I imagine one will stay on top of the other.

At this point, most of the Mainland work has been done (implementing most of the features), and I’m excited to go back to the states next week to put things together. Failure at this point is not an option.

Dear readers of my terrible technical description, I’d love to hear your thoughts on my first real-world project, and how you would do things differently. Or if you would like to hear more.

(This post has not been proof read.)

Leave a comment

Lessons on UI

After my previous post, Bad UI is Bad UX, I spent some time studying the UI of apps and websites around me. I wish I could show you how bad my old UI actually was. (At some point, I’ll revert back to the old UI, and write a post with comparisons.) But for now, I want to share some very simple lessons that I learned.

Lesson 1, “sharp corners” doesn’t mean shitty, and “round corners” aren’t necessarily classy. Default android buttons and TextViews are rectangles, with sharp corners, where as iOS present you with round corners by default (so I heard). So I took a look at the apps that came with Android, the settings, Gmail, etc., they looked just fine and elegant with sharp edges. Better yet, the sharp and straight lines looked cleaner.

Lesson 2, Margins. Have margins, and that is all.

Lesson 3, color “families”? Colors have 3 components, and a 4th component for transparency. (Transparencies are nice.) When choosing colors on a color chart, there are 3 axis of movements: 2 on the shades, and 1 for picking the color. An easy practice that I found useful was selecting 1 shade, and then choose all app colors in that shade. It the UI will naturally look harmonious. I will never use @color/blue with @color/green again.

If you’ve got any UI tips, please share. Still learning.

OH! And for background, a friend suggested SubtlePatterns — it’s addictive!

Leave a comment

App Developing: Preserve The Great Singalong Moments

While watching the delayed-live-broadcast of The Voice finale, I had an Ah-Ha moment.

I got an idea for an app 😉

The Ah-Hah! Moment

But before I pitch my idea, I’ll give a sense of the setting: it was around bedtime in Beijing, and I just finished working for the day, in bed. I don’t follow the Voice or anything, but for the past week in China, there really isn’t anything on TV besides HBO and AXN, which plays TV shows like … the Voice, and very old CSI episodes.

So the show was building up the suspense for who’s going to become America’s next top… I mean, winner of the Voice, there were a lot of singing by the finalists, songs of different genre, and famous people like Bruno Mars were popping on and off the stage. Wait,

I need to add a crucial detail that led to my moment: before turning on the TV, I was doing something that’s not exactly my pre-bed ritual, but more of a celebratory act from the hard work I did… (It’s really hard to describe. It’s one of those things that you do, when… ) Okay fine, I’ll admit, I was solo Karaoke-ing with Tunewiki, on Spotify, in bed. It was like rewarding and relaxing myself.

Anyways, while watching the Voice, I was like, “man, I wish I could singalong to these songs, all of which I don’t know the lyrics to.”  I could, listen to the lyrics and google it. But I had already closed my laptop, and it takes so much energy and will power to open it again. Even if I had googled it, by the time I match the lyrics, the song would have been over! Not worth it.

I just wished that my phone could maybe listen to the song, and figure out the name (like that app, Shazam), and then google search the lyrics for me.

Okay, I suck at telling stories, but that was my AH-HAh moment. I know I kind of ruined it, but lets move on now.

The Idea

That idea up there, that is SO easy to make! (Can I make it? Probably. Probably not anytime soon. But it’s soo possible!)

I’m sure I’m not the first person to think of this, so I looked it up. I found Android Karaoke, which appears to have a terrible description of itself and its use. First, purple isn’t a People-color. It’s not classy. It’s weird to have the entire app purple, despite purple being my favorite color. Second, the app claims to “Kill waiting time at aiports, bus stops, etc”. Do you see what’s wrong here? Can you imagine yourself, or anyone, waiting at the airport with your headphones on, but practicing your “singing talent”, OUT LOUD? Not cool. Don’t do that.

The Pitch

Instead, my proposal, (lets call it, The Greatest Singalong) will let you, and your friends, singalong to songs at the bar, or parties, or even just watching The Voice at home. All it takes is a simple click of a button, the app will first act like Shazam, (we can even call the app, Shazam & Sing,) and then fetch the lyrics for you, to your palm. It won’t scroll, so you’ll have to do that yourself, but I guess it could scroll if you want it to.

Advanced: It would be cool for the app to track, via real time, where the music is at, and pause the scroll of the music accordingly. It would just be your personal singalong assistant.

If there’s an app like this, I’d get one. In fact, there IS one for your Mac: it’s called Sing Along, which based on the review, could be better.