Re-engaging users of a news website

Problem

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.

Solution

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.

Role

UX Designer

Skills & Tools

Photoshop, Google Analytics, Hotjar

Process

  • Research

    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.

    Sketch

    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.

  • Wireframe

    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.

    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.

  • Results

    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:

    Other Projects

    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