FitBugg is a location-based fitness app which connects personal trainers with fitness-seeking individuals in their area. Fitness session organisers create events which fitness-seekers book in to and attend. All of this is managed within the framework of the app.

My role

My role began in late February 2014 as UI designer. I was given a basic product specification document outlining desired functionality and tasked with bringing it to life.

The deliverables were logo design, wireframes, high-res mockups, all creative assets sliced up as PNGs and an interactive prototype.

This would provide an iOS developer with a concise development roadmap and a thorough understanding of the app’s business logic.

FitBugg About

App architecture

Before opening Photoshop, I began creating a basic system overview (traditionally known as a site map).

This gave me the basis to begin sketching pen and paper UI wireframes.

The app architecture planning process.

The app architecture planning process.

FitBugg Session sketch


Once I had sketched low-fi wireframes and established the structure of the app, I began exploring individual screens in more detail.

In most cases the final wireframes and high-res mockups only differed slightly from these initial sketches.

I was able to quickly prioritise important information and set the core visual hierarchy on all screens.


To communicate the fundamental structure of the app and its screens, I created over 100 wireframes in OmniGraffle and compiled them in a detailed product spec document.

I might never speak to the developer of this project so it was important that all features and interactions were explained in detail.

OmniGraffle wireframes
FitBugg documentation
FitBugg logo

The FitBugg brand

In the early going my working colour was a grassy-green which would map to the outdoor park location of many PT sessions. Over time this began to look dull, and in experimenting with the icon we settled on a vibrant blue.


I wanted the typography to match the fun style of the icon. I mocked up various options but ultimately decided on Museo Sans Rounded because it felt both solid and strong while maintaining the rounded style of the stick-figure.

Proxima Nova
Museo Rounded


A colour palette was developed and used throughout the app. This included the blues shown below, along with a suite of blue-tinted grays and success and fail colours.

FitBugg colour palette

Hi-res mockups

High res mockups were designed using Photoshop, which I’ve used on a daily basis for over 10 years. With wireframes as a guide I was able to move very quickly through all screens.

FitBugg mockup
FitBugg mockup
FitBugg mockup