The Obox site is always in a constant state of change. Not a week goes by where either Marc or myself push a new update to the site in the aim of improving user experience or conversions.
One of our missions this year was to focus as much as possible on User Experience and then take those learnings and apply them to User Interfaces.
We were tired of just going by feel and wanted to actually see and know what was happening when a user experienced Obox in any shape or form.
Initially our brief was figure out what’s wrong with our checkout process (aka 2checkout). But they decided to go much deeper than that.
The whole process was quite thorough, including a 5 hour interview with us, which involved gathering information about Obox and our users. With all that information they were able to recruit the right type of people to test our site.
The next step involved putting these users in a room and watching them use Obox. There are many cynics out there who don’t believe in this but I can tell you now that it was one of the most eye opening experiences of our professional careers.
The bottom line is it doesn’t matter how good looking your site is. Watching a layman use your product will blow your mind. You cannot even begin to imagine how your users interact with it.
Unless you SEE them do it you will never quite be sure.
The user testing involved a full days work. It consisted of observing individuals browse our site from home page to the final checkout point and then making notes along the way. During the review, Marc and I each made over 1000 notes. This is not a lie.
We then had to collate all this data and decide on how we were going to fix the problems. Not only were there visual problems, but also functionality problems. So, while we were busy figuring out technical elements, Flow went and created documents and wireframes based on their observations.
Both teams then met two weeks later to discuss the solutions to the problems, of which there were many.
Overall the user journey on Obox was pretty solid, our call to actions were good and users generally knew where to click. The problem was in the details – the words we use, the placement of buttons and the omission of subtle icons can completely destroy the navigation of a site.
Below are some interesting facets that we stumbled upon:
Included in the Flow doc were some recommended layout changes which we should make to Obox.
Overall there were probably 100 or so items that needed to be redone. Some of them we did on the day of the test, however others take more time.
Given the scale of some of the changes that were needed for Obox, we had to work from the core outwards as opposed to a sprinkle of changes here and there.
We pinpointed some key elements to start with:
After we’d fixed the flow we then had to review design and copy consistency, to make sure we didn’t mix words or colors along the way.
Probably the most important part of your eCommerce site is making sure that users can find what they’re looking for. On Obox it wasn’t great, so we decided to drop the simple method of browsing and up the stakes a bit with a new ajax page loader.
The detail required for this page is amazing. Below are some iterations just for the category list:
Initially we had beautiful little icons placed next to each category item, but when put through the tests we saw that users had no clue that they could click on more than one at a time. The result was we had to go with icons that looked more like checkboxes. Not as pretty but 100percent more functional.
You’d think a link would just need one hover state, but with the ability to select multiple categories you need to consider the contrasts and actions between four different states. This included issues such as:
You also have to consider reactions to a load screen. When clicking a category, we initially had a smooth fade between results but users didn’t notice that anything was changing, so we had to go back and put in a ‘fake’ load bar so that the refresh was recognisable.
When working on the product specific page we faced a number of challenges. The proposed wireframes were quite a departure from our current layout and I spent two weeks trying to get them to work.
The problems were:
First thing to tackle was the screenshots because this set the foundation of our page layout. I spent two weeks trying to get this right but eventually we came full circle to land up with an iteration of our current design.
The wireframes from Flow proposed that we display thumbnails and remove the slider arrows. We tried various solutions for this but none of them made me happy. The aesthetic was just wrong despite the solution possibly being more ideal.
So, I decided to emphasise the slider arrows by simply moving them closer to the screenshots and making them bigger. It worked, sometimes a simple solution can be found :)
Once that was sorted, the rest of the changes involved minor tweaks. We gave the demo button more prominence, added a “Features” title above the feature buttons and added a little arrow to each button so that they looked less like titles.
Lastly, we removed the base of the Apple Laptop top so that it wasn’t as identifiable. The result has been less confusion over which OS our themes work with and it helps stop the scroll blocking because there is more being shown “above the fold.”
The last change worth mentioning is the buy now and demo buttons. Testing revealed that the demo button was not being picked up at all, so we set upon redesigning the product title area.
What’s worth pointing out is that we simplified the english considerably. Instead of saying “Try out the Demo” and “Buy Now” we’ve gone with “Demo” and “Buy”.
Why? Well, we recently installed Olark on Obox and the amount of foreign language users visiting our site has been surprising. What was also surprising is that they use the live chat more than most.
So with that data, simplifying the call to action copy would be a worthwhile experiment even if it is a bit bland. We’re keen to see the results of this particular test.
Those with a keen eye for typography may realise that we’ve changed to Proxima Nova. Besides the fact that I’ve loved this font since I first saw it, I wanted Obox to become more consistent with its font use.
I was tired of getting confused with questions like, “is this title meant to be Futura or Droid?” With Proxima I can keep our gorgeous bold page titles but also keep things consistent in the content areas. There is some tweaking to still be done but overall I’m really happy with the transition.
New contact page
To help you get to the right place on our site – and to cut down on frustration – we’ve added some more guidance to the contact page. The results have been great so far.
A new footer
We’ve added a recommendations column to hold approved modifiers and hosts. We’ve also added ‘Made at the tip of Africa’, because we’re proud of it.
We’ve been so taken aback by what we learned that when we looked for new office space, the most important requirement was that it had an extra room for user testing.
There are still a boatload of changes that we will be doing to Obox but they will be a lot more subtle and are maybe not worth a blog post this long.
The great news is that we’ve completely changed our outlook on developing our site and our themes. This means better products for you and a better experience from the moment you see Obox to the moment after you’ve installed our themes.
Everything we’ve learned from this is now being poured back into our products. It is why we’ve completely revamped our theme installation process, integrated a visual customizer and color coded our widgets.
To say that we’ve become obsessed with the user journey is an understatement of note.
Lastly… if you have the budget and the time then we strongly suggest you do some user testing on any product/site you are busy developing. Your mind will be blown with the insight!