The Bevy Store - Case Study

- Background

The Bevy Store is an e-commerce platform started during lockdown in 2020 to help boost the income of the local hospitality industry while doors were closed. They had hastily built a basic Squarespace site, but as business grew this needed to be expanded and properly organised to increase sales.

Building on their existing branding, I gave the site a refreshed design; but most importantly put serious consideration in to information architecture to smooth out the e-commerce experience.

After the redesign, TBS saw an increase in sales, conversion rates and page traffic, and a decrease in abandoned carts.

- My role

UX Design
UX Research
Web Development

- Tools used

Squarespace
Adobe XD
Adobe Illustrator
Google Analytics/HotJar/Serpstat

VIEW WEBSITE >>

VIEW DELIVERABLES >>

- Analysis

‍The site was already built on Squarespace by the client, meaning the bare bones were in place. There was however no organisation or IA design for e-commerce and the shop displayed all products in one long list, with no use of filters or categorisation. I started by reorganising and rebuilding the navigation menu, as seen here.
‍
Concurrently, in an informal manner I spoke with stakeholders: the client, one of the bars selling their products and two typical users. One was a local user who had used the previous site and one further away who hadn't - TBS was looking to expand UK wide this point. From this, I was able to learn about the goals and motivations of the users, and their requirements for the site. Using this and previous user data, I created user personas. These reflected two typical users and provided insight to their needs and wants from the site.
‍
Using the personas, I was able to create a customer journey; assessing the touchpoints at all stages. This helps to identify potential sticking points in the process of buying, and highlight opportunities to increase conversion, sales and return business.
‍
I then created user flows to demonstrate the paths a user could take to complete a basic task on the site - buying a product. Again, this helped to identify potential navigational issues and led to the design of a navigational hub type page.
‍
Design outcomes
‍
As mentioned, the products had previously been displayed in one long list with no use of filters or grouping. I created a shop ‘hub’ page with products grouped in to categories and link groups such as ‘cocktails’, ‘wine & beer’ etc. Squarespace does not have a filtering or sorting feature, so I decided this was the best way to help users along the multi-step journey.
‍
Secondly, the feedback from the users and subsequent user persona/journey highlighted the complexity of the delivery options at checkout. This was something I was also able to simplify.
‍
The data from the most searched items on the site was used to create the ‘best selling’ section on the shop hub, meaning popular choices were very easy to find.

Example of user persona

- Design

The design was kept very simple and minimal at the client's request.

They had expressed interest in the Minor Figures and Cocktail Man websites and wanted a similar design to these.

Using the existing logo as inspiration, I chose Promixa Nova for the heading and body fonts. The client had mentioned wanting to use pink so I chose a hot pink shade (#FF7BBD) for buttons and accents.

I created several line illustrations of drinks to be incorporated across the website and social media posts. Ideally I would like to have animated these but time did not permit.

- Build

CSS was used for button design, and some CSS, Javascript and markdown was used to create accordion sections as this was not a feature on Squarespace at the time.
‍
Markdown code was also used for the navigational link sections to create the layout and links/buttons were animated with CSS. A back to top arrow was added as this was also not a feature on Squarespace, and this is definitely a must on long shop pages.

- Conclusions

As a result of the redesign, TBS saw an increase in sales, conversion rates and page traffic, and a decrease in abandoned carts. They expanded the business, opening a new production unit, hiring more staff and, seeing the importance of a strong online presence, hired a social media manager to further promote the brand and make website updates.

Doing research for this project highlighted the importance of strong navigation in e-commerce. User flows and customer journeys demonstrated flaws in navigation and opportunities to improve these from a UX and marketing perspective.

In terms of lessons learned, I would not use Squarespace for a large e-commerce project again. TBS were already using Squarespace and we decided that sticking with it would be most comfortable for them on the commerce side of things. However, I would not recommend using it, unless your site has a very small amount of pages and products.

Many simple functionalities you would come to expect from a web builder are missing, requiring custom code at almost every turn - everything requires a workaround in some way. What's more, adding custom code for basic design features (e.g overlay on hover) begins to slow the site down. It doesn't feel robust at all.

The main limitation is the lack of navigational features available for e-commerce, for example breadcrumbs, filters & sorting. It becomes increasingly difficult to provide navigational feedback to the user and increases the interaction cost of browsing the site, potentially leading to lower conversion rates.

Given the growth of the business, if I was doing this project again I would insist on using a more robust platform such as Webflow with a Shopify API. This would also allow for the addition of would-like-to-have features such as Group Ordering, Favourites/Saved Items list and ApplePay.

<< VIEW PREV PROJECT

View next project >>