Synopsis —

Vancouver company Urban Body Organics (UBO) approached us with a proposal for a redesign of their existing website. Because UBO sells natural wellness products out of third party retailers they recognized the online storefront as a key opportunity to impress their brand upon users and hopefully sell some products.

Team —

While we all contributed equally on the project, there were areas we each lead the others with our own expertise.

Constraints —

With this project we had two full weeks to develop a solution. Including our meeting with the client. The main constraint for us was the capabilities of the cart plug-in for their current website. We wanted to reform the shopping experience, but had the potential to be limited because of the Wordpress e-commerce platform they were currently using.


Research & Discovery —

Just a couple minutes with the site and we already had some strong ideas about scope and direction of our work — site items needed to be consolidated, user flows needed to be ironed out — but since time, in this instance, was not an issue, we decided to make our process as thorough as possible: we conducted a heuristic evaluation of their existing site, a look at competitors through a comparative competitive analysis, then we conducted a dozen user interviews and as many contextual inquiries, walking users through the site with specific tasks.

A few layouts of the old UBO website.

What surprised us most came after we asked users finished interacting with the site to tell us a bit about the company. While most people recognized that the company was local, not a single person recognized that their products were all organic, or sustainably sourced. What more, only a couple users recognized their engagement in the community and the fact that all their products were hand-made in small batches. What made this information vital is that prior to being shown the UBO site, Users responded unanimously that social values, quality ingredients, and size of business, were the three of the most important factors in a User’s decision whether or not to support a company. With our preliminary research finished, we settled on a three-tiered plan for the re-design.

Most important factors in a user’s decision of weather or not to support a company.

The Middle

Planning & Flows —

Distill Content

Information Architecture — We wanted to make the site lean and concise. So we performed a Content audit, cut out all the redundancies and then amalgamated some pages. The result was much better.

New site map, compared to the site map we built while conducting the old site content audit.

Navigation — We also consolidated the menu’s from the old site, and gave the user one clear navigation.

Highlighted in pink, the old site had two menus, during testing we found that users constantly missed the menu bar at the very top of the site. We consolidated them into the simple menu you see on the right screen.

Disclose Progressively

We already talked about how found Users could know more about the UBO brand. Another thing we found in our contextual inquiries was how the listing of product information is repetitive and sometimes inconsistent. With this in mind we put ourselves in the User’s shoes and walked ourselves through a couple flows to best see where we could capitalize.

We added more text and engaging images to the homepage, as well as a fixed banner to the shop page.

In the shop, with our product descriptions, we consolidated all the product information, and categorized it based on what our users told us was important. Because we found overwhelmingly that surprise shipping fees were a major pain point on the part of the user, we included an option to calculate shipping before the checkout process began.

Engage Users with the Brand

Some of this has already been mentioned up above. I won’t go over again our ways of progressively disclosing brand information, but I will mention two other ways in which Users were brought into direction engagement with the site. First, more conversational copy was developed. Second, we added clear calls to action for the user on each screen. The aim was to give the page a more live and conversational feel.

The success of this is maybe best exemplified on the checkout page: after the user has completed their flow through the purchasing process — presumably with nothing left to do with the site — they see a banner at the bottom of the screen that engages them in two ways: first, it informs the of the impact of their purchase; and second, it invites them into further engagement with the site.

Though we didn’t get to test this banner for its effectiveness in User retention, its hypothetical function fell right in line with our strategy.

Final Stages —

After developing these concepts out, the final product was a far more engaging website experience for the UBO customer. They would now be reminded of who UBO is and what they stand for with every interaction on the site.

Wrap up & Next Steps —

One of the biggest lessons was the extent to which User research can deliver surprises. All that information about the brand was common sense to us — we knew the story — but with users it was far less evident.

Also, the benefits of time and resources. UBO is a fairly small company, so there was no existing user data that we were given access to. If given the chance to do the project again, we would like to have developed more User data, and done more testing. Especially beneficial would have been an A/B with the existing site and the new one.

Their new site is now up and running, and they followed quite a few of our recommendations, check it out.

Find more of my work on Behance.
All the images used were provided to us from UBO, as well as a few from their Instagram.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.