HYPEBEAST is a media platform for youth culture to get the latest news in streetwear, sneakers, fashion, entertainment and music.

Our goal was to increase our loyal readership by improving the mobile app reading experience. During 2017 and 2018, I redesigned HYPEBEAST’s mobile apps to foster a better reading experience. Below are a few changes we shipped.

Creating a more familiar experience for both platforms

HYPEBEAST’s Android app was designed to mimic the iOS counterpart. This created an unfamiliar interactive and visual experience for our Android readers, as well as a reduction in app performance due to custom components and animations based on iOS. Furthermore, Google Play refused to feature our app due to several usability and visual issues addressed in the Material Design guidelines.

Application of Material Design patterns to the Android app

To make our app less confusing for our app readers, we utilized patterns shared by both iOS and Android platforms, while conforming to Human Interface Guidelines and Material Design specs.

We used native components and system icons wherever possible. By removing custom components and animations, such as the app bar and iOS-style “back” transition, the Android app’s performance increased and felt more snappy and familiar to our readers.

Improving readability and focus

We received feedback from our readers that our app looks dated. This was apparent when compared to our competitors and other apps. Instead of simply following the minimalism trend, we decided to take this opportunity to improve readability and focus as a whole.

News feed and article

We avoided long headlines on images for articles where editors and designers don’t have control over placement and styling. Previously, the gradient overlays made images too dark, covered parts of images, and sometimes created undesirable visuals. The revised design allows both headline and image to be clear, and also uses the same assets across mobile, tablet and desktop designs to simplify editors’ workflow.

Visual styling revisited

We revisited the typography to create a stronger hierarchy. Readers can identify important news and sponsored posts based on prominence. We reduced the complexity of icons to make them more recognizable. We also implemented new color guidelines to improve contrast and meet WCAG guidelines, and a soft 8-point grid to create vertical rhythm, consistent spacing and increased proximity.

App components

More natural and familiar gesture controls

In usability tests, we noticed readers trying to use certain gesture controls based on their experience with other popular apps, but the app failed to do their desired action.

Gesture interactions based on what readers expected

For example, we learned that many iOS readers didn’t know that tapping on the status bar scrolls to top. Instead, they tried to scroll to top by tapping on the bottom bar again. We added this gesture control to both platforms. We also made sure all the tabs were swipeable, and image galleries can be closed by flicking it away.

Since shipping these updates, our app reviews improved, and the app was featured on Google Play and the App Store. In 2017, we grew from 32k to 73k monthly active users.

HYPEBEAST app on mobile and tablet