Monday, February 25, 2013

Redesigning the Oak Park Together Logo

Please indulge me for a moment: I know this blog is supposed to be all about mobile UX and UI design, but given my roots as a graphic designer, one of my favorite pastimes is to analyze logos.

For some reason, I've been especially fascinated with the logos crafted for our local elections in Oak Park. My belief is, that at a local level, a well-designed logo -- one that accurately reflects the candidate(s) it represents -- can be a powerful visual cue that people will remember on Election Day.

What got me started was getting a flyer from "Oak Park Together" the other day. Here is their logo.


My gut reaction: An "A" for message, but a "B-" in execution. 

"Oak Park Together" is a great party name. For those that don't know the village's history, political parties often rely on some acronym (i.e. VMA) that carries absolutely no message about what the heck the group stands for. So to actually bring positive messaging to the table is a big plus.

Then the tagline: Experience matters. It's not just a catchy phrase but apparently the group it represents really does have plenty of local government experience. More importantly, in two words, it gives you the reason why you should vote for them. Very simple, very straightforward.

And obviously, the use of blue as a "trust" color is also very important as well.

(Disclaimer: I am not affiliated with this group or any other for this local election. I'm just speaking as a designer.)

Unfortunately, the execution muddles the message. The phrase "Oak Park Together" has no visual hierarchy (other than some arbitrary stacking and misalignment), and the lines seem to create division in the logo, not unity. The logo tries to sell you on "togetherness" that is contradicted by the wide letter spacing at the bottom.

Finally, we have the often overused oak leaf logo. Absolutely generic clip art that has no memorable resonance in a village that has seen thousands of similar logos over the years.

I'm not trying to put down the original logo designer. It's really not that bad. But I just had this urge to put a different spin on it -- if only to justify my trash talk about it.

I came up with a few variants, but here's my stab at a redesign:


I fixed the execution issues. First, we have an original logo that better represents the community. Oak Park is a "green" village, and so the top-half of the stylized "O" represents the different shades of the community, and the many trees. The bottom half in blue represents the "togetherness" of the community by uniting all the elements together, and it serves as the base of the village.

In addition to the "O" as a representation of unity, we have other subtle symbolism going on: The sun or treetop reflecting off a lake, or a rainbow with its reflection.

It also looks like an eyeball, which I don't like. However, on a T-shirt or bumper sticker it would grab your attention as it "stares" at you. So for a political logo, it helps bring attention to itself.

And as a T-shirt design, it would be pretty cool in my humble opinion.

With the text on the right, we reinforce the message. All the letters are together -- literally -- and we have some visual hierarchy at the top. Obviously "TOGETHER" is the key word, and again serves as the "strong base" of the logo. The color codes complement the "O" at left, while the different font weights aid readability since all the letters are squished together. (In addition, for a local election, it's fairly safe to de-emphasize the town name here).

The tag line, at the bottom, also continues the "togetherness" theme, with the font weights emphasizing how you should read that tagline: Experience Matters.

And when it comes to elections, so does a memorable logo.

Monday, February 18, 2013

Web Design Trends a.k.a. Sh!t You Won't Dare Design in 2015

Yeah, this new post is based on an old one that focused on epidemic web design trends. And as you can imagine, some of these trends have made their way into mobile apps.

Is your app guilty of being a trendonista? I decided to take the test myself to find out.

Stitching: Yup, but only because my clients asked for it.

Zigzag Borders: Hell no. Why use 80 short lines to define a space when you can use just one?

Forked Ribbons: No. This is definitely trendy eye candy.

Handmade Textures: Yes, but I don't think this is trendy per se. Maybe the use of distressed textures, perhaps, to give a weathered look to a web site.

Letterpress: Nope. I think this is a nice effect that's just a bit overused.

19th-Century Illustration: Huh? How lazy of a designer are you to use clip art?

There were more but the article lost my attention; they were trends I definitely didn't follow though.

But the article's a good read nevertheless. The end of the article has some good tips on how to avoid getting caught up in the latest design trends. That was probably the most useful part of the whole piece.

Anyway, it's safe to say that at UXUiOS, we march to our own beat, and don't (in most cases) fall prey to the trends of the day. You're welcome.

Thursday, February 7, 2013

Questions to Ask Before Deciding to Go the Responsive Web Design Route

You know I'm not a fan of responsive web design, just like I was not a fan of Flash.

That said, RWD is the trend of the moment in the UX/UI community, and while you can choose to like or not like it, you definitely can't ignore it.

An interesting question came up recently at a presentation I attended: So when designing a web site for your client, what are the criteria for determining whether it should be responsive or not?

The short answer: It depends.

The longer answer:  I wanted to compile that list of questions, so here's a first stab at it:

1. What is your budget?
2. When do you need the web site to go live?

These are obvious questions. With a tight budget and/or timeline, you may not have time to create a responsive web site. At least, not a good one.

3. What percent of your traffic comes from mobile devices?

This question primarily applies to already established sites. If they have analytics, this is an easy number to come up with. If they don't, consider pitching the idea of setting up analytics on their home page and compiling the traffic over a few weeks or a month. It may help the client figure things out.

Full-site analytics may also be useful if mobile users visit one web page more than others. A good example (actually my first RWD project of 2013) was for a weather web site. The forecast page got a ton more hits, and therefore a ton more mobile hits -- so it was a prime candidate for RWD.

The lesson there is to consider implementing RWD on a limited basis -- to work out the kinks and analyze traffic -- before doing a full-site implementation. Especially if your client has a limited budget (see #1) and isn't yet sold on the benefits of RWD (see #5).

If the site has not yet been created, then you'll have to make some educated guesses, depending on the web site's business requirements and user stories. The relevant question then is this:

4. Is [persona] most likely to complete [user story] using their phone, tablet or desktop device?

And then stepping through the user stories to develop that educated guess.

5. Does the client understand AND care about responsive web design?

This is a vitally important question, because if the answer is no, you have to educate your client about the benefits and drawbacks, and more importantly, make them care about it.

Because if they have other priorities more important than RWD, you should make sure your designs meet those priorities first, rather than stubbornly pushing RWD down their throats.

6. Can you and/or your team effectively execute responsive web design?

Do you fully understand the grid system? Media and screen size queries? Conditional CSS? Adaptive web design strategies? Dynamic content display (show/hide)?

If you don't, get your stuff in line before you start evangelizing the benefits of RWD.

And god forbid, if your idea of RWD is making me scroll down 10 screens to get to the bottom of a web page on my iPhone, I will punch you hard. Where it hurts most.

7. Can you manage expectations with your client? Does the client promise to bring compelling content to the page?

RWD improves the layout of a page. It won't do jack with the content of the page. The greatest RWD in the world won't mean a hill of beans if the content is crappy. Make sure your client understands this.

8. Speaking of content, does it have an easily definable hierarchy that lends itself well to RWD?

The RWD model breaks down if the web site data doesn't map well to it. For instance, if you have important alerts being displayed in two different sections of a desktop web site, will they both still be accessible when laid out on a phone-sized screen? Do you have image libraries that simply cannot be cropped easily?

This may be a situation where you need to work with the client to optimize and streamline the content first before attempting a RWD.

I'll be honest: I don't know how useful these questions are. They were just the first eight that came to mind. If you think you can improve on this list, please send a comment.

And see, I can play nice with responsive web design!

Sunday, September 30, 2012

Speculating About The X37-B's Secret Mission


I love reading about black ops programs. I'm not a conspiracy theory kook, but top secret military/espionage yarns are really appealing to me. That's why I like reading Tom Clancy, and speculating about things such as what the heck is the X37-B doing in space?

For those not in the know, shame on you. The X37-B is an experimental plane that had been in space for quite a while. No one knows for sure what it was doing while it was out in space: But it was doing something in its experiment bay that was ostensibly being tested or evaluated.

A lot of people have looked at the design of the X37-B to come up with its "top secret" purpose. Frankly, I think this is barking up the wrong tree.

The X37-B looks like a mini space shuttle that can maneuver in space remotely. With the space shuttle program shutting down, the U.S. military needs a way to get back up there. The X37-B is one way of doing so fairly quickly. So who cares about the X37-B? It's an unmanned bus to space.

To solve the mystery of the X37-B, the trick is not to focus on the what – but on the why.

Why does the Air Force want to be up in space? Let's make a list, shall we?
  • The ability to install new satellites
  • The ability to destroy enemy satellites
  • The ability to protect an existing satellite via weapons
  • The ability to hide an existing satellite via stealth technology
  • The ability to deploy a highly maneuverable satellite (including itself as a satellite)
  • The ability to repair, recharge, refuel and upgrade (and yes, rearm) military satellites
  • The ability to test components and modules for future satellites, specifically with regard to image resolution and quality
Now let's try to rank these into buckets of likelihood. The payload of the X37-B seems to small (and too cost-prohibitive) to launch or place new satellites in orbit. Ditto for carrying weapons to destroy enemy satellites or protecting satellites via weapons (i.e. anti-missile or rocket jamming technologies).

The last three are intriguing to me. What if the Air Force could develop stealth satellites that aren't visible? What about disguising a satellite as space junk? What if the X37-B was designed to carry stuff that could protect or hide the exact location of a satellite, either by serving as a target decoy or employing anti-missile technologies to zap a missile before it reaches the target satellite?

Obviously, the X37-B is a great (if expensive) "rent a satellite" plane so that it could be scrambled relatively quickly to monitor a hotspot somewhere in the world. In that context, it makes sense that an X37-B would be used to test components and modules for future satellites without going through the expense of a whole launch.

Even more intriguing is the fact that the X37-B is very maneuverable in space and able to get to other satellite locations fairly easily. What if the payload carried two arms? One to grab the satellite, the other to repair, recharge, refuel and/or upgrade components. With the Space Shuttle out of commission, this seems like a very important mission.

I know there's no hard evidence to back up anything, but my gut says that the payloads are for testing future satellite technologies only, and nothing more exciting than that. Feel free to respond if you have your own theory…



Saturday, September 29, 2012

Why the LG Intuition Is Destined To Fail


I could've saved LG millions of dollars if they had come to me first and shown me a prototype of the Intuition. I'd give them a lesson of what NOT to do when it comes to product design, and the three things you need to make a product truly successful.

But before we begin, let's give you the UXUiOS philosophy when it comes to great design.

At its core, design is simply problem solving. How do I clean my butt after I poop? How do I keep my teeth clean? How do I make a phone call?

As a designer, we can brainstorm to come up with thousands of ways to solve these problems. But we are paid to find the best way. So how do we get to that "magical" zone that is incredibly awesome design?

Simple. All design can be measured with these four benchmarks:

1. It solves my problem.
2. The solution is easy to use.
3. I need it now.
4. I want it … now!!!

To see how this works, let's focus on this problem: How do you clean your butt after you poop? Perhaps a crude choice, but it's one everyone can identify with.

With #1, that's a pretty low hurdle to jump. You can come up with thousands of ways to solve this problem: A garden hose, compressed air blasts, your fingers, etc. All design solutions start here but the bad designs tend to stay stuck here.

Getting to #2 is where functional design lives. Toilet paper is a good example for this #2 (get the joke?) because it solves the problem AND is easy to use. Much easier to put a roll of toilet paper in your bathroom than a connection to your garden hose.

Between #2 and #3 is when we begin our transition from getting from the solution to a specific product or design. So if toilet paper is #2, then we focus on specific designs, (i.e. such as those for Charmin and Angel Soft) to get any higher.

Getting to #3 is where marketable design lives. Sometimes, good design comes from consumer perception and advertising (whether accurate or not). Sometimes, it's in the quality of workmanship. Sometimes, it's in getting great value for the price. And sometimes, it's because it really is a good design.

In our case, most brands of toilet paper never reach this #3 level because frankly, you can't improve too much on the functional design of toilet paper: flexible, flushable, tears into squares, cleans the butt.

Charmin and Angel Soft may have added some unique design to make their products stand above the rest (i.e. thicker paper, more ply, softer feel) -- but frankly, the only reason they trigger someone to say "I need this specific brand now" is because of advertising and/or a good sales price. Their product designs may indeed be better, but really, it's advertising that gets any toilet paper to #3.

So how do you get past #3 to #4, which represents the world's best designs? Well, unless there's some revolutionary breakthrough in how we think about cleaning our butts after pooping, toilet paper will never make it to #4.


A good rule of thumb too is that when you reach level #3, you'll have competition, so the goal is to rise above the rest to really shine. Also, the more expensive the product, the more likely you'll need to reach #4 to really succeed.


Apple's iPhone is an obvious example of a #4: When it came out, there were tons of competitors with phones, but thanks to really good design, great advertising, and the perception of desirability thanks to the first two factors, it made people say "I want it … now!!!"

In the context of what I do for a living (user experience and interface design), I come up with mobile software solutions to solve my client's problems. If I phone in the design, I'll get to #2. If I want my clients to be happy with my design, I'll need to get to #3. But the only way I'll wow my clients and get repeat business and good referrals is if I can take my designs to #4 and make them and their customers say, "I want that ... now!!!"

So when both you and your clients see a design and you all agree, "I want that ... now!" you've probably got a great design in hand (either that or you're all too blind to see how bad it really is).

That's a deep dive in thinking about design, but simply put, you can hold up any product design to see if it can hit those benchmarks. So let's return to the LG Intuition and discuss.

So what problem does the Intuition purport to solve? It's a device that lets you use it as a tablet as well as a smart phone.

Right off the bat, I'd tell LG that they're breaking one of my core design principles, which is focus. They're attempting to solve two problems rather than just one. This makes coming up with a great #4 solution much much harder than if they just focused on one or the other.

That's a potential "uh oh" red flag -- but let's assume LG did their homework and did research that said there's a market for such a solution. Does the Intuition reach #1? Does it solve the problem?

Based on other reviews out there, the answer seems to be yes. Larger screen in a 4:3 format, but small enough to make phone calls.

How about benchmark #2: Is the solution easy to use? Again, based on other reviews, it seems easy enough to use. The browser seems to be slow, but overall it works just as you'd expect.

But getting to #2 is easy. Now we get to #3: Do people need the Intuition?

Right now, we're getting in trouble here with the Intuition. There are already lots of phones that can do similar things, even though they may have smaller screens. There are already lots of tablets that can do similar things, even though they can't place cell phone calls.

And we get to the beauty of these benchmarks. You can build a good solution to a problem, but if nobody needs it or wants it, the solution will fail to be marketable. Maybe if LG can use some great advertising and create the (what I would contend is false) perception that people actually need this, then there might be some hope. Alternatively, they can drop the pricing so that buyers get to #3 and #4 via a great price point (Remember the HP Touchpad? No one really wanted or needed one until it dropped to $99).

Frankly, looking at the selling points of the Intuition, I don't see anything I need. Tablet-like versatility? If I really needed a tablet … wouldn't I just buy one without being locked into a phone contract?

Aspect ratio ... who cares? In fact, reviews say the 4:3 screen is pointless for widescreen video.

Quick Memo? Why not just tweet the screen shot or email it to a friend with a text comment?

At the end of the day, the Intuition addresses the problem … but it's a solution that nobody needs or wants.

And that is why the LG Intuition is destined to fail.

Wednesday, September 26, 2012

Fixing Yahoo! Mail in iOS 6

Long story short, couldn't get Yahoo! Mail hooked up again on my iPhone, even though it was working in 5.1. I got the "Yahoo! Server Unavailable" when trying to verify the account.

There are a few solutions floating around (delete the iOS Mail account and re-create it, or change your password on Yahoo! and log out/log in to the web site), but the only one that worked for me in iOS 6 was NOT selecting Yahoo! but Other as the account and setting it up manually. Specifically, the servers are:

imap.mail.yahoo.com
smtp.mail.yahoo.com

For the incoming and outgoing mail servers. Working fine now.

Sunday, September 23, 2012

Mobile Web Site Review: OakPark.com (Part 1)

One of my often-visited web sites is OakPark.com, a local news site that covers my community.

Instead of going the native app route, they created a mobile-optimized site that seems to be a template of some sort. For this review, I won't focus on the template or its CSS, but some content-driven tips that would make the site more user friendly. Hopefully to give them some free design suggestions and also give you some things to consider when designing a mobile-optimized web site.

Too Many Words: For a mobile site, word economy is key. Take the screen shot below:


Let's edit that stuff to make it mobile friendly: "News Articles" and "Blogs" for the title. "Full Site" for the bottom link. And shorten that note...

Add OakPark.com to your home screen: On iOS, tap the "Action" icon in the toolbar and select "Add to Home Screen." On Android, bookmark our site then add a bookmark shortcut to your home screen.

Even better, detect whether the device is iOS or Android and show just the instructions for that device.


Not Enough Words: Huh? Doesn't this go against everything I just said?

Not really. In the screen above, the latest comments have five or six words. That's not enough to get a sense of what the commenter is saying. It needs to be two or three lines of text at least so you have enough information to decide whether to read the full comment or not.

Also, since we know these are "Latest Comments" we can strip the words "Posted:" and "2012" from the detail line. If it were me, I'd add JavaScript so that if the date was today, it would just post the time or read like "1:01 AM today" to help decipher when the newest comments were posted.


Better Comments: Again, just some ideas to reduce scrolling. The title above could've easily renamed "193 Comments" (let's not assume all commenters actually read the article), which would get the "Add Comment | Comment Policy" on one line.

Another suggestion is for users to be able to give comments thumbs up and thumbs down so that the comments voted best appear at the top. I know that breaks the reverse chronology aspect, but let's be frank: Do you really think people are going to wade through 193 comments on a phone? Let's save them that trouble by letting commenters vote on other comments.

To wrap up, overall OakPark.com is a good mobile web site. I think these suggestions would make it even better.