Web to app transformation

print to web, web to mobile

After developing a basic web tool for Specac, I was tasked with transferring this to the Android & iOS mobile platforms. The apps will be available on the Google Play Store and iOS App Store.


early iterations of the idea

Our animated advisory articles were a hit with scientist personas, according to KPI's. So we decided to try something new and create a tool to facilitate day-to-day analysis, rather than an article.

I worked with a spectroscopist on converting a traditional Infrared Correlation Chart (like the image below) into a digital lookup tool.

The web trial version received enough page views and long enough engagements, that we decided it was worth building a mobile app version, for the scientific workplace.


finding inspiration

The original handheld frequency converter uses a circular slider to select the desired frequency, like a wheel chart calendar.


Contextual inquiry research in lab settings showed this 'spinning' control to be convenient for an analyst using their hands at a computer or instrument.

The most ergonomic wheel control is arguably the smartwatch, so I researched watch UI's.

Design the experience

sketches, wireframes, concepts, prototypes

I experimented with patterns and shapes from the research. Then I refined designs and layouts iteratively, based on paper and wireframe usability testing with colleagues.


I moved the 'wheel' to the bottom of the screen, to keep it in the green thumb zone and I added a progress bar to provide interaction feedback. The wheel grows on tap, to enhance selection accuracy and I added a 'type' option, enabling the user to type numbers manually if they'd like to. I also added a secondary nanometre input.

Development phase

I've built an Alpha prototype and am now optimising the UI for the native platforms.


For example, the 'Wheel' and 'Type' buttons need iOS styling to be compatible.

I am using Unity, Android Developer Kit and Xcode.

Building a solution

Build the solution


not yet measurable

In terms of the project itself, I'm happy with how we've travelled from print to web and from web to app. The high success metrics for the web tool inspired us to build an app, which is now in the final stage of development. We'll have to wait and see how the app is received. Spectroscopy is a small niche, but we can use Specac's expert knowledge of this field to add authority to the brand overall.

I have learned more about the ergonomics of designing mobile interfaces. And I'm still learning about the differences in native requirements for Android and iOS.

©2019 by Big Tree Digital.