An adventure in desktop software

Designing the Tether Strength App

October 19, 2013

Tether Strength is a handy app that tells you the signal strength of your 3g, 4g or LTE connection when you're tethering the connection from your phone to your computer.

Man with Head in Jar

It's useful if you're out and about tethering your connection on public transport and your internet hangs, you can look up and see if the problem lies in the connection between your tethering device and your computer or elsewhere, much like the wifi indicator.

I'll run through the process of designing the graphical elements.

1. Designing the icon

Man with Head in Jar

I used the alpha version of the app for a few days on my tram rides into the Melbourne CBD.

Once I had an idea of the requirements, I armed myself with an red Staedtler noris club 320 felt and began sketching various concepts on white A4 sheets of paper, my desire for the icon was to marry into the mac family but also demonstrate the powerful simplicity of this Mac app.

I presented my sketches to Aidan, the developer. We both agreed on the sketch that would become the super sweet icon.

Next I imported my sketch into illustrator and created a black and white comp based upon the sketch.

After making some tweaks to the black and white comp, I imported the vector layers into photoshop and made a flat coloring of the icon.

The next part is a little tricky but 100% photoshop, I had to create lighting for the various materials, such as the metal and glass, it involves many Layer effects on layers that are set to Screen for the highlights, Soft Light for the glowing and Multiply for the shadows.

The completed icon was then exported at sizes from 16x16px to 1024x1024px in the project folder on Google Drive.

2. The Navigation Bar

Now that the icon was complete I could have a look at the menu indicator, the most important part of the app, The menu bar. It has to inform the user about the following: 1. The strength of the connection 2. The type of connection 3. The connected device 4. The length of the session 5. Data transferred this session

The most important of these is the connection strength, It is also pretty handy knowing the type of connection, as they can flip between 2G ,3G ,4G and LTE depending on your carriers coverage.

Man with Head in Jar

The other information was demoted to the dropdown menu as we recognised that the information was more valuable on demand. Man with Head in Jar

3. Refining The Navigation Bar

After launching the version with the updated graphics, we received some decent feedback, and even had a couple of obscure foreign blogs write articles about the app.

I continued to use Tether Strength on my weekday tram rides, and was unhappy with the menu icons, a few things were annoying me: - The aliasing was not consistent - The navigation bar icons were too tall - The icons were always colored

I re-created the icons in photoshop which allowed me to pay close attention to the aliasing, then exported two sets, one in Color and another in Black: Man with Head in Jar

A lovely set of icons that could live in the menu and provide users with the information they required about their tethered connection and have control of the color on their Navigation Bar. Man with Head in Jar

Tether Strength is available on the Mac app store. The app was conceived and developed by Aidan Steele and designed by Daniel Whyte (that's me).

I'd love to hear any thoughts, experiences or ideas to do with the app, so comment away!

Writen by Danielwhyte

Daniel is a UX & UI Designer focucused on building better software for iOS & Mac in Melbourne, Australia