Urban Body Organics


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, following the site to shop online and in-store. Also we took 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.

Target User



To understand customers online shopping attitudes and behaviours.

Contextual Inquiry

To identify problems of current site, as well as finding out behaviour pattern.

What We Found
  • 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.
  • Customers are willing to have a physical experience before purchasing a product, consistent with one of Qmatic surveys.
  • Shipping fees were a major pain point for online shopper.


Identify Goals and Priorities

We did some proper planning around work and resources required, to make the most of your time in three weeks. We used a tool called The Impact Effort Matrix to help us with decision making. We chose which activities to prioritize and which ones we should drop.

Distill Content

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. Flows became more direct and less intersecting.

The original sitemap was clumsy. Any tab with a matching colour was a duplicate link. You might notice as well that some of the page names appear differently from different points of access.

Gut Test With Stakeholder

Communication between team member is important to us. We were willing to involve everyone in the company in our design process, and built relationship with them. In our first kickoff meeting with UBO team, we proposed the idea of gut test to our stakeholder Kelli, so we can her aesthetic preferences in visual design.

We collected screenshots of 23 web pages we liked, and showed them in a presentation to our stakeholder Kelli. Each page was presented in 20 sec, and Kelli gave each image a score between 1 and 5, and explained why she felt that way. It turned out impactful image, with the combination of conversational texts, is the best way to deliver UBO’s brand image.


We already talked about how found Users could know more about the UBO brand. With this in mind, we put ourselves in the User’s shoes and walked ourselves through a couple flows. Our questions were simple: how much do we disclose and when?


We added some text to the homepage: Users knew what we were about right off the bat.

A more conversation copy was developed. Also, 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.

Then we added this fixed banner to the shop page. The promise stays with them until checkout.


Another thing we found in our contextual inquiries was how the listing of product information is repetitive and sometimes inconsistent. So we consolidated all the product information and categorized it.


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.


And finally 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.


Check prototype to view the full design