← Home
Button TextButton TextButton TextButton Text

PUML App Wireframes and Interface Design

I was responsible for...


Adaptive Media


March 2019

I was asked to develop wireframes, prototypes and finished designs for a fitness app that exchanges the user's health data for bitcoin rewards.

What’s a Rich Text element?


Another subheading

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

And here is a really important quote that I'll want to highlight.

• • •

Project objectives...

I was given the task of realising the ideas of a new project utilising cryptocurrencies to motivate people to be more active.

My objective was to design the experience for a complex app with an easy and enjoyable experience that users wanted to come back for.

• • •

I was responsible for...

• • •

Project details...


There was a four step onboarding process for the PUML app.

As the user's security was a priority, we also allowed the user to secure their data with a four digit code to keep login quick, as well as secure


Challenges is where the user can discover, enter and follow challenges. A challenge can be hosted by their local gym, or they can join challenges from other sponsors. Once they enter a challenge, the app hooks into their health profile via a third party health app. This then allows them to compete for PUML tokens, by either reaching a data goal, or being within a top position, which they can track via a live leaderboard.


The PUML Marketplace give users access to items and promotions which they can redeem using their PUML tokens.

• • •

Applications Used

Applications Used

Sketch for UX exploration and final UI design

Abstract for sketch design file management and version control

InVision for low fidelity prototyping

Principle for high fidelity prototyping

InVision Inspect to assist developers during handover

Slack for team communications