Bubbl.

Direction artistique

back
Unified App

category

UX Design + Research

Client

Postmedia Inc.

Team members

Vivian V. (Designer + Research)
Kristina F. (UX Researcher)
Jennifer F. (Team Lead)

This unified app brings together content from all of our news publications and features into one native “Universal” (iPhone/iPad) app and an Android app (smartphone/tablet).

Now live on the App Store and Playstore!

The Brief

Hey Vivian! Our users are overwhelmed by multiple apps just to read the news. It’s confusing, frustrating, and a waste of time. We should fix it by building a smart, unified app where users can select their favorite publications, categories, and journalists to create a personalized feed that actually works for them!

Potential Challenges

● Changes may feel jarring for some users.

● Risk of losing important features or disrupting established workflows.

● Research indicates that many of our older readers have adopted digital formats as print editions have become less accessible.

● Adoption of new features is a key concern; a smooth transition is critical.

Recommended approach:

⭐️ Rollout with attention to usability and familiar workflows.

⭐️ Gradual introduction of new features to support adoption and engagement.

Question of the Day

With multiple apps serving different audiences, how can we create a unified platform that delivers a seamless and intuitive experience for every user?

The Solution + My Role at a Glance

1. Simplify App Operations


Optimize workflows and interface logic to reduce friction, improve performance, and streamline the overall user experience.

2. Establish a Unified Content Management System

Create a scalable system that empowers developers, editors, and designers to collaboratively manage and update content with consistency and ease.

3. Drive Discovery and Engagement

Design intuitive pathways that promote exploration content. Increasing time spent in-app and deepening audience engagement.


My Role: Lead designer, Interaction designer, Visual designer, Prototyper, Design system
Platform: App





DISCOVER

Discover Phase

Whiteboard Planning

Bringing in members from different teams, we time boxed 15-20 mins to brainstorm each of the main areas we wanted to consider. Vision - Jobs to be Done - MVI Features - Metering Strategy

Competitive Analysis

By looking at the competition through customers’ eyes, we can empathize better to discover what excites and frustrates them.

Comparison Matrix

From the findings, we made a comparison matrix (below) to leverage what works, avoid what doesn’t, and identify gaps to gain a competitive advantage.

Competitor Research on Ads

We took a look at the average placement for ads within an article page and on homepage. UX had recommendations and decided what the best method would be.

Discover Summary

By analyzing the designs of our competitors, we gained valuable insights. We identified areas where our approach is familiar, and discovered innovative ways others are presenting information. This exposure to diverse design approaches broadens our creative horizons and inspires us to push boundaries.

DEFINE       

Define Phase

Unified App Journey

We made a high level user journey thinking about how the user will interact with the app. Starting from on-boarding to how users can discover content to story page recirculation.

User Journies for Anonymous and Registered users

Define Summary

Since we're building this app from the ground up, it's crucial to design a seamless experience for all user types. We'll achieve this by meticulously outlining each user interaction, from initial touch points to key functionalities. We are prioritizing the most relevant pages, features and laying a solid foundation.

IDEATE       

Ideate Phase

Low-Fi Designs: Here are the low-fi designs our UX lead created. I used these screens and created a prototype for our first round of user testing.

Mid-Fi Designs: At this point, the project was passed on to me as a lead designer and I had creative freedom to update all the screens.

In these photos, it showcases different branding and layout ideas.

Ideate Summary

This stage was like a playground for a designer like me. I held multiple meetings over the next couple of months, bringing in external teams (marketing, editorial, development, product, higher stakeholders, etc,) to focus on a new brand. At this point we wanted to have a near-perfect app before embarking on further testing. The new user interviews would be focused on navigation and pain points so we wanted to solidify the optimal user journey. In addition, meticulous attention was paid to colour palettes, typography, and iconography, to establish a cohesive brand language.This section doesn't display all the pages and iterations involved but it was the most intense ideation phase.

TESTING  

Testing

Research Methodology

  • Utilizing the current feedback panel and our mobile app panel, we targeted 100 users from Calgary Herald
  • We will then conclude the surveys asking if users are interested in participating in a 30 minute moderated test through Lookback. The moderated test will focus on 10 users (with different user types) and ask more in-depth questions on themes above and their overall experience with the app.

Unmoderated Tests

Kristina (UX Researcher) created 4 Surveys for 10 weeks

  • Once we collected our users (the total 100), we sent out two surveys (one at week 2 and one at week 4) to study/ask about their app usage and their overall experience with the unified app:
    • Week 2: Onboarding
    • Week 2: My feed
    • Week 4: Discover
    • Week 4: Navigation
    • Week 4: Overall app experience

Unmoderated Test Results

Moderated User Interviews

This moderated test was chosen from the users that completed the surveys within the 10 weeks. The users had exposure to the app and were using it regularly.

User Interview Results

Synthesized from Kristina our UX researcher, here are some of the findings. 

Testing Round 2 Summary

We conducted user interviews to gauge their interest in a unified app experience, consolidating our existing individual applications. Our low-fidelity prototypes secured a 90% interest rate, prompting us to move forward with app development. These early designs focused on the core functionalities, in the next couple iterations we have significantly enhanced the user experience. Utilizing low-fidelity designs for early testing proved invaluable, it allowed us to explore concepts and gather crucial feedback before investing significant time and resources.

Using Apple's Testflight app we were able to let users download our app temporarily. My deep involvement in research exposed me to valuable user needs and pain points – aspects I hadn't even considered before. Armed with this user feedback, we conducted a prioritization exercise. Considering development limitations, we evaluated which changes could be implemented immediately and which features would be better suited for phase two. This ensured we could address critical user needs before the public launch.

Final Design                         

Final Design

Onboarding

It is important that the main publication is not lost within the collection. Many users only want to read from a certain region so we've added optional geolocation tracking. The onboarding process curates a personalized feed, the steps include the papers they want to read, the categories, journalists and notifications. The final steps are to register or subscribe however we've provided a freemium model to allow users to explore the app before committing.

My Feed + Discover Pages

For the feed page, if multiple publications have the same categories they will be combined in a carousel. For the Discover publication page, we've included filters for subcategories as well as a scroll top bar for main categories.

Settings

The account page will change depending on the user type: Anonymous, Registered and Subscribed. If they are not at a subscribed status there are CTAs for next steps. Here you will also be able to change your choices on publications, categories, journalists, text size, etc.

Hero Images + Thumbnails

All the apps will follow the same journey, with the main publication being the only distinction. Users can download their favourite app but they will also receive content from all Postmedia news.

Final Design Summary

This was the moment to be pixel perfect. The flow was set and we just needed to spend some time adjusting the designs based on the users feedback from the interview. In addition, I prototyped micro interactions and animations such as vertical/horizontal scrolling, fading, button types, etc.

3-2-1 Preparing for launch!

RESULTS   

Results

Challenges/Risks

Traditionally, our apps have been free to download. To continually deliver the best possible experience, we're introducing a subscription option per month. This subscription will grant full access to the app's features, while the free tier will offer a limited experience.

Outcomes

Stats between Mar 1st to Mar 15th on Montreal Gazette

App Installs

  • 1.7% new App installs on iOS
  • 7.2% new App installs on Android

Revenue Growth

  • Total revenue: around 40% increase for iOS compared to the previous App on iPad

Conclusions

  • 88% of users completed the onboarding, while 12% did not proceed
  • We've seen around 40% percent traffic drop, that was a direct result of the content metering
  • We've seen around 40% revenue increase from the subscriptions on iOS and a slight increase on Android
  • We've seen a huge increase in registrations and user authentications
  • Overall, we're doing good in-terms of user acquisition on both platforms but the number of uninstalls are increasing because of the new metering experience

Next Steps

  • Continue to monitor this data to observe differences between properties.
  • Scale the App to the rest of the 11 properties
  • Focus on conversion for exisitng users
  • Prompt more users to rate our apps
  • Do a user research to understand the feedback from our users regarding the new experience

New Design System

I am responsible for creating a brand new design system that will be App Specific. Using Atomic Design (atoms, molecules, organisms, templates, and pages), I'll establish a foundation of core elements and continuously expand the system over time.

Roll out and release timeline

This chart is encouraging! It shows a steady increase in new registrations and sign-ins since the app's launch. This suggests that not only are we attracting new users, but also retaining existing ones.

Final Design Summary

Monitoring the results has definitely been nerve-racking. While the paywall did lead to some user drop-off, we're encouraged by continued growth from our dedicated reader base. The true joy of completing an end-to-end project is witnessing the team's dedication and the product finally come alive. I have the honour of creating a completely new design system for the app and we'll be continuously working on this project.

Takeaways

This app is far from done. As designers, we're always looking for ways to improve the user experience. We have a defined timeline and resource limitations to consider, but there are exciting plans for the app's future. This is an ongoing process, so the version you see today will continue to evolve. Ultimately, we want to provide the best possible experience for our users, and that means the app will constantly improve. I am incredibly proud of the planning and research that got this project off the ground. This opportunity fostered my growth as a designer and researcher. Additionally, I gained a deeper understanding of company structure and the inner workings of an organization.

© 2024 Vivian Vo
VIVIAN VO