Re-engaging users of a news website
A colleague worked on a redesign of an established news website as it looked outdated. Although their designs were aesthetically pleasing, the redesign did not engage the users and numbers started to drop. The team and I then had two weeks to get a new site designed, developed and launched.
Study the user behaviour flow before the redesign and after to understand what wasn't working. Watch user interactions to better improve the UX. Research competitors and industry leaders.
Skills & Tools
Photoshop, Google Analytics, Hotjar
First thing I needed to do was to build upon the brief set. I asked questions that would give me more information about what stakeholders wanted as well as re-engaging the readers. I then identified project goals, requirements and challenges. To help with direction, I analysed competitor sites as well as industry-leading news websites.
As soon as I'm happy with my research, I start sketching as it allows me to work through ideas quickly.
With this project, I focused on hierarchy as I felt a lot of that had been lost with the new tile layout. I then roughly outlined the structure of different elements, featured sections and number of articles to include. I then went on to finding the best way to present ideas and experimenting different structures, shapes, titles, content and links.
The next steps I would normally take would be to create wireframes. This helps me check the site architecture and user journey/experience. Unfortunately, due to the limited amount of time set out at the beginning of the project, we worked this part out from the sketches and I went straight to mock-ups.
Using all my research and sketches I started creating the mock-ups. One of the first things I did was to reintroduce the coloured tabs at the top and throughout so that readers who work within those pillars could quickly identify content relevant for them. I also added some hierarchy back in, focusing on that day’s news at the top and moving on to content that doesn’t change that often as you go down the page. We also noticed that articles with long videos had a high bounce rate. So we introduced a timestamp so that people could avoid videos they didn’t have time for.
With everyone happy with the mockups, I liaised with the developers to hand over my designs. As I am familiar with the front-end frameworks that the developers use, I created this design to reflect the structure that the framework uses, so that I can say this is X css class making the process easier and quicker.
Fortunately, the re-redesign was a success. Within a couple of weeks, pageviews and pages per session started to increase. Since launch, I have used Google Analytics and Hotjar to continually improve the UX of the site. Some of the improvements we made were:
- Adding buttons to view more Features and Insights as readers would seem to hover around the section confused, not knowing where to find more.
- Cutting the amount of content under the top news. Keeping it fresher and relevant. Also pushing up the content below that section
- Cutting sister site content at the bottom as we found no one was clicking it. It was meant to be a way to drive traffic to those sites, so instead we introduced a less intrusive global nav.
Selling myself short
It's all well and good having an online portfolio, but when it doesn't showcase what it is you actually do, it's time to go back to the drawing board. This is the process I took to better showcase myself and my skills.
Role: UX Designer & Front-end Developer
Speed UX Design
A short project to showcase my skills for the second stage of an interview. A fun and challenging project where I sped through the entire UX Design process. Sketches to Prototypes.
Role: UX Designer