A design look into a newsworthy experience
Design is not only about good looks: function is beauty too. A seamless experience strongly supports good interface design. Navigation plays a big part in the way users perceive the quality of what you deliver — that’s how people understand and move around your product. Is the product easy to interact with? If not, there is a chance of users discarding it, and we definitely don’t want that.
Of course, there are various products out there and no universal navigation that serves them all. Fortunately, there are some good practices to consider to provide your users with the most delightful experience without them even noticing it.
When creating a specific product, it is essential to follow a couple of standards to guarantee users’ happiness. Fasten your seatbelts and get ready to know more about how Pixelmatters created a newsworthy experience in Porto. Mobile App entirely based on familiar mobile navigation patterns — a mobile app that gathers every news about Porto’s city.
🔙 The old app experience
Our first main concern was to improve the app’s usability, transforming friction points into a seamless experience. But how do we do that? By diving into the old version of the app top to bottom while pointing out critical scenarios and user flows. A small group of people tested a couple of user stories to gather real feedback on navigation struggles. Once we had a clear definition of the needed in the old version of the mobile app, we moved to the benchmarking phase.
🔎 Benchmarking and Research
Benchmarking is one of the most valuable strategies to get things started for your project. Check out apps with similar functionalities to create a good user experience by understanding their approach, flaws, and strengths. Find the most suitable questions for your project. Here are some of ours during Porto.’s Mobile App redesign:
- What information structure does this app have?
- What are the core features?
- Does this functionality structure work best for the app’s functionality?
- What similar examples can I find? Are they working?
- What functionalities work bad? Is app navigation affecting it?
- What can be improved by changing navigation, and how will it impact user experience?
In our case, we knew many other news portals that the city’s locals used actively and faithfully. So we ended up tracing the market’s strongest competitors to understand not just the best practices they were following but mainly how we could make this app newsworthy among the city’s locals.
With a good understanding of the current news apps scenery, we raised awareness of do’s and dont’s. Know your facts before you start the design — it will certainly increase your chances of succeeding well amongst your target audience.
📲 Inside the new mobile navigation
At this point, you’re probably already eager to hear more about the UX changes we did on the mobile app, am I right? Enough context, let’s take a look into all patterns:
Bottom navigation
Our Homescreen was clearly asking for flat navigation. Mostly, essential links were hidden or far from the user to reach out. So, we applied structural changes, such as gathering the core features (news, videos, photo gallery, events, and traffic) on a bottom navigation bar to promote easy access and fast dynamic navigation between the different destinations.
Categories
On any news portal, users always expect category-oriented navigation. That’s why on our redesign, categories are constantly visible on the top of the screen so readers can achieve the main goal — read the recent news — and the ones that matter the most to them.
Together with the Porto. team, we did some “housekeeping” by eliminating, mixing, and adding new categories important to users and reflective of the city. As the number of categories suffered a considerable decrease, we chose a horizontal scroll behavior to see the rest instead of having a priority+ pattern (which might be helpful for specific categories).
Search
When there is no search box or, at least, a magnifying glass icon in an app, it feels like you are locked in a very dark room. The search is a must-have, and it was missing on the old mobile app version. We brought the search back to life on the navigation bar. The icon is always present for the user to search for news of their interest and filter between the different types of news — simple news, videos, or photo galleries. Traffic and Events have a contextual search with their own filter logic.
Related News
Porto.’s team was really interested in having related news to promote reading recirculation based on the users’ reading interests. So, first, we added a global feature in which every page on the mobile app shows the most read and most recent news.
Apart from that, one of the main challenges here was understanding if the related news would select news according to its category or subject. Both options were valid, but which option has more interest for the user? Being a new feature, we wanted to show its full potential. And that’s why we applied both criteria — news category and subject — to the show-related news to the users, available on each news’ individual page.
Summing it all up
So, now that you know how we adapted common patterns and behaviors on Porto. Mobile App, we would love to share which navigation principles we had on the design process:
- Logic: Navigation should be developed to provide the best user experience possible. It has to make users intuitively interact with the app’s functionalities. If users stop and think, “how can I reach this or that function,” then navigation is poor. Keep it simple and functional, always.
- Familiarity and Standardization: Create familiar navigation according to system guidelines. By following them, the elements would be found in the same places, and interactions would be expected to behave the same way, making the user experience much easier. We considered native system guidelines (iOS and Android) to ensure users responded well to both environments on this project.
- Structure: It is essential to make your website understandable and easy to use. Organize your content effectively. Knowing more about information architecture might be very helpful in finding the proper structure for your product.
- Visual Clearness: Our brain has an excellent capacity for processing visual information. So, including visual clues alongside text context, as we did on bottom navigation, can help navigation becoming clearer and more intuitive. Carefully use visual cues, or they might turn into clutter.
- Consistency: Users love patterns. Make sure your navigation elements stay in place and look the same across different screens. People store patterns in their brains, so if your navigation suddenly changes, users will feel lost, and their cognitive load to process new information will be enormous.
- Order and Hierarchy: Putting simply, first things first. Everything else in the middle. People tend to forget about what comes next easily. Keep track of what is essential and represent with an “in your face” solution. On our redesign, flat navigation for the Homescreen was pretty obvious.
- Responsiveness: People will access your design through a range of different devices with multiple screen resolutions. In the Porto. Mobile app, we meticulously checked all the necessary breakpoints to understand how navigation and the screen content should scale.
As a last piece of advice: Do not try to reinvent the wheel. Following the principles above allowed us to create an experience serving the end goal of the product: reading the news.
But how do we ensure how our product stands out from what already exists? A product doesn’t necessarily need to be different at the very beginning. Keep your focus on crafting a well-shaped experience and then be innovative. If it works well, people will use it. After rethinking how the Porto. Mobile App was going to work, we designed a clean user interface, following Porto. brand identity, which as you all know, is already one of a kind! ✨
If you want to keep track of Porto’s city news, feel free to download the app on the App Store or Google Play.
