The problem
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.
(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?"
|
|
"What other content would you like to see?"
|
|
"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!!
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.
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:
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.
