Eikon Top News

Summary

I undertook the redesign from the ground up of the most used app in Eikon. I researched, introduced responsive design, worked in SCRUM methodology, conducted usability testing, and added analytics for a redesign that was highly praised by the end users

The Task: Redesign the Top News App from the ground up.

Team: UX, Visual Designer, Research Team, Front and Back end Development, SCRUM Master, Product owner

My involvement: Information architecture, wireframes, usability research, workshop facilitation, stakeholder management, liaising with visual design, copyright, and research team

Process

I often find that different projects, depending on the individual circumstances, vary in the details of the approach and process to be followed. To ensure the appropriate decisions are being made, the following steps were taken:

Discovery

I started by analysing the current news websites and spotted the content areas. Along with the results of research, I put together a design recommendation in the form of wireframes for Sprint 0, and communicated it with the development team.

We compartmentalised the components and work was allocated accordingly.

Discovery phase pointed towards a responsive design approach. This was a first for the platform so I spent time to explore the responsive design principles for this application considering the broader effects across all Eikon apps.

Before the Redesign

Before the redesign, the text showed poor legibility, hiding both text and content at small widths and stretching the text to an unreadable degree at lager ones.

Competitor Analysis

While the Dev team was setting up the groundwork, I analysed the Information Architecture of well known news and tech sites; the placement of content, the menu types, responsiveness, even the placement of ads. Afterwards, I compared the findings with the design principles of the Eikon platform and came up with a few very high-level, initial concepts to communicate the direction

Requirements Gathering

Further, I gathered the team and business stakeholders to brainstorm and agree on the direction and the research team to give us insights of current user behaviour.

Wireframes

As the dev team was setting up the groundwork I had time before the first sprint to quickly design and iterate, what the main parts of the application would look like.

SCRUM and Planning Poker

After the wireframes were signed off, the team and I sat down and broke the elements into stories. This way, while the dev team was working on one element I would have the chance to detail the design of the next one.

Responsive Design

Early in the discovery phase, it became evident that the "job to be done" of this application to the users was to stay informed an don top of the latest main news WHILE they were doing their main activity. This meant that the app was resized on one of their monitors and would rarely occupy the full width of the screen. To determine the breakpoints, I investigated using the analytics available the size distribution of our clients' monitors and the dimensions the original version of the Top News app on their screens. Using this data, we agreed on the breakpoints.

To help with planning and development the team and I sat together and analysed the design for every breakpoint. We agreed a maximum, minimum, and in between breakpoints depending on the Top News app's specific requirements.

The Result

After 8 months of work, we released the first stable version to our clients. After a while the user feedback started coming in, and the result was rewarding. All the feedback we received was overwhelmingly positive, and as a result, the fruit of our effort was featured in the Thomson Reuters major news screen