The current Superdrug blog was out of date, difficult to navigate and not at all mobile friendly. Conversion rate for users who visit the blog is 16% lower than users who don’t. With over 200,000 sessions per month, and 80% of those on mobile, there is a lot of potential to improve the blog to drive more organic traffic to the website and encourage sales.
Data shows that there is little increase in revenue generated by the blog, and time on page has also been dropping showing that user are not engaging with the articles
Research
To study the current user behaviour on the Blog, I set up heatmaps and recordings in Hotjar, and launched survey polls to get some qualitative data and opinions from customers.
Blog Homepage
On Desktop a lot of the clicks are on the search bar, and a few scattered over articles and categories. 50% of users scroll enough to see the banner and top 6 articles on the page. The Superdrug Banner takes up a lot of valuable retail area without offering much to the user. On mobile, the categories take up a lot of space above the fold, yet barely any users are clicking on them. Only 50% of users only scroll enough to see the top feature article. Most clicks are on the search or Hamburger menu -presumably to navigate back to the webshop as they have not engaged with the blog.
Blog Article Page
Survey Polls
I added an online poll for 3 months, asking blog visitors to rate their experience on a scale of 1-5 (1 being poor, 5 being great)
60% of users rated the Blog a 5/5 which initially seems like a good result, although there were a lot of feedback comments about improvements and additional features customers would like to see.
"We're glad to hear you rate the blog! What features do you especailly love?"
Everything
Beauty make up etc
Finding new products
Excellent info!
Full face makeup
Tagging products that are used and they are well written
The make up advice
Helpful advice, how clear the instructions are
Hair & skin care
Simple but informative
Honesty and understandable
Videos, easy to use, helpful content, love!
Skincare and make up heads up.
How to look after my hair and keep the colour in.
I love there all brands
Photos, tutorials, bright and interesting everything looks
Tutorials
Lots of hints and tutorials
"What other content would you like to see?"
Best sellers. Easier searching.
Beauty hacks
Hair especially for black girls
Cruelty free alternatives. Product run throughs. Or how to find your perfect product for something and allow customers to choose brands they like etc.
tell more about skincare products
Quizzes eg what mascara would be best
Better skincare. Advise people to use sunscreen daily
Which elements are in different perfumes.
Two Dutch braids
Make up application
Best vitamins/minerals for various conditions, eg, dry skin.
Fun new nail, hair and makeup ideas! Also reviews of the new products you sell.
Tips and product sets
Reviews on black body/hair care products by black women
More aimed towards men
“Hair styles for thin hair.
make up / hair tutorials, nail care.
The content is fine but the curly hair blog has not been updated to the only recommended products for type 3 curly hair are discontinued, meaning there are actually no suggested products for this hair type.
“how to lose weight, how to make your skin better”
More for older women, & full makeup tutorials
Oily skin hacks and acne prone/sensitive skin hacks
Remedies of how to get rid of them
Might be the Events, and I would like easier organised beautiful website for superdrug.
"Sorry to hear that. How do you think we could improve it?"
Your website looks cluttered and old Can’t even click on the link or picture to lead us to the tutorials Better links to products. It is really zoomed in so you have to swipe to see the other side Have prices and not so laggy More advanced, and more modern And the language can often seem like it’s trying too hard to be young and eclectic. Skincare advise is terrible, wipes, scrubs and Vaseline for students. It needs to be more regular and written by young beauty professionals and amateurs alike. not that interactive, More reviews about products and top tens etc. Keep up to date with new products Probably best to include the links for each primer under each individual heading eg. Primers for oily skin then the links to support that Display your vegan products when I click vegan!! Need closer video Organise this website it’s unorganised for me, and make it more vibrant with nice colours Make sure we can see the pictures that accompany the article especially when it’s about eyeshadow pallettes. Make sure pictures/photos are showing. Improve grammar Have the products in stock!!
User research has shown that the blog is currently cluttered and unorganised making it difficult to navigate. The design needs to be improved to make it more modern, as well as being more interactive. Vegan products/articles should also be highlighted to help meet this current new demand in Health and Beauty.
On the article pages, users would like articles to be more visual and see more images that relate to the copy. Users would also like to watch videos to break up the text in blog articles too. Customers would like to be able to link to and buy products more easily when reading about them online.
Wireframes
I mocked up a few different wireframes on mobile for each page, experimenting with layout, banner and articles tiles. Key changes we wanted to experiment with were adding main categories and sub categories to help sort the articles. `The new top 5 categories include Skin, Hair, Wellness etc, and sub categories including Skincare, Age Defying and Blemishes. The previous categories, such as Tutorials, Top Picks and Vegan have now becomes tags/filters which can be used the refine articles within the category.
I presented these to our content, design and development teams and we discussed which options we thought were the best, and also the most feasible to build. I merged some of the design ideas to create a prototype that was ready to test on users.
Remote User Testing
I set up remote user tests on Userlytics, with 6 participants each for desktop and mobile. They were directed to an article page, and asked for first impressions and thoughts on the page. They then had to navigate to the Blog homepage, and through various articles and to search and filter for one article in particular.
Overall the feedback was really positive! Users liked the name of the Blog, found the articles engaging and easy to read, and were easily able to navigate to the homepage, category pages and other articles! The additional subcategories helped users refine their search more, and helped inspire them. It was also a lot easier for customers to add products to their bag whilst continuing to read. Overall, they loved how new and modern it looked, and how easy it was to navigate on mobile especially with the images for the top categories.
There was a few glitches so I made a few amends in areas that I noticed customers were struggling:
Add ‘this product has been added to your basket” to Lightbox after ATB so users know this has been added
Add “share ‘this article’ with your friends” to bottom of article to make it clear you are sharing the article, not a product
Breadcrumbs style to copy SD main site '>' not '/' so it is more obvious
What happens when the customer clicks on social share links? Does it open in a new tab/app?
The overlay on the homepage banner blocks the majority of the image so you cant see it
Some elements which are links need hover interactions to make this more obvious
It's not obvious which filter tag has been selected. Make this a bright colour to stand out
Visual Designs
Final Prototype
Below is the final prototype that you can interact with...
UI Kit
For the visual designs, the UI designer created a UI Tile to help maintain consistency. It also provides assets to create an XD library from to speed up wireframing in the future.