← Back to Case Studies

Design Process

In this case study, we take a more detailed look at some of the steps involved in the design process when building a mobile application.

In this example, we had already created an iPad application for a company called Velo-Trainer. The app was designed to allow users to (virtually) compete against their friends and take part in training sessions on a turbo trainer. The initial iPad application demonstrated sufficient functionality to secure additional funding to develop a dedicated mobile application designed to work across a wider range of devices and open up new sales opportunities.

We began the process by wire-framing the existing screens from the iPad version to see how they could be implemented for mobile . The difference between the types of device and the amount of on-screen real estate meant that certain views would have to be removed and others would have to be adapted.

Considered a little old fashioned by some, paper based wire-framing can be really helpful when setting out ideas and evaluating different layouts.


One of the key screens that needed to be created that was not on the app was the sessions screen, this is the screen that would appear once the user has started which ever session they had selected.

The user would likely be on their exercise bike when viewing this screen so it was important that the text was clear and stood out which is what lead us to our end design.

The image below shows all the completed screens for the app.

The finished application presented as a mock-up to show how the design would look when being used by an end-user.

We hope this post gives you a little bit more insight into the design process implemented here at Zaltek.

If you’ve got any questions or you’d like to talk to one of our team about a project then feel free to fill out this contact form.

Ready to start seeing real commercial value from your innovation?

Get in touch with Zaltek Digital

Get a Quote