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.
Part 1 - What's broken?
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.
Making sense of it
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:
- Scroll Blocking - Users scroll, of that there is no doubt, but there are instances where a design creates 'scroll blocking'. This happens when a user thinks they've reached the end of the page and therefore stops scrolling. We witnessed this many times on our product page.
- Obox Mobile - Users thought it was a plugin to help post content online.
- Free registration - Because we had the words "We don't spam" below a registration form, users thought it was an email subscription form (it's not).
- Screenshots - Users looked at screenshots and deduced the feature set from there. Not from the "features" copy below the screenshot.
- The Demo button - Despite it being right next the buy button... no one noticed it!
- The checkout process - Pretty much everything about it is wrong, but unfortunately we have no control over this yet (another post for another day).
- Macs - The obvious display of a Mac laptop is confusing and misleading... "will this work on Windows?" is a common contact message question that we get and it was confirmed during this experiment.
- Too much choice - by having different demo types up front, we were offering too much choice before committing to a theme.
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.
Part 2: The Changes
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:
- Theme discovery - Ironing out the way in which themes are found on our site. This meant redoing the category pages and tweaking the copy on our home page.
- Product page refinement - Clearer copy, subtle icons to emphasise that the feature list was clickable, better demo buttons and a better screenshot navigation.
- Pricing options - Once a user had decided to commit to a theme we needed to be clearer in our pricing descriptions.
- Post purchase - After a user has paid the dollars, we had to define a clear path to gaining access to themes. This was more complicated than it seemed!
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:
Pretty icons vs. boring checkboxes
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 100% 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:
- Once something is clicked what icon must appear?
- If an item is selected, what icon do you show upon hover?
- How do you avoid that icon to display AS you have selected a category?
- Once you have unchecked a category, which state of icon do you show?
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.
The product page
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:
- No one saw the demo button.
- No one used the slider arrows and therefore didn't realise that there were more screenshots.
- No one saw the feature copy.
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."
Call to Action
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.
Some other tweaks
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.
More to come
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!