Through finding the app's own identity, achieving a high-performance experience, and a journey of redesign and redevelopment with the common goal of making a newsworthy app, we’ve officially launched the new Porto. App in 2020.​​​​​​​

Background

After redesigning their website, Porto.pt invited us to redesign the Mobile App that informs Porto about Porto. 

A city that's famous for its wine, warm people, "francesinha", and where you will find the future Pixelmatters new headquarters. Porto is our hometown, where our products are strategized, designed, and developed. 

Challenge

As with the redesign of their website, the app also had to be aligned but, simultaneously, independent of the Porto brand; otherwise, it would be seen as a City Hall communication channel. So, we had to find that sweet spot again.

But Pixelmatters also had to find consistency across both the website and now, app. Thus, a coherent visual language and experience were mandatory, regardless of the obvious differences between a website and an app.

MVP mindset

How to build and design an iOS and Android App following an MVP mindset? Create a mobile experience with repeated design and interaction patterns that be could be easily adapted — so we started with iOS as the base.

This helped us be more efficient and reduce the effort for native users on both platforms (Android and iOS) — a win-win situation. We carefully chose common patterns and behaviors between the two platforms (bottom navigation) to define the application's core features. For generic design elements (notifications, confirmation dialogues), we decided to use native components.

Benchmarking our way to wireframing

Just like Porto. website, benchmarking was particularly relevant for their app. There is a lot of other news portals being faithfully used by Porto's people. So, Pixelmatters ended tracing the market's strongest competitors to understand not just what were the best practices they were following but mainly how we could make this app user experience newsworthy among the city's locals.

With a good understanding of the current news scenery, we went on to creating the first wireframe. We created a single mid-fidelity wireframe for the Homescreen, which was the base for the other pages that would follow.

Creating a newsworthy experience

There is no good design without a user experience that flows. So, Pixelmatters started by identifying the critical scenarios, the user flows that were not flowing, and what improvements could be made to get to a newsworthy experience.

The goal was to improve the app's usability by transforming friction points into attractive features. Like category-oriented navigation or the search bar, both missing on the current mobile application, a must-have in a news portal. There was also a "house cleaning". Categories were eliminated, merged, or new ones were added, all aligned with the city's main pillars.

Looking for that sweet spot

Pixelmatters faced two challenges with the app's Look&Feel. First, bring a brand that's purely based on the print to the digital side, and second, find that sweet spot, have a news portal representing Porto as a city, but not do it in a way that would be a reminiscence of the brand.

We decided to go beyond the brand and created a design with its own distinctive language — a very clean, almost agnostic design as a base, combined with elements of the Porto. brand, like the mosaic — guaranteeing a seamless connection with the brand.

Consistent and scalable

Having elements that could be easily adapted from the website to the mobile apps helped us keep a fast-paced delivery rhythm and achieve a consistent and recognizable visual language across touchpoints.

But we also had an eye on the future. With a set of base components, adding new features or screens would require little design or development work, providing more flexibility to the client.

Beyond the handoff

There was ongoing pair-to-pair work and collaboration between design and development teams to ensure every decision was achievable from a technical perspective.

With close collaboration, continuous touch bases, and ongoing iteration on both sides of the project, we identified problems and found solutions in the early stages. It was essential to making sure both teams achieved their common goal — the success of the product.

Fast, and with quality

When it came to development, we based all decisions to finish the project fast, without losing Pixelmatters' high-quality standards.

With React Native, we could write one single code base and generate all the native platforms needed. In addition, the power of tools like Fastlane, CircleCI, Firebase, and TestFlight, allowed us to create faster builds at the end of each sprint.

High-performance on the move

The next step was to achieve high performance. Being a news portal, a significant number of images needed to be loaded in a short amount of time.

Pixelmatters went on to study how to improve the app's performance through the tech stack. For example, we used lazy loading with all the images to delay loading on anything that the user did not need at that time.

Summing it up

Today, porto.pt is more than a news portal delivering information about a city; it's a way to bring a community together around a topic they all treasure, their city. And digital has played a big part in this.