The SUMO Heavy Industries Blog

Design / eCommerce / Business / Culture / Life

Archive for the ‘Design’ Category

Site Review: Warby Parker Takes the Strain Out of Purchasing Glasses

September 22, 2011 by John Suder

Warby Parker is an online destination for purchasing discount contemporary eyewear. What sets Warby Parker apart from the other online stores is the attention to design and their unique customer service programs.

Warby Parker (a name taken from two Jack Kerouac characters) launched in February of 2010. It was started by four Wharton pals: Neil Blumenthal, Andy Hunt,  David Gilboa and Jeffrey Raider. The site has been profitable since their fourth week and were named one of Entrepreneur Magazine’s 100 Brilliant Ideas.  Not a bad start…

Their high-end-styled eyewear is manufactured in the same manner as their expensive counterparts, except they cut out the middleman, eliminating a lot of expense. That allows them to sell their frames for $95 each, which is about a quarter of what the competition sells similar eyewear for.

The site itself is cool and minimal – black type with blue links/buttons, and 3 typefaces (Rooney, Myriad and Georgia). Their product line is small, so they’re able to merchandise the entire Mens (or Womens) line on one page. Once you see a pair you like, the rollover encourages you to do a virtual try on, or just click thru for the item detail page.

The item detail page features a single large product shot. The rollover zoom gives you a closer look at the frames. There’s a sizing chart, which gives you the actual measurements of the glasses (which might be helpful for those with giant or odd-shaped heads…) The rest of the page has your standard product information and merchandises suggestions for similar glasses.

The thing that really sets the Warby Parker site apart is their unique Try-On programs:

The Virtual Try-On

Once you find a pair you like, you can go to the Virtual Try-on. The Virtual Try-On lets you select a photo from your computer or shoot a photo using your webcam. Shooting the photo from your webcam makes more sense, as you can adjust the photo and make sure it’s straight before proceeding. Once your photo is shot, you’re given a sample pair of glasses to adjust to the shape and size of your head.

This is an important step, because if you don’t get this part right, nothing on this site will look right for you. The developers have done an admirable job with the UI on this, but I suspect some non-tech savvy folks (read: older people) might stumble here.

After that’s compete, the fun begins: You can try on any pair (if you’ve screwed up your alignment, you can go back and fix it – great touch). Find a pair you like? Save your photo, even share on Facebook. You can even try on the Monocle.

The Home Try-On

When shopping for eyeglasses in an offline store, you’re almost forced to make a snap decision on which pair of glasses you’d like to buy. The Home Try-On lets you select five pairs of glasses for five days – shipped to you free of charge. Now you can decide in the comfort of your own home if those bold frames make you look dashing, dorky or douchey.

The Home Try-on landing page is a one-pager that tells you all you need to know about the program. The page features a humorous demo video featured photographer Noah Kalina (of Noah K Everyday fame).

If you use the Home Try-On, you’ll need to be registered (with CC info on file) and let them know what type of glasses you’ll need (prescription, reader, or non-prescription) and how you’re going to provide the prescription info. Warby Parker will even contact your eye doctor if the information is incomplete. Giving them this information upfront allows them to process your order quickly after making a selection. It also allows them to charge your credit card, if you should decide to abscond with their box of samples…

Buy a Pair, Give a Pair

According to the site, one billion people don’t have access to glasses, which means that 15% of the world’s population is unable to effectively learn or work because they can’t see clearly. Warby Parker donates a pair of glasses for every pair sold, and has donated over 50,000 pairs in over 36 countries.

Nice glasses, good karma.

Inkling: New Digital Sketch Technology from Wacom

August 30, 2011 by John Suder

As a designer, I still use the old pen and paper to capture ideas. The frustrating (and time consuming part ) is sharing those ideas digitally. Scanning, or even taking snapshots takes time. If you’re converting those ideas into an illustration, it takes even longer – scan, clean up, import, trace. The iPad bridged that gap with apps like Penultimate and procreate which allows you to use a stylus to draw directly into the app and share your ideas. But drawing on the iPad stil doesn’t feel ‘natural’. The iPad surface certainly doesn’t feel organic like paper, and the styluses now being produced are either too thick (try drawing thin lines with a magic marker-like device) or too small, which don’t work too well if you have meaty paws or long fingers.

Today I caught a glimpse of something that looks very promising. Wacom, the king of stylus input devices, are releasing a digital capture device called the Inkling. The Inkling combines the best of both worlds. Imagine being able to draw on actual paper and have those drawings sent right to you computer and imported into your graphics program. The Inkling does just that, using a small device that clips to your notepad and, with their special ‘pen’, allows the device to capture your drawings as sketch. In addition to being able to capture your strokes, it allows you to set layers. Imagine that.

Once you’re done, connect the Inkling to your computer, and off you go. The Digital Sketch Manager software imports your drawings and allows you to export them to Photoshop, Illustrator or your graphics program of choice.

The only downside that I can see is that you need to use their special ‘pen’ which requires their refills. But then, this is one of the cost vs. time benefit situations – if you know your sketches need to get into the computer, then you’re going to want to use this device.

The device will be available in mid-September with a list price of $199.00

• Wacom

• Inkling Product Page

Site Review: Burton Snowboards

August 29, 2011 by John Suder

Burton Snowboards, purveyor of snowboards and gear since 1977, has always been on the bleeding edge of design. Since their core customer base is 18-30 (ish), they need to keep on top of the latest trends and keep their marketing and design fresh. Their latest site redesign does not disappoint.

Upon loading the page, you’re presented with a super-sized photo. Clicking the photo will take you to a series of other (beautiful) super-size photos. A tab at the top right takes you right into the main sales page, or if the user instead clicks on the photo, the’re presented with another photo with a visual cue to continue the slideshow. Rolling over the photo also presents the user with the gateway option of checking out this seasons collection (either men or women). A smart sales technique is the circle in the top right of the photo that lest you check out the gear shown in the photo.

Site features:

Team News

Videos, news and rider profiles of the Burton Snowboarding team.

Gear

Once you’ve selected either Men’s or Womens, there’s many choices available. Shop by product (hard goods, soft goods, apparel, etc.). Each category has its own landing page where you can drill down to specific products, colors or sizes.

There’s also three beautifully designed interactive product selectors:

The Board Finder (select the abord that right for you), The Great Outfitter (find the right gear) or Bag Check (find the right bag for your gear).

Experience

The ‘Experience’ page is an interactive guide to help the user decide what type of rider they are (new or experienced) and presents a custom tailored information on the sport of snowboarding.

Below is the page created for new riders, featuring advice, tips and product guides.

Events

Lists Burton Snowboard events.

Company

A subsite on the history of the company, with links to careers and the store finder.

Find a Store

One of my favorite sections. Google maps serve as a backdrop for the store finder.

Add an Image

Community

The Burton blog. Team news, tips, photos and a user community where you can create your own profile and post news to fellow snowboarders.

Burton has created not just a website to sell their products, but an immersive experience that keeps their loyal customers engaged and provides valuable information to anyone interested in snowboarding – from beginners to experts.

Burton Snowboards

Collect and Analyze User Feedback on Your Mockups with Verify

August 22, 2011 by John Suder

Verify Home Page

When designing web pages (epecially for eCommerce), it’s vitally important to know where your user is clicking or how they’re interacting with  (or reacting to) your page designs. Doing live user testing can be an expensive proposition, and calling in your friends to ask what they think of your designs just won’t cut it.

When adding new features to a site, how do you know you’re adding features a user even cares about? If you’re updating a site, how do you know which features to remove?

The Verify app bridges the gap and provides instant feedback from users who view your mockups or screens. Verify allows you to upload your designs and ask users their opinions of your concepts. The application allows you to perform 9 different types of tests:

Click Tests Find out where your visitors are going. Do people understand your product or service? Post a screenshot and visitors click on the screen based on your question or directive. These tactical tests determine simple things like ‘Can you find the link?’.

Memory Tests People get an impression of your site after less than a second of viewing it. Is your message clear? See what users remember after 5 seconds.

Mood Tests How do people react to your page? Positively or negatively? The mood test measures emotional response.

Preference Test Perfect for new designs. Users get to select between two options and tell you why.

Annotate Tests Sometimes you just want feedback – with the Annotate test, people will give it. This test lets users add notes to a screenshot based on a question or directive that you supply.

Label Tests Guide user feedback with placed labels. Place labels on your screen and ask users what they think it is.

Multi-Page Click Tests The simplicity of a click test, applied to a flow. Get a sense of where people click in a sequence or flow.

Linked Tests Get more data by linking your tests together in a unified flow.

The data is available almost immediately and you’re provided with a clear, actionable report that will assist you in making decisions about your design or concept. Plans start at $9/month.

You can also participate in live testing at Verify. No signup or email, just jump right in (warning: time suck ahead. It’s addictive.).

Verify Live Testing

Verify App

Onepager: Simple, One-Page Websites for Small Business

July 19, 2011 by John Suder

Small businesses can’t exist without a website, but many business owners can’t wrap their head around how to get their business online. They either fail miserably by trying to save money and do it themselves (FrontPage 97!) or get scared away by the cost.

The reality is that small businesses (like restaurants or dry cleaners) don’t need a fancy or complicated website – their potential customers just want the vital information like where the hell they’re located and what time they’re open. Onepager fills that gap nicely and is very affordable at 10 bucks a month.

This kind of service won’t put web designers out of business – more likely, you’ll get less calls from Pizza joints looking for websites on the cheap.

Onepager Web App

TechCrunch Redesign: The 90′s Called and Want Their Logo Back

July 13, 2011 by John Suder

For those who care about such things, venerable tech blog TechCrunch.com has redesigned their site. If you’re one of those that do care, you’ve no doubt seen the backlash of folks out there that absolutely hate it. I think it’s just one of those things that you’ll have to get used to. Case in point: when they redesigned the Gawker properties. Judging by the audience reaction you’d think they were dropping puppies off of a cliff. I’m a faithful Gawker/Gizmodo/Lifehacker reader, and yes, I hated it, but it grew on me. Because of the new navigation, I can scan through more articles in less time – that’s a win for me.

“I used to love reading TechCrunch. And now I have to soak my eyes in bleach every time.”

Here’s what I don’t understand about TechCrunch – they an AOLHufPo (or whatever thye’re calling it) property now . Is it that bad over there? Surely they must have some talented people left there that can design the front-end of a blog.

NO LIKE What on earth is going on here? If this were your first time here, would you know where you were? Not until you scroll down the page and the static nav bar reveals the site name. And the eight-bit treatment of the 8-bit logo doesn’t work. I’m pretty sure people aren’t nostalgic for the days of 256 colors. I get it – the blog has massive traffic and needs to be speedy – but this isn’t 1997.

TechCrunch Redesigned Header

KINDA LIKE Okay, so they went a little nuts with the Interstate Bold font for the article headlines, but at least they’re easily scannable. I also like having the social stuff tucked away in a dropdown – those little badges and the thousands of variants are really starting to crap up the web.

TechCrunch Single Post

The logo in the header is just god-awful – but I saw this version of the logo on their Facebook feed – I kinda like it. The simplicity makes sense when used in one color, not with a bunch of other ‘pixels’ riding inside.

TechCrunch Facebook Logo

I have a feeling we’re seeing a work in progress. I doubt they’d switch back to where they were – that’s be too painful for everyone. We’ll wait and see. And in the meantime, TechCrunch at least has enough humility to poke fun at itself:

Your Logo Looks Like TetrisWe Picked This Logo Just to Piss You Off

Oh, Look – It’s Our New Website!

July 11, 2011 by John Suder

Sometime over the last 24 hours, our crack team of programmers and designers have unleashed the latest version of the SUMO Heavy Industries corporate website.

History SUMO Heavy Industries has been officially in business since May of 2010. After creating the initial visual identity, we quickly put together the site on WordPress and launched. We were quite pleased (at the time) that we were able to put together a decent looking site in such a short window of time.

But, as is the case of most design firms and interactive agencies, as we grew we had a case of ‘the cobbler’s son has no shoes’. (For those that don’t get the reference, we were basically selling a service that we sorely needed ourselves.) This isn’t unusual in the service business – you’re too busy growing the business and keeping customers happy. Something’s got to give, and most times it’s the self-promotion/marketing that falls short.

The Process: Throw It All Up and See What Sticks
 I’ve been bitching about the old site design for some time – it didn’t showcase our strengths as an eCommerce agency, but mostly because I allowed a hideous photo of myself to used in my bio.

Since, I’m the lead creative here at SUMO, it was up to me to herd the cats get some ideas presented and move the design process forward. And from experience, the hardest story to tell is about yourself. Also, our Team Leaders come from three very different disciplines – designer, programmer, business development – so we all see things very differently. This is a good thing for client work because it enables us to work as a cohesive unit to get projects up and out. Working on internal projects, however, is a whole other ball game. Each of us has a different set of expectations. Luckily, there’s no ego-tripping here; at the end of the day we’re all looking to build something that we can be proud of (and hopefully make some scratch).

So, we went through the first set of concepts like a kid on a sugar buzz. Trying different concepts, styles, typography. Throwing in bells, removing whistles. Which is OK in the initial stages. Throw it all in. The hard part is removing enough so it looks good, but not sacrificing message or continuity. And all the while trying not to come off as gimmicky, or showcase a design fad that will look dated in 6 months. We originally started off with a one-page design…which quickly morphed into the design you see here.

SUMO Site LeftoversSome of the design elements that didn’t make it onto the site (‘ribbons’ are so February 2010).

Once we decided where we were headed, I kept my head in Photoshop for a few weeks tweaking the page concepts and sharing ideas with the team. We all work remotely, so using online chat keeps things moving quickly (while also attending to client work). One tool that really helps us to visualize how a site will function in the real world is the InVision app (see my gushing school-girl review of InVision here). This application allows you to create working prototypes that you can share and comment on with your team or clients. It helped us move more quickly through the design process, but more importantly, it helped identify UX issues before writing any code.

Filling in the Blanks
 Now that we had the design roughed in, we began filling in the content. Writing up the client pages was easy. ‘Less is more’ when writing for the web. Also, we understand that most folks have the attention span of a mosquito, so we kept it short and simple. We know, you just want to see the pretty pictures.

Moving Forward
 We’re already discussing the next version of the site, as we know we’ll outgrow this one before we know it. This time, we’ll be working on the new one before the old one loses its spark. Or until I get sick of my photo.

We’d love your feedback on the new site. Leave a comment or send your praise (or scorn) to hello@sumoheavy.com.

InVision: A Prototyping Tool Made For How Designers Really Work

May 25, 2011 by John Suder

Visual designers rejoice: Now there’s a way to design working web app prototypes that aren’t your usual stiff, scribbly, black and white, low-fidelity layouts with the same-old same-old UI gadgets.

InVision allows you to express yourself – go as a low- or high-fidelity as needed – using the design tools you’re already comfortable with. Create your designs as you like, then connect them using InVision, without any code.

invision demo app

InVision Demo App. The app is controlled from the tool bar at the bottom.

invision gallery

InVision file gallery.

InVision has a clean, drag and drop interface. Once you’ve prepared your screen layouts, export them to JPG and upload them to InVision in the Build Mode. InVision presents a gallery of your screens and you begin building from there. You then identify the clickable zones on your layout and link them to the other screens in your gallery (via a dropdown) to simulate workflow. If you’ve got a global link on your screen, InVision allows you to create a “template” – once you specify a link in the template, it will automatically apply that to any other screen in your app, saving you time.

Once you’re done testing your app in the Build Mode, you can click over to the Experience Mode to check your work. Then, export your project using the Share Project Screen Mode, which generates a unique URL to share with colleagues (they don’t need any logins or signup to view the projects). Your collaborators can then view the project via the browser. Tour Mode lets them view clickable areas, and they can also leave comments (which will triggers an email to you). After the client reviews, you can logo into InVision and see a global list of comments for the project. You can use the comments as a checklist as you address each comment.

invision share

Share Project Screen

Sample comment.

InVision brings visual prototyping out of the stone ages and creates a true user experience for your clients and colleagues (which is especially helpful when you have non-visual people in on a project).

InVision is quite affordable – plans start at $9/month, which gives you 5 projects and unlimited collaborators, unlimited sharing and unlimited storage. There’s also a freebie plan to let you try the service, but once you see how much time you’ll save, you’ll fork up that 9 bucks quicker than you can say Double Venti Expresso Peppermint Foam Latte (or whatever coffee drink you throw away 9 bucks on).

InVision App

Things We Like: The Friday Five for March 11, 2011

March 11, 2011 by John Suder

The Answer is YES.

A great FAQ page for Highrise app by 37Signals, inspired by a sign at an Illinois rest stop. It’s amazing the places you can find inspiration (hint: It’s not always on the screen) so keep your eyes open and head up!

Movie Barcode This Tumblr blog compresses every frame from a movie into a single image. The color tone of the image changes from left to right as the scenes change. Also, notice the dark tones of ‘Fight Club’ versus the vibrant tones of ‘Speed Racer’. Prints of the movie barcodes are also available for sale.

'Fight Club' Movie Barcode

'Speed Racer' Movie Barcode

Fred Wilson: How to Get Your Emails Read

With everyone suffering from ‘information overload’ it’s becoming harder to get anyone’s attention. Fred shares some pointers of how to get your mail into the priority inbox, opened, and most importantly, replied to. A VC: How to Get Your Emails Read

 

 

Initializer: Start your HTML 5 Project in 15 Seconds

Initializr is an HTML5 templates generator to help you getting started with an HTML5 project. Just check off a few boxes and off you go.

The Grand Taxonomy of Rap Names Attention infographic junkies and rap music aficionados:  Popchartlab presents 282 sobriquets from the world of rap music, arranged according to semantics.

See it full size (and buy one today) at Etsy.

Things We Like: The Friday Five for February 25, 2011

February 25, 2011 by John Suder

A Website Named Desire An illustrated look at what it takes to get a website off the ground.

“Designing, building and launching websites is real hard work — but our profession is seriously misunderstood. To help explain the process, we drew you a picture. A really big picture”
A truly impressive (and immersive) piece of work. ”A Website Named Desire” is part of Descry, an Interactive Infographics Lab brought to you by Mix Online. Take a few minutes and browse the large illustration (click “Vew Deepzoom”).

A Website Named Desire

A Website Named Desire

Liverpool FC Becomes the First Football Club to Launch a Fully Functional Mobile Store.

Liverpool FC has become the first football club in the world to launch a fully functional mobile e-commerce store, allowing smartphone owners to view the clubs online store, browse the full range of merchandise and pay for them securely. Developed on the MUSE eCommerce platform by Snow Valley of London. (via The Next Web UK)

 

 

 

 

Paper Prototyping with the UXPin Prototype Kit Another one of those ‘headslap’ ideas (why didn’t WE think of this?). Why spend countless hours working on a nice Photoshop layout when 90 percent of it will most likely get changed in the client meeting? UXPin solves the problem by providing your common UI items and a paper ‘browser’ to mock up website structures quickly and easily. No pixels required! A mobile version is soon to be released.

UXPin

The 1969 Toyota EX Designed to show how Japan’s new highways could be used, the EX-I was a 2-seater concept sports car shown at the 1969 Tokyo Motor Show. (Shown: The EX-III)

Top of the Charts – Navigate Modern Musical History A conceptual iPad app that allows user to navigate through history’s most popular music, listen to songs, and view additional data for any item.

Top of the Charts from Matt Olpinski on Vimeo.

« Older Entries