The World Through the Lens of Software

SED
SED

Status

2019

-

ONGOING

Scope

FRONTEND

BACKEND

MOBILE


Tech stack

vue swift node

Overview

Software Engineering Daily is a daily podcast about software topics, ranked #1 software engineering podcast in iTunes.

In each episode, Jeff Meyerson, the SED host, interviews software engineering experts from around the world. The discussion focuses on a specific technology, company, or idea. To provide a better and customized experience for listeners, Software Engineering Daily built a dedicated web platform, and mobile apps branded Software Daily. The repositories are available on GitHub, where open source contributors maintain the codebase.

alta-header

The Design Part

Web app

Jeff sent us a wireframe along with an outlined vision of the new platform. Quora served as a reference thanks to its clean, minimalistic, and engaging interface. Target audience is a community of software engineers and people from IT industry who often prefer simplicity and usability over bells and whistles.

The goal has been to improve the following user-flow areas:

  • Allow user interactions from the main feed, such as upvote and comment.
  • Enable seamless search from the navigation bar.
  • Provide easy access to the most popular topics on the left sidebar.

iOS app

We had the freedom to propose a whole new layout for the iOS application. Not only did we strive to achieve consistency with the web app, but our team also wanted to make the app no worse than the most popular podcast apps such as Overcast, Apple Podcast, or Breaker. However, changing user habits is always a challenge. To encourage the transition to a new app, its interface must feel familiar and sleek.

After picking the color palette and fonts, we focused on two main screens - feed and episode view.

sed4

Feed

We have explored a few different concepts of presenting content in the main feed.

key assumptions:

  • Users have to be able to interact with the episode without navigating to the episode detail view. The three crucial interactions are like (upvote), comment, save for later (bookmark).
  • sed4
  • The content of the image is less relevant than the title and serves mainly for visual purposes (Thumb allows more natural distinction of subsequent episodes)
  • One column feed is better than a two-column feed because the order of episodes is crucial for navigation. For unordered collections such as shows list in various podcast apps, rectangular tiles in two columns layout work better - which is not the case here.
  • A cell in the feed should not be too high - the user should be able to interact with at least three cells on a 5.8-inch display size.
  • Users should be able to see a progress bar for episodes that’s been started but not finished.
sed4

Episode View

The main points of concern in the episode view were buttons placement, content alignment, and information hierarchy. The screen contains relatively long text content and many various interactions.

Key assumptions:

  • Image thumb is not required here; we decided to put subtle episode guest image thumb next to date for the sake of coherence with the web version.
  • Users should see the episode's topics and can tap on them to see related shows.
  • Color selection should make for a clear information hierarchy.
  • Related links and download buttons should be visually separated from the save, upvote, and comment features.
sed

Management

We decided to try out Notion as the issue tracker and switch from Jira for this particular project. Ever since, it has become our first-choice project management tool.

sed4

Implementation

Web

As we have been building on top of the existing codebase, the frontend framework was already selected - Vue.js. Even though the main goal was to reorganize the app's layout, the scope included a few new features too. For example, episode classification by topics entailed creating new database entities and respective API endpoints. It took us two sprints to get the app into good shape and sort technical debt. The team consisted of two frontend engineers, one backend node.js engineer, and one senior full-stack developer who worked as a team leader.

Mobile

The UI work revolved around refreshing existing views, and occasionally implementing new ones. In parallel, some business logic required re-implementation, especially the part responsible for audio playback.

To make the player overlay match the industry standard of audio apps, we eventually decided to introduce coordinators pattern for navigation. Ultimately, this decision led to implementing MVVM-C architecture in the whole app to facilitate the new flow.

sed4

Results

The new web application has launched in early April, followed by the iOS version hitting the app store on May 27th. Downloads and usage stats that doubled is one thing, but looking at the growing number of upvotes and comments under episodes, it is safe to say it was a good call to refresh the apps.

sed4

Challenges

Wordpress CMS

All episodes content resides in a WordPress CMS. A data miner script scrapes the WP site and fuels the API. While this solution is not perfect, we did our best to make client apps bulletproof from potential data inconsistency.

testi-1

Dependencies

The mobile app codebase contained over 40 various third-party frameworks. Some of them were deprecated or outdated. By leaving only necessary frameworks and giving up on libraries that did not add obvious value, we managed to reduce build time almost three times.

testi-1

iOS App Layout Architecture

Many contributors and no established architecture guidelines led to a mixture of various coding styles and solutions. We decided to ditch storyboards in favor of writing layout code using SnapKit.

testi-1

Debugging Audio

Does the audio resume after you finish a received phone call? Will it stay in sync with the system audio widget? These and many other scenarios are not entirely straightforward to get right using automated testing.

testi-1

They’re entrepreneurial, design-focused, and they're able to work across the stack. Thank you to the Altalogy team for helping us get Software Daily to where it is today, and for being continued friends of the show. If you need help with your application, check out Altalogy.

They’re entrepreneurial, design-focused, and they're able to work across the stack. Thank you to the Altalogy team for helping us get Software Daily to where it is today, and for being continued friends of the show. If you need help with your application, check out Altalogy.