User Experience and Design

In three parts

Part 1: The Post Punk Kitchen

This is one of my favorite websites. I am kind of a geek for different ways of managing and organizing data, and this website does it so well. Let’s just take a quick look at the main page:

Visually Speaking

Immediately you know the most basic tennant of this website: food.

Look a bit more closely, and you’ll be able to see that it’s dedicated to vegan cooking and baking, and that there are a couple different ways to look through or search through the content (which is- I’ll give it away, mostly recipes).

The color scheme, background and arrangement lend a definitive feeling of fun and excitement. Red! Orange! Stars?!? I’m pumped. Meanwhile, the neutral tones background and the hand-written nav bars help to make the site feel nostalgic, and comfortable. They also hint at the home-made, which is what this place is all about.

Content-Wise

So how is this content arranged? We have the obvious featured recipe link in the center, and surrounding it… more or less, those are three (four if you count the footer) separate nav bars. What this says to me is: “Hey! LOOK AT THIS PRIMARY EXAMPLE OF OUR CONTENT! Here are lots of ways to get to it.”

Given that the content area I tend to be more concerned with is FOOD (let’s be honest- food tends to be my biggest concern in any context), I am most interested in the various ways to browse/search through recipes. I love that I can browse by date, recipe type (entree, dessert, etc) or even search by ingredient!

I love the way the visual design adds to the practicality of the user experience design in this site. I can get to the content easily, in so many ways, and it looks so much fun the whole time!

Part 2: Is There a Cubs Game Today?

Fun and bluntness are what’s going on in this one. I won’t insult it’s straight-forwardness by providing a picture. All you need to do is click the link. Click it!

Visually Speaking

Pretty Stark, eh? But (particularly if you live in, or have ever visited Chicago’s North side) I bet it made you giggle. Smile, at least.

There is far more to say about the content of this website, which is part of why I like it so much. Visually speaking, it points itself entirely to the content. The coloring re-inforces what you already knew by typing in (or looking at) the URL- we’re talking about the cubs. It brings to the forefront the answer to the question this site inherently asks by putting in HUGE red lettering. And then everything is super simple, stark, encouraging the user to pay attention to the issue at hand. Is there a cubs game today? Now you know. You don’t need me anymore.

Content-Wise

There is one simple question that this website sets out to answer, and even though I’ve only spent fewer than 150 words talking about it, we are all familiar with the question.

Cubs games get crowded. Chicago’s narrow north-side streets get jammed. The red line starts to feel like tokyo’s train system at rush hour. Cubs fans are pretty well known for knowing how to have a good time. Shit gets raucous.

When you don’t want game day traffic to slow you down, you probably don’t want to be slowed down by finding out whether there’s game day traffic, either. This site, ultimately answers the questions: “will there be lots of people in and around Wrigleyville today?” “Will I be slowed down if I go a certain route?” And it positions the question in funny way.

Since game day traffic isn’t something google maps has figured out a way to calculate, this website exists. I don’t really pay attention to sportsball naturally, so when I lived on the north side, it was a shortcut on my smartphone’s homepage. If there was a game, I biked to work.

Part 3: Simple

Since this is a banking website, the stuff that I like msot won’t be immediately obvious, but if you’ve clicked the main link, you’ll start to see what I’m talking about.

This place is super subtle. It gives you what you need. If you need something more than what you see, you’ll go looking for it, and it ends up being pretty easy to get to. For example, I’ve visted the main page, I’ve watched the video (or not), and I want to know more. It may not be immediately obvious that I can scroll down, but if I’m looking for more information, I imagine that’s the first thing I’d try. And there it is!

We also have two nav bars: one obvious one at the top, and another (kind of standard footer) once you scroll to the bottom. Our top nav bar keeps it simple: only three choices. Two of those choices will tell you more about the service, and the third is for those current users, who already know where they’re heading.

[(http://www.macstories.net/news/simple-online-and-mobile-banking-with-style/)

Content-Wise

To avoid posting my personal financial information to the web, I did a google image search and found the lovely set of bank account screenshots you see here. I’ve linked both of them to the article/blog post google attributes them to, which is pretty awesome.

Hopefully, with these screenshots in conjunction with the main page itself, you can begin to see the tip of the iceberg as far as the primary content and power behind it. As much as I wish I was saving up for an iceland vacation, and going to Pok Pok Noi twice a day, my own personal use of Simple does look a little bit different.

However, it’s just as practical! In addition to being able to organize the money I do have into digital envelope-style budget and savings categories, Simple tells me what’s left over to spend (or catch my fall) after I’ve saved what I can and assigned the necessary bills. Furthermore, I can tag individual transactions in the activity menu, I can spend from those goals, and I can ask Simple to send checks for me, for free. It helps me make sure I’m using my money the way I want to. I can look back at my spending habits over the past few months,m or years (for as long as I’ve been using it) and see how much I tend to spend on different things, or at different places. All I have to do is type the right thing into search bar. If I want it even easier, I can just click a series of links to get there. And they show me the information with graphs! It’s an incredibly powerful, convenient combination of web app and service.

Visually Speaking

Let’s take a closer look at that first screenshot. What is that content? It’s your standard online-banking statement. It shows, chronologically, where I’ve spent how much money, and any pending transactions.

Except for one thing… this presentation is a heck of a lot more pleasing to look at. Soft colors, huggable fonts, and efficiently used space make for an incredibly positive experience visually.