Johan Marais-Piper

UX and UI Design / 20Four

20Four Sports App

20FOUR was a revolutionary new product that allows users to follow their favourite athlete’s personal journeys between games and in the off-season. Their point of difference was to have a selection of Australian athletes on their roster, posting exclusive behind-the-scenes content for their fans through a dedicated app.

While ultimately the app was not successful in getting the right cut-through in an already crowded social media market, the platform itself was built well, rating highly on both the Apple App Store and Google Play Store.

The evolution of a product

The idea of 20Four, a social media startup, was first brought to Love Agency originally as a one-on-one video chat product, a couple of years prior. However after a pivot in the client's business model, they decided to return with a new business model.

20Four's new platform worked as a social media feed sharing exclusive video and image content by players, on a retainer, to their users. As the digital product, while at Love Agency I worked to design the UI of four platforms:

  • Consumer facing app
  • Content creator app
  • Marketing website
  • Admin backend


Sole UI/UX designer on project at Love Agency

Sketch, Illustrator, InVision, Photoshop, HTML, Keynote




Before undertaking any UI designs I worked on fleshing out the apps content hierarchy and navigation. Through creating early wireframes and user flows with the Tech Lead, we were able to present and agree upon a product roadmap with the client. 

Next up, visual designs.


Visual Design

The 20Four visual brand was created by New Republique, including typeface colour and image direction. Moving forward to integrate this branding to the app

20Four customer facing website

The website's purpose was to share the posts users can only see through the app, and prompt sign-up

 ⚡️ H I G H L I G H T S ⚡️

Apple App Store Mention

Shortly after release to the app store in May 2017, the app was featured under the Sports category.

Start to Finish

Building the visual and interaction patterns for the native Android and iOS app, including an icon family and working with developers on micro interactions.

Client Presentations

Being present and pitching during client meetings, providing UX input on the product roadmap.


Are you building a product?

Let's talk about your goals and needs moving forward.

I'm keen to give advice or work together if it looks like we can make real change and provide each other value.

Using Format