Porto. iOS and Android app

— worked together during 2018-2020

A New(s) Way To Discover Porto, On The Go

  • iOS App
  • Android App

Work Type

Product Strategy

UX Design

UI Design

Mobile Development

Quality Assurance

Tech Stack

  • CircleCI

    CircleCI

    CircleCI
  • JavaScript

    JavaScript

    JavaScript
  • TypeScript

    TypeScript

    TypeScript
  • fastlane

    fastlane

    fastlane
  • React Native

    React Native

    React Native
  • React Query

    React Query

    React Query
Full project overview

Work Type

Product Strategy

UX Design

UI Design

Mobile Development

Quality Assurance

Tech Stack

  • CircleCI

    CircleCI

    CircleCI
  • JavaScript

    JavaScript

    JavaScript
  • TypeScript

    TypeScript

    TypeScript
  • fastlane

    fastlane

    fastlane
  • React Native

    React Native

    React Native
  • React Query

    React Query

    React Query

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.

Representation of the connection between Porto. brand and the city
Representation of the connection between Porto. brand and the city.

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.

Porto. Mobile Apps Design and Development

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 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.

Ongoing handoff between Design and Development teams
Ongoing handoff between Design and Development teams.

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.

Mid-fidelity wireframe with several UI components that set the tone for the App
Mid-fidelity wireframe with several UI components that set the tone for the App.

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.

Analysis of the previous version of the App
Analysis of the previous version of the App

Looking for the 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.

Porto. Mobile Apps Design and Development

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.

Several components used throughout the App to maintain consistency and visual clarity
Several components used throughout the App to maintain consistency and visual clarity.

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.

Different iterations of the app based on the team's daily communication
Different iterations of the app based on the team's daily communication.

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.

Porto. App development infrastructure
Porto. App development infrastructure.

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.

Porto. Mobile Apps Design and Development

The Result

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.

Porto. Mobile Apps Design and Development