Process

A heuristic evaluation of the current site formed the basis of the kick-off meeting discussion, agreement of project scope, and selection of which areas to focus on first.

We proceeded iteratively with bi-weekly reviews where we looked through and discussed the work done since the last meeting, agreed any re-work required, and confirmed the next priority focus. This kept up the momentum and made sure everyone felt in control and had a sense of ownership throughout the project. It also removed any pressure from having to get the answer right the first time, allowing time for thought between regular meetings.

We agreed that putting the changes live on the site could also be done iteratively - i.e. once we were happy with a particular change it could go live without needing to wait for everything else to be ready. This meant we could get early user feedback and start benefiting from the positive impact of the changes as soon as possible.

Research

Performing a heuristic evaluation of the current website and doing competitive analysis to understand what may be missing, see how others have solved similar problems and get inspiration for the design formed a basis of the research to identify existing issues.

Having the client provide examples of other sites they liked or disliked, and importantly why, got them involved from the very start, reinforcing their sense of ownership, and gave me an understanding of their stylistic preferences.

Making use of the website’s existing Google Analytics gave great insight into existing user behaviour on a general level and enabled us to identify key areas for improvement.

Posting individual survey questions occassionally as polls on the client’s social media allowed us to validate key assumptions and hear directly from current users.

The lack of behavioural qualitative research was due to the client’s hestitancy to involve users, even potential users, despite the possible downsides and cost this may incur later for redesigns. I therefore proposed conducting A/B testing of different design options to gather data to determine which design solutions performed best with users, which was a much more acceptable approach for the client.

Define

Triangulation

Affinity diagram

User personas

I triangulated my results by creating an affinity diagram, allowing me to give structure to my findings and clearly identify common themes across my research results.

By then presenting this as user personas I was able to clearly show the context, behaviour, goals, and pain points for each user type in a way that built empathy and helped us to understand the user’s needs.

Affinity diagram

User persona: the alternative bride

User persona: the small business owner

Top findings

Low retention

High average bounce rate across all pages, particularly severe on article pages

Low average number of pages per session

‍

Likely due to:

Unclear site navigation
Blog-style homepage that only shows latest 6 articles and requires a lot of scrolling
Placement of links to more articles on article pages being below the footer
And confusing search capabilities

Low conversion rates

Slightly lower than the sector average

Most of the revenue from subscriptions alone

‍

Likely due to:

No clear CTA across the site to encourage users to subscribe
Link to latest issue of the magazine not immediately obvious when arriving on homepage
Information pages for business owners very long (TL; DR)
FAQs mixed in with other information
Improvements needed to the structure and usability of the shop

Shop usability Issues

Lack of structure to product offerings with all options shown at once, making it hard for users to make a decision

Very long product pages (TL; DR)

Unclear delivery and gifting information

No ability to buy multiple items in one go

Discovery

Whilst I was somewhat surprised by the exact stats regarding retention and conversion rates from such an already successful business, especially for article pages, this did show the tangible impact of the UX issues identified and clear opportunities for growth that could be achieved through resolving them.

Design

Setting the tone from the top

To establish a modern, professional feel as soon as someone arrives on the website I designed a clean, minimalist header with the logo in bolder colours to match the one already used on the print magazine for brand consistency.

CTA

As the research showed that the majority of sales was from subscriptions I added a clear ‘Subscribe’ CTA at the top of the page to encourage this by making the subscription option easier to find, increasing subscription page views.

Navigation

A new holistic site information architecture formed the basis of the new menu structure, providing quick access to key pages to aid navigation and reduce homepage bounce rate.

The headers are shown with a down chevron to signify the ability to expand the menu and placed so that they appear as a tagline with names that reinforce what the Rock n Roll Bride brand stands for.

New menu structure

Information architecture diagram

Centralised search

One of the main goals for the alternative bride user is to find inspiration. To support this goal, aid navigation and increase retention we moved the search tool from top right of the screen to a prominent central position and added the label ‘Search Rock n Roll Bride’ to increase usage.

The increase in usage also had the added bonus of enabling the client to gain better analytics of most commonly searched for topics, which they could then use to plan future articles aligned to what they could see their readers wanted.

The default search results view was switched from articles to images to match the mental model of looking for ideas and inspiration being predominantly a visual task.

Matching the brand evolution

Homepage layout

To match the evolution from blog to magazine the homepage design was completely transformed from a paginated series of latest blog posts to article thumbnails with a clear, structured content hierarchy, mirroring the widely used homepage layout for online magazines and newspapers (Jakob’s Law).

This increased the number of articles shown on the homepage from 6 to 25, making it easier to navigate to different articles and therefore reducing the homepage bounce rate.

The new homepage content hierarchy consisted of:

‘Top Stories’ - showing the latest articles
‘Most Popular’ - moved up from the footer, showing the current most viewed real wedding articles across the site
‘Wedding Planning Advice’ - added as analytics showed these were amongst the most searched for and read articles
‘Photo Shoots’ - added to support the business growth into creative directing consultancy

Links to buy the latest magazine and signed book were separated out from the third-party advertisements and displayed at the top of the page, providing a much clearer CTA to increase product page views.

Stylistic elements

I transferred the style of some of the elements within the print magazine, such as the supplier section layout and addition of call-out quotes, into the website article and info pages design to increase brand consistency.

New About page showing addition of call-out quotes

Keeping the reader hooked

We hypothesised that the high bounce and exit rates on article pages were due to the links to further articles being below the long image gallery and therefore easily missed.

By moving the suppliers section, article tags, and links to further articles from the end to between the end of the main article and the start of the image gallery we could ensure they were seen.

To further improve the retention rates for article pages we leveraged the existing article tags and categories, switching out the linked articles from being the most popular across the whole site to those that matched the current article to increase the likelihood of interest in the linked articles.

Simplifying the shopping experience

By categorising the products on the main shop page we reduced the number of options from 45 to 3 - the magazine, the book, the collection - making it easier and quicker for the user to make a choice (Hick’s Law).

Shop FAQs

One of the top findings was the ambiguity and confusion users had regarding delivery options and how to gift an item to someone else.

To make this information more readily available, the shop FAQs were moved from within the ‘Contact Us’ page to the main shop page and a quick link to them was added to the website navigation menu.

The individual FAQs were categorised into four themes - buying, delivery and returns, subscriptions, gifting - which were used to structure the FAQs with progressive disclosure to make it easier for the user to find the answer to their particular question.

Shop page FAQs using progressive disclosure

The collection

Product items within the collection category were sold through a separate website for the business with whom these were designed in collaboration. By showing the individual items on the Rock n Roll Bride website as well it led to issues such as price discrepancies when the other business held sales or offers.

To simplify this user flow and remove any confusion we removed all individual collection items from the Rock n Roll Bride website and linked the main shop page collection option to the page for this collection on the other business’ website.

User flows per product category

The magazine shop subpage

As there were multiple product items within the magazine category we created a magazine shop subpage for these, adding a breadcrumb to provide quick navigation back to the main shop page.

The desired primary user action here is to select a product to buy and hence we hid out of stock items by default with a secondary option added to see the full magazine back catalogue.

The most commonly bought items were the latest issue and a subscription, therefore these items were shown first for quick selection.

To boost product recognition I adjusted the thumbnails to show the full magazine front cover, rather than a partial square, and added the issue name beneath.

When a product is on offer it previously was simply shown with the new price. To better highlight the discount I showed the original price crossed out with the new price next to it in a different colour, thereby increasing product desireability.

The new magazine shop subpage

Product pages

By giving the product pages a different format than articles we were able to significantly reduce the length of the page and improve readability.

This was done by moving the product images into a slider, consolidating the copy text into one section, and having a much clearer display of price and delivery information.

We also removed all advertisements from the product pages to keep the focus on the purchasing process.

The new product page

Subscription options

Within the subscription product page we added new options to specify the subscription length and payment schedule, providing the user with more control and making it easier to gift a subscription.

Subscription product page showing subscription options

Takeaways

The biggest takeaway for me was how much I enjoyed working with this client and helping them to achieve their vision.

As a first time using Google Analytics it was clear how powerful this tool is for gaining insights from the data.

However, as we worked through the project we found some issues with the original setup for the underlying data (e.g. datasets missing for particular countries, Paypal payments registering as 0 seconds duration sessions) that we fixed and could adjust for, but meant it was hard to get accurate measurements of overall improvements. To ensure A/B tests were still meaningful we adapted to use individual user session behavioural data in Google Analytics to see at a micro level that the changes were having the intended positive results.

The need to plan out the interim stages from current to future design states when not everything can be done in one go also became apparent as we went through the project. This was something that could be quickly and easily accommodated through discussions with the client, but will be something I'm more mindful of in future projects.

Thank you!

Thank you for taking the time to review this project. Any feedback is always appreciated.

Equally, if you have a project you'd like to work on together do please get in touch.

See other projects ->

Digital transformation to match the brand evolution

Responsibilities

Tools

Duration