Building Reuters Next

Reuters Next was a push to deliver world-class reporting directly to consumers.

As a member of the Reuters Digital Design team, I worked with an incredibly talented group of folks on building Reuters Next. I was brought in during the later phases of the project and tasked with helping the team gear up for the public unveiling. The project was ultimately cancelled in summer 2013. This is a recap of my experience.

Market data

One of the first projects I took part in was the design of the sites market data pages. Our UX designers had constructed scalable templates which could be used for a number of markets, companies, indicies, commodities and so forth. We worked in iterative cycles as new design problems reared their heads, continuously refining the experience.

An example of a persistent data bar

Together as a team we collectively believed that by working in iteration we could continuously learn from one another, all while building the best product for our users. In as economically a means as possible.

As key components to the company’s business model, market data pages were meticuously reviewed for accuracy, both internally and across team lines. Charts, diagrams, tables, and graphs were designed for a range of scenarios. As I mentioned, scalability and consistency were at the forefront of our thinking, and by iterating between UI and UX problems on a daily basis, we could quickly hustle towards our goals.

Below are some more examples of such design templates.

Examples of market short quotes
Entity chart and interactive infographic
Investor briefs

Developing guidelines

In addition to working on a range of market data initiatives, I also led an effort to develop and maintain a web style guide in order to promote design consistency. I believe strongly that the best design solutions occur when designers follow rules, and as a designer it is often critical to construct those rules yourself.

When I had joined the team, a strong aesthetic respective of the Reuters brand was already in place — not to mention one that elevated the brand through its modern and refined use of color coupled with strong typography. However, after zooming in it was clear that through deliberate refinement our team could benefit from spending some time up-front constructing our own set of rules, and in turn, ultimately spend less time coralling pixels in Photoshop.

Web and UI elements from our guidelines

One of the key advantages of developing visual guidelines, or UI kits, is the freedom it gives designers to concentrate on larger problems. And of course, guidelines help teams weed out inconsistencies and build a more uniform experience.

Ultimately, our goal was to translate our guidelines into functional code for our front-end developers — building our own Bootstrap if you will.

Here is an examples of a robust guideline document I developed while commanding the project.

Button guidelines for the project

Designing for iOS 7

It should come as no surprise today, but yet it be true that Apple’s launch of iOS 7 was a major shift for developers. At Reuters we worked tirelessly to update our app for the redesigned OS. Apple’s notorious nature of secrecy made such a paradigm shift that much more difficut, the entire visual language of our app was in need of an overhaul, but to what degree we asked ourselves?

I worked with our Director of Design/UX to carefully re-craft the apps iconography and visual language. We wanted to maintain the Reuters brand, while blending it in more tightly with Apple’s newly defined visual language. Where we compromised the most, was with our typography. Type treatments play a major roll in any brand identity, and while our primary typeface was set in Founders Grotesk we adopted Apple’s preferred implimentation of Helvetica Neue.

By swaping Founders for Helvetica I believe that we wove in more tightly with the new mobile OS. This gave us some freedom to make compromises with other user interface elements — specifically, our iconography. Rather than use the hairline icons Apple had developed we repurposed our websites marks, which were thicker and tighed the desktop experience in more tightly with our iOS apps.

Here are some renderings of our final iPhone and iPad versions of the newly designed Reuters iOS app.

iPhone Mocks
Home view & article view (respectively)
Entity data view & saved stories (respectively)
iPad Mocks
Entity home view & article view (respectively)

Closing

In the end, I am very grateful for the opportunity to have been a part of the project. I had the pleasure of working with some very talented folks from various backgrounds. The project was indeed, a huge team effort. From the pixels that made up our visuals, to the interactions and animations that drove them, we worked on elevating the brand through a great UX. I believe that what we were building was something great, not only for our users, but for the world of journalism and reporting in our digital times.

Have a comment or want to connect? You can email me at contact.meszaros@gmail.com