Bzzzzzzzzzz….

Re-designing Bombinate’s site

Differentiating an e-commerce site from the standard

The word ‘Bombinate’ is one of the 10 least used words in the English language. It means the collective buzzing of bees, which epitomises what the Bombinate brand is; a collective of high quality brands from across Europe coming together in a community. Bombinate isn’t just an online marketplace allowing users to discover high quality and hand-curated products, it represents a lifestyle and a way of thinking. It poses the question;

‘What does quality mean today?’

The Brief

With such a unique brand, Bombinate want to find a way to show this further and differentiate themselves from other e-commerce sites. Although they have a lot of captivating content, this needed to be utilised better throughout the shopping experience. Conversion rates could be higher, with the average bag size at 1 item. Therefore, not only is Bombinate looking to increase their brand awareness but also to streamline the actual functionality of the site to promote further browsing and reduce drop off.

The Current Site

We began the process by conducting testing on the current site to really get an idea of the users thought process and pain points. We gave the users the task of buying an item on the site. The experience map below depicts the main user pain points;

The main pain points from the testing were an overload of content on the homepage, feeling the products were too expensive, unclear navigation, a lack of brand awareness, a confusion over lack of a bag summary page, frustration at making an account and feeling overwhelmed at 3 forms on one page during the checkout. These are the points we really wanted to focus on solving through our design.

Research

Competitor Analysis

With the problems from the testing, we needed to conduct research to get insight on how we can solve these problems. We used competitor analysis to give us inspiration on how other e-commerce sites were a) conveying branding and b) managing the basket and checkout process.

Branding

We used the above companies to get inspiration on how they convey their branding. All of the above have a strong brand identity, and were mentioned in user interviews as good at portraying this through their site.

We found the following common themes for conveying branding;

Imagery

Content (lifestyle imagery, blogs etc)

Consistency

Storytelling

Personal tone of voice

Checkout Process

We then looked to larger, more popular e-commerce sites to get an idea of the best practise for checkout process. We found that;

Order Summary

Progress Tracker

Editable basket

Security

Simplicity

User Interviews

We conducted 14 user interviews with people fitting the Bombinate target audience and relevant to our project. All users were:

  • In their 20s or 30s
  • Brand conscious
  • Frequent e-commerce shoppers

Key findings from the interviews were that whilst e-commerce sites should portray a brand story, they should remain simple and clean with easy navigation. A clear brand identity proves more engaging and this, combined with a product story, will justify the price of a product. Quality is key and therefore this should somehow be conveyed on the site. Users want to have available detailed product information. The basket should be easy to view and edit at all times. Finally, the checkout process in itself is not particularly enjoyable and therefore should be as efficient and simple as possible (Paypal, along with Facebook and gmail log in is a way to minimise pain points).

Conclusions

Taking from user testing, user interviews and using competitor analysis as a guide, we came up with the following conclusions;

These findings would go on to heavily inform our design solutions.

Persona

We used what the client informed us in the brief about their target audience (male, 30s, spending power), along with insights from our user interviews, to shape a persona. Meet Jack Rutherford;

Jack Rutherford

Scenario

What are we designing?

We had a design studio with the client in which we decided the screens we would be focusing on; Product Listing, Product Detail and Checkout Screens. See below the current screens on the site.

Product Listing

Product Detail Page

Checkout Page

In the design studio, we focused on the product listing and product detail pages. Here are the outcomes from design studio;

Product Listing (Left) and Product Detail (Right)

On the product detail page, the information architecture is changed as users found in testing that having the description below add to cart was odd, and interviews proved description is very important when purchasing more expensive products.

From the design studio conclusions, we moved on to testing over the weekend. We found from the users that we weren’t really moving away from the typical e-commerce feel or providing an innovative and exciting user experience. So, we worked into the late hours of the night coming up with new creative solutions for both of these screens.

Screen Iterations

Product Listing Page

First and Second Versions

Our first iteration of the product listing page on the left comes after testing the design studio screen and finding it wasn’t particularly exciting or innovative. At the top of the screen is a large photo banner reflective of the sub-category and adding in some personality. We added large product banners across the screen to showcase the high quality products, input icons which tell the product journey (country manufactured in, hand crafted or eco friendly, material), and added a quote to help get the brand voice across. There is also a quick view and favourite option which comes up when you hover over the photo. The test feedback on this version was that the product banners were actually a little too big to have on every single row, especially if there were many products. This would mean too much scrolling. The next iteration on the right has two products on the first line, layered with one on the next for a more featured product.

Third and Final Versions

For the iteration on the left, we changed the second banner from a product to a brand, in the hope that it would further push brand awareness and discovery as this wasn’t evident in user feedback. In addition to this, we removed the quote from aside every single product and left it for the large banner, as users felt this was a bit of an information overload.

For the final iteration, the brand banner is changed back to a product banner. When we tested this, users mentioned it disrupted their shopping flow, and that at this point they are only interested in searching for products. Why would they want to discover a brand here when they don’t know what it sells and they are trying to find products? Users also mentioned that the quick view hover feature was blocking their view of the image and this was disruptive. We therefore changed it to an eye in the top left and favourite heart in the top right of the product image (final iteration top left picture). Users mentioned in testing they would like to be able to scroll through images from this page. We inputted a subtle carousel feature with circles underneath to show users how many photos there are to scroll through. Finally, we made it clearer where abouts the user was by underlining and making bold the current category,

Quick View

Above you can see our iterations of the ‘quick view’ slide in feature. The initial feedback was that there was too much information, and users really do just want a quick view to be quick. We iterated so that instead users have all the different colour options so they don’t have to hop in and out on the listing page. From here, however, users were struggling to understand how to get to the product detail page. Therefore, we added in a clear call to action button on the final iteration saying ‘View In Detail’.

Product Detail Page

Our initial iteration of the product detail page (after testing the design studio outcome) has a ‘stuck’ description box that allows the user to scroll through the images but still have the description box there at all times. This was a more creative and innovative solution. We found from testing our first version that users really liked the ‘who, where, how’ feature as a way of conveying branding and the product journey, but they didn’t feel it was prioritised enough. We changed the hierarchy in the second iteration (right). Further, the ‘More from this brand’ feature at the bottom was not inspiring users and wasn’t something they would be keen to click on if they had just looked at a product from this brand. Instead, they would want to be prompted to discover different products. We changed this to a ‘Recommended for you’ feature.

Final Product Detail

For our final version, we moved the stuck description box feature as we found it was confusing some users and taking away from the product focus. The ‘Who, Where, How’ banner now sits clearly underneath the product images and description, followed by a brand image, quote and video to really increase the brand awareness (we found in research video is a particularly effective way of communicating brand).

Basket Summary Page

This is a new page we implemented to allow users to reflect on their order, edit it if needs be and discover more products before committing to check out. The feedback on the first iteration was that the spacing was unclear and ‘Total’ and ‘Delivery’ were not easy to find. In the next iteration we changed the layout so the order sits separately to the cost and delivery details which have their own box. We also removed the wording ‘Remove?’ under the bin icon as users felt this was a bit much.

The checkout process currently is 3 forms on one page, which users felt was overwhelming, but liked that they could see the process. We therefore split up the forms but added in a progress tracker so the user was still aware of the steps.

Details

One of the main pain points from testing was that users had to make an account. This screen allows the user to either log in or enter your shipping details as a guest, but then have the option to simply create a password to save the details. Originally there was a tick box to use the details to create an account, but users felt this was misleading. We therefore iterated to instead use the ‘required field’ stars. In the end, users found this page confusing as a whole because they felt log in options and shipping details should be on different pages. In the final iteration, we created two separate pages and allowed users on the log in page to use their account, guest, create an account or log in with Facebook or Gmail (see final clickable prototype).

Payment

The payment page proved easy for the user, however one of the key points from research was Paypal improves the process. We implemented a PayPal option on the final version.

Confirmation Screen

Testing feedback on the first iteration was that the user had already seen their order summary, and therefore would like to see other details confirmed (payment, address, delivery). The final iteration has a clear display of all details entered during the process.

Information Architecture

We felt it was necessary from testing and for our design moving forward to re-do the information architecture, as this was a key pain point from testing.

This is the current information architecture on the site. To find out the most logical way to the user, we conducted a number of card sorting tests. First, we began with 4 open tests where users were given all sub-categories on the site to put into over arching categories.

We analysed the categorisation of the 4 open tests and used them to inform the main categories. We then conducted 3 closed tests, where users were given the main categories to sub-categorise within that.

After analysis of all the card sort tests, we were able to come up with the most clear user-driven information architecture. See the new site map below;

Clickable Prototype

Outcome

The client is impressed with the work and is looking to implement the new designs in January.

Final Version Quotes

“The icons really resonate with me, because I like to know where the products come from.”

“Like that you can see where it’s from and designer, very informative which is good.”

“Yeah got to know the background and where the shoe came from and that justified it, got a feel of the quality.”

“It’s very, very clear and concise. There aren’t many websites that allow for a seamless progression from browse through the checkout”

Before and After

Product Listing
Product Detail

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Charlie Phillips

UX Designer with a background in Social Sciences and Human Research. Currently working in Just Eat’s global design team.