I love helping small companies grow. I Want a Napsac is a small company, sole owner Becky Crouch has a unique product with a unique name and I was more than happy to help her get her shopping cart online.

Her goals were simple: set up a shopping cart and start selling stuff! But also, social was important so a blog and social links were also top of mind. An image slider for the home page to give an overall sense of the products on offer was next, and then a blog to personalise the branding and to have a platform to share on social networks.

Home page

Based on the simplicity WooThemes theme we were able to move very fast editing and updating the design with the Napsac brand and products. The theme also freed up budget to focus on the WP E-Commerce shopping cart.

The Blog

We agreed the blog content would be a major focus for her marketing efforts, so a plan was put in place for her to blog at least once a week if not more, and to also run promotions through the blog. This gives her links for social networks so she can drive her own marketing without a lot of spend.

The Store

The Store houses all her products and through WP E-Commerce plugin is connected directly to her PayPal Merchant account so she can take orders online. Notice in the sidebar the Cart is everpresent and can be added to at any time. Handy for those of us who forget what we just added to our cart. We added a custom shipping plugin called WP Shipping Premium so she can set rates according to product and region rather than having to choose a singular rate, one for each product.

Now the site is built and live Becky can add her own content, products and other details so she’s fully in control of her website and her business. I’m proud to have been involved with this project, and look forward to supporting her as her business grows.

Mobile websites will replace mobile apps, according to Jakob Nielsen’s blog post today, but it’s not clear exactly when this will happen.

Summary:
Mobile apps currently have better usability than mobile sites, but forthcoming changes will eventually make a mobile site the superior strategy.

I agree with Jakob Nielsen that this shift will happen gradually. I blogged about whether to build a mobile app or web app and about the difference between mobile and web applications, but this shift that’s occurring is happening slowly because there are so many formats out there, iphone, Android, kindle fire, etc. iPhone’s app store is convenient, but expensive and choosy; if they don’t like your app for whatever reason it will not get published.

While cost is a big factor, Nielsen also says that usability is increasingly important. Why design for all these different platforms and experiences, when you can build a responsive web application that handles them all? The other advancement to consider is increasing internet speeds. I think without fast internet web applications wouldn’t even be on the table. Web applications free you from specific platforms, and you’re only limited by browser capability and connectivity.

PhoneGap is a great interim solution, but I’ve yet to see an excellent app design come from it. The proliferation of platforms makes a designer’s job difficult at best, but knowing your market can make the decision easier. Focus more on usability and you will create a better application that more people will use.

The ultimate situation occurs if you can combine html/css with javascript you can produce web apps that go to PhoneGap and then you’ve 80% of your bases covered. This seems like the way to go for now. Monetisation of these web apps already exists (plenty of examples out there like Xero, HarvestApp, GoSquared, Basecamp and more) we just need usability and responsive design to follow suit so web apps work on any device, and then we won’t need mobile applications.

I play in a band called SugarBang and have designed a band poster for nearly every gig we’ve had since July 2011. Here’s some highlight samples from that series.

(Click one image to review all in a lightbox)

I was meeting with my peeps from Stylah last week and we were discussing iphone app opportunities, and more specifically the design process leading to project acceptance. I brought up that paper prototyping is a fast, economical way to show app interaction and functionality. They were skeptical, but enthusiastic.

Stakeholder buy-in hello wanky business term #48! is vital to any project going forward, and the dev team doesn’t want to have to build the whole thing, wasting time and effort, in order to get project approval. Paper prototyping + video gets around all this. Just get a cut out of an iphone and print a big piece of paper with your screens on it, then do some stop motion video to show functionality, user story and app flow.

Here’s a wonderful example of what I was talking about. While it reviews a kiosk app, it shows what I mean so well I just have to share:

Ponto i – Paper Prototyping from Felipe Sad on Vimeo.

Click here if the embed doesn’t play.

Fishpond website in 2010

Fishpond in 2010 had a great catalog site, but not as good a customer site, so I rearranged some content but mainly added primary content to show top titles. I wanted to get the user/customer involved by showing them popular titles and then letting her dig into the site using search.

Search appears to be the primary action on the home page but I’d prefer to be shown product (entertained, really!) so that if I don’t have an idea what I want I can get some quick ideas.

I knew from their marketing that they were expanding into Australia and also competing with the big retailers like Amazon, so I wondered if I could help the design to beat Amazon’s (which I hate; still too cluttered!)

Fishpond wireframe

More often than not when you shop you’re looking for something specific. I put a product scroller right at the top and as the first navigation tab so it’s the first thing a user sees. She can buy that product now, or search through the carousel to see other most popular titles.

The Search area is top right on every page so if she gets a whim she can enter a title she’s heard her friends talk about, or even something mentioned on tv.

I felt it important to organise various user-centric sections near the top like Recommendations for You (based on recent searches and user account information), This Just In (to sell more popular releases that aren’t shown in the carousel) Browsing History (to show content she’s seen before so she can easily add to cart if she makes a decision to do so) and Bestsellers, to quickly and easily show the most popular titles.

While I agree this display choice highlights popular items and might alienate some, it’s the process of choosing these titles that shows customers what’s there, and allowing them to search on their own lets them discover titles that are more to their taste.

I added a deep footer for sitemap purposes and as a secondary navigation. Sometimes you just have a shipping issue and you want to get in touch with support to task that question; hiding this function only causes problems and bad customer feeling.

Fishpond design

My goal with the design was to make updates without changing the overall styleguide laid out by the original site. I wanted new users to come to the site and know it was Fishpond (don’t want to break this trust!) but also to have them say they found it easier to navigate.

Top right I kept some blue for the signup and login feature but also made the logo more prominent and added an even more eye catching shopping cart. What’s the one thing you hold onto when you go to the store? The shopping cart. So I made sure this cart is always easy to reach, easy to read, and easy to buy from.

All section tabs are gray except for the active tab which is bright orange. The carousel area (jquery) flips through top titles at a good clip so it’s easy to review these and to jump around in case one gets missed. A prominent Buy Now button is helpful rather than being too demanding.

The other sections are either green (secondary) or gray (tertiary) so the user can find them but she isn’t confused as to what the pimary area is (the carousel). Secondary links and action buttons are green so they stand out but don’t conflict with the Orange/Shopping Cart function.

Fishpond website in 2012

I’m happy to see the website is starting to take hierarchy more into account, using the product slider for featured products and adding order functions to a top bar “account” area. Search is still more prominent than the cart, but I can see why this hasn’t been changed since 2010, it’s probably the way most of their customers shop (they can discover this fairly quickly by checking Google Analytics).

Ponoko is:

A Personal Factory, where you can buy, sell & create custom products. Use the world’s easiest making system to create real products, on a short run for optimal cost.

I love Ponoko’s concept. So when I went through the website I couldn’t help but think the Make section of the website needed some attention because it is the primary purpose for the company and the website itself. The website since has been redesigned, but I wanted to share my thoughts on what I would have done to update its usability.

My thoughts below, and be sure to check out the video below, I walk through the wireframes step by step. Gotta love Balsamiq! It makes these wireframes a breeze to create and in clickable format for presentations too.

Click here if you can’t see the video above.

The Make page becomes the focus

I noticed equal bearing was being given to all pages of the website, but I considered the Make section to be primary, so I put it first in the nav line and also in the main content area. I then added Commission (request a product) and Marketplace next; of course they are important, but Ponoko’s mission is to be a Personal Factory first and foremost.

Make page additional features

I had some other ideas: Top right needed to show if a user was logged in or not, and give the opportunity for new, tech-savvy users to set up an account without further ado. Below, instructional videos are always available to help users find their way and get ideas on how things are Made. Just Made features other users’ products, and Marketplace is where someone so inclined can shop for merchandise.

I decided on a deep footer that would be carried through to all pages so all areas of the website are always accessible, and to keep the social links and newsletter signup available but out of the way. Deep footers are also good for SEO since they reaffirm the sitemap and content.

Make section is selected

Next, choose Make to arrive at the Make start screen. Several options here: Login and start making, choose a tutorial from the drop down menu top right, and then Sign up to start making. All easy to follow steps with no clutter.

The two kids are explained below, with big download buttons to keep the user engaged. She doesn’t want to have to search far to find out what she wants; if this process takes too long she’ll do a quick web search and find another site to become her Personal Factory. Not good!

Make section, step one: Imagine It

Large icons showing “breadcrumbs” helps the user go from this step through the rest. This first step shows the title of the project (Jeff’s Table) and what to do next: Design It.

Make section, step two: Design It

This second steps allows Jeff to choose Materials from the right hand column, materials sourced are based on location so that must be selected first. This section reminds the user how to use the Starter Kit to create a Ponoko Template from his favourite digital drawing application.

Make section, step three: Make It

The third “Make It” page lets Jeff upload his template, he adds his parts and materials and a final price is built from this information. When he accepts all information is correct he goes to the Refine It page.

Make section, step four: Refine It

The “Refine It” page, page 4, sees Jeff refining his design based on recommendations given by the FAQ and Materials Catalogue pages. Information is filtered based on what the system knows this item to be. Tables will have different overall specs than chairs, for example, and we want to show that relevant information.

Make section, step five: Sell It

This fifth and final stage sees the Ponoko system recommending Jeff sell his product on the online store, after first reminding him of the Selling Tips. He can click Sell It to go to the Marketplace to sell his product.

Ponoko is an amazing company, and I think Personal Factories are the future. They eliminate waste, every product built has a known, specific customer instead of just pumping out volume as current mass production does. I’m excited to see Ponoko get the attention Xero is getting in the news, long live Kiwi DIY!

Current Website

WorkFlowMax was just acquired by Xero, I’m so happy for them, and the partnership I’m sure will yield award winning design integration.

A while back I was asked to do a design study on the WorkFlowMax web app interface. I’d had the chance to use the application for about a year and so had lots of interface ideas saved up from that time, and I submitted several interface ideas that were then added to their update worklist. So I had a lot of inspiration from which to draw.

See the progression of this Design Study below. In all screenshots besides Styleboard I provide the original screen on the bottom and the updated design on the top.

Styleboard

The Styleboard got Chris Spence (Software Development Manager) and I on the same page regarding inspiration so I was able to formulate specific design keywords: Clean, Professional, Clear. The Styleboard covers button styles and colors as well as text treatments and information hierarchy. Rather than saying, “make it look hot”, this Styleboard got us thinking how can we make it simple and easy to use and beautiful (ie: rounded corners) while providing excellent usability.

Calendar

The existing Calendar I thought needed a cleaner way to access the project information. It wasn’t showing multiple jobs on one day very well, and it wasn’t differentiating between Jobs, Tasks, and Milestones as well as it could. I wanted to emphasise the month and day of the week, but make the contained information the star; so the background was minimised and Important Dates made more prominent with color and a handy color key just in case. The key doubles as a filter so you can see just the ones you want.

Note History

Note History was supposed to be a chronological map of project progress, but instead it made it very difficult to know what to do next. I decided the next action would be to comment on a selected Note and to higlight with the button how many Comments were available, thus spurring conversation and interaction. Notes from Today, and unread notes would be highlighted to draw attention and action.

Lead History

Lead History needed some breathing room. I gave it more line spacing and used some bits of color to highlight titles. No layering was needed here since it was basically an activity stream. Sales staff need to know what the new Leads are and who created them so effective follow up can happen. The paying items get a green money icon next to them; the potential paying accounts are gray.

Our Customers / Testimonials

Our Customers testimonials page was a study on their content pages that weren’t necessarily app pages but static information about the company and the product. What convinces many people to pay for an app is the recommendation of a friend, and knowing there’s a lot of support behind it. This page highlights both, and makes it obvious, but not too overt, that taking the 14 Day Trial is the next logical step.

WorkFlowMax has a solid customer base and because of the Xero purchase will get even more worldwide exposure. I’m excited to see them grow and to see how they update their application interface in the future.

Wine-Searcher is an internationally known wine database website based in New Zealand. Their established user base expected the best information worldwide around where to get wine and for what price. The brief: expand its audience without disturbing its existing users.

Based on this I explored redesigning their home page by adding news style content around the search functionality. I wanted to add some magazine design style and interest to their search page, without disrupting their current users. The big question was, how to do this tastefully?

At the time of the project in late 2011 the website looked like this:

My inspiration came from the L.A. Times and New York Magazine website designs – they handle lots of content in a beautiful way without information overload. They are two of the most well designed news websites out there, and I tried to learn as much as I could from their designs in order to inform my own.

Styleboard

I looked at some other sites for more inspiration and came up with a styleboard – a collection of inspirational images whose sole purpose is to get agreement on the look and feel for the design, sometimes focusing on various elements like buttons or processes. Here I focused on presenting news content and a clean look:

Wireframe

With this Styleboard I was then able to go to the Wireframe stage to build a page with content without any concern for look and feel, yet. This provided the chance to quickly determine what information was required and where, and allowed me to tackle the problem of how to integrate the Wine Searcher search functionality with the news information in a tasteful way:

Hi-Fi Design Stage

Next was the Hi Fi/Design stage; actual look and feel graphics. Doing this in a layout program instead of photoshop allowed me to move fast and make changes while not having to commit to the direction; there were no guarantees this design would ever be used:

This project was a great example of taking a very abstract concept and making it a reality by following my usual process.

You run a WordPress blog, your digital marketing is going well and people are starting to find you, but, so are the wrong ones – the spammers. Fear not, there are four things you can do immediately to stem the tide.

First, use WordPress’ bog-standard Comment settings. Some things you can update immediately are: Number of links in posts, spam words to filter, comment blacklist, moderate all comments by hand, pre-approve comments from old commenters, even restrict comments to registered users (though enforcing this means you tend to lose good commenters who don’t want to bother).

Then consider installing all these WordPress plugins for your WordPress.org self-hosted blog:

WP Hashcash

WP Hashcash is a fantastic plugin that does the following:

WP Hashcash is an anti-spam plugin that eradicates comment spam on WordPress blogs. It works because your visitors must use obfuscated javascript to submit a proof-of-work that indicates they opened your website in a web browser, not a robot. If the javascript check fails, WP Hashcash now gives you three options; it can either put the comment into moderation (default), put the comment in the Akismet queue, or delete it.

It’s main benefit is checking to see if a commenter is viewing your website through a browser or not. This helps keep out bots and other automatic spamming techniques. Very good, simple plugin.

Login Lockdown
Another simple plugin is Login Lockdown. In its own words:

Login LockDown records the IP address and time-stamp of every failed login attempt. If more than a certain number of attempts are detected within a short period of time from the same IP range, then the login function is disabled for all requests from that range. This helps to prevent brute force password discovery.

I get several notices a day just from this plugin alone, it seems to be blocking those spammers who want to hack my blog. It happened once which prompted me to install this plugin in the first place; don’t need any Cialis or Viagra, thanks!

Akismet

The granddaddy of them all is Akismet; it’s the first port of call for spam blocking and it does a wonderful job because it’s web based and all users “phone home” to their servers which builds an ever growing list of spammers that can then get blocked by everyone else. A must-have on any WordPress website. Donate if you can, but you can get a free license for one website using your email address.

With any luck, these three plugins and techniques will keep your blog/website as spam free as possible.

Xero aquires WorkFlowMax and more funding from investors

Wellington, New Zealand-based Xero has just acquired Auckland-based WorkFlowMax. This is an amazing development, but not unexpected. I see this acquisition as a sign New Zealand is starting to join forces, breaking through the barrier that is the DIY attitude. Many hands make light work.

I love both systems, and I think with Xero’s stellar management team and design staff, WorkFlowMax will be the perfect addition to Xero’s stable. MYOB? What MYOB? I love great design and Xero‘s website and web-based software are top notch, they win design awards every year it seems.

Facebook officially announces IPO filing, gets ready to make 1000 employees millionaires

Facebook just officially announced its IPO today. But I think as the mystery fades about its actual profits and user numbers (and thus, success) so too will its stock price. Zynga and Groupon have not fared well, they do not have an actual product to sell or inventory beyond their servers; if they are cloud based servers even that is questionable as an asset. The S-1 is analysed and other risk factors explored on TechCrunch.com today.

Both Xero and Facebook have loyal and expanding user bases and simple, clean designs. Oh, and the color blue! Red is used these days for fun, photo sharing companies, not serious accounting software or social networks. Hear me, Bebo? I imagine WorkFlowMax will follow suit and take on a navy blue hue – something, organised, serious and professional.

Are you excited about the Xero/WorkFlowMax acquisition? I am, even more than I am about Facebook because it’s a step in the right direction for New Zealand business.