Mobile Website Design in Omaha Nebraska

by Tim Wright

Every year for Father’s Day I buy my dad some steaks and hamburgers from Omaha Steaks, and this past year was no exception. I gave him the present, we sat around, talked Baseball, and cooked some dead cow on the grill. (I’ve always found it more satisfying to eat a meal that had parents.) Good times were had.

Recently I’ve been fielding a lot of telemarketing calls from the fine folks over at the aforementioned steak company; apparently I’m not buying enough meat from them. I get it though—we all need to keep places in business. But I’ve never had meat pitched to me over the phone like that, so it was certainly a unique experience.

I would like to return the favor of that unique experience back to Omaha Steaks in the form of small collection of (hopefully) constructive comments about their mobile web presence. There are seven points in the design of the mobile homepage experience that I would like to talk about.

Screen shot of the Omaha Steaks mobile website with numbers matching the sections below

  1. Logo: Some of the text in the logo is hard to read at that size, but the logo in the footer reads fine. For this, I would probably recommend creating a mobile-optimized version of the logo to go along with the mobile-optimized version of the site.
  2. Phone number: This feels a little out of context for me, as I’m not sure where the number goes. I’m assuming it’s a general customer service line, but on the desktop site they use the same number for over-the-phone ordering. A little context would be great here. I do love that it’s right up at the top; makes total sense when you’re on a phone.
  3. PayPal: This is a big one for me. I really like that this is so prominent. As someone who buys though the phone a lot, letting me know that I can use PayPal (and I won’t have to type in my credit card info) goes a long way in motivating me to complete my order.
  4. Main navigation: This is a little weird, because it’s pretty different from the desktop site, but it’s well designed and very clear. “Home” could probably go away since the logo is clickable, and I really don’t need “cart” until I have something in my cart. The items could be a little better optimized, but overall it does make sense for the main actions of a typical user.
  5. Shop: The “Shop” section makes me not want to tap on the version in the main navigation, because I feel like the content will be the same (it’s not). This feels more like a “Quick links” or “Popular/CTA” type of area. The “Categories” item actually goes to the same place as the “Shop” link in the main navigation, so that’s a little confusing.
  6. Find a store: “Find a Store” is one of the areas where I feel like you can take advantage of mobile a bit. You can output a section for “Stores near you” and then provide an option to locate others if you want. It would also break up some of the monotony in the list of items and make the page more visually interesting.
  7. Footer: I like the footer. As I mentioned before, I think the footer logo is much more readable. My only comment is that it’s so easy to go back to the top navigation that I would probably add different links down here. Maybe social profiles to help reduce the amount of items in that long navigation list.

Performance

As I visited the mobile site I didn’t really notice a performance issue (I’m in the office on WiFi), but as I lifted up the hood I could see some macro-optimizations they could easily make to get the site loading a little faster. When I say “macro-optimizations,” I basically mean, “reducing HTTP requests.”

There are six separate JavaScript files being loaded in the head of the document. One of them is jQuery, which can be offloaded to the Google CDN instead of serving it up locally and clogging up the network pipeline (asset loading). The other five files can be processed server-side to be reduced and minified down to one file. That pulls six requests down to two—pretty good—one of which is on a CDN.

The CSS is actually all in the same file, so that’s good, but it can be minified to reduce the file size a bit. Not a huge deal, but an optimization none the less.

One last quick optimization I’d make would be to pull all the embedded JavaScript out of the document (all that you could, based the business reasons for why it’s there) and get that into the main JS file so it can cache with the rest of the JavaScript.

Accessibility

Of the three images on this page, two of them have no alternative text. As we all know by now from Target losing $6,000,000 in a lawsuit, providing alt text to screen readers is very important. It’s not just about the money, but when we’re designing an experience we want to make sure that it works for everyone. Not just people who can see. Experience design does not happen in Photoshop.

Both of the images missing alt text are the logos (which is weird, right?). Maybe they’re not super-important to the goals of the user, but really … Why wouldn’t you want someone to know where your logo is? An odd choice, and I hope they fix it.

Overall

For the most part, I think they did an okay job at creating this mobile site. Is it perfect? No, far from it. In fact, it almost looks like someone designed the header and footer but forgot about everything in between. Given the fact that the main site is so cluttered and borderline unusable on a phone, I think they made the right choice in creating this separate experience.

In a perfect world, this should probably be a responsive site, but I do think that mobile experiences like this are pretty good as interim solutions until you can circle back and do a proper redesign.

About Fresh Tilled Soil

Fresh Tilled Soil is a Boston-based user interface and experience design firm focused on human centered digital design