Redesigning and building an iPod UI for modern users

Table of Contents

  1. In summary
  2. How does one find themself here?
  3. Researching to understand the modern user
  4. Conceptualising the interface
  5. Developing and Refining
  6. Release Management and Organisation

In summary

As part of my undergraduate degree, I under took a design research and develop project to reduce energy consumption in the home. I performed primary and secondary research, as well as concept, ideation and development of a figma prototype for an application.

How does one find themself here?

Several years ago while battling illness, boredom struck me and I found myself exploring using an iPod again. I discovered that many people were doing the same, and designing interesting user interface concepts to use on them. I decided to make a simple theme for myself, only to discover I had a large and diverse userbase with different needs than my own.

Researching to understand the modern user

I recognised that none of the UI themes available actually considered their users, people with visual impairments often faced bugs when making fonts larger and non-English speakers faced a complete lack of language support. I also noted that many users today customise their iPods with uniquely coloured shells to make it their own. The modern culture was wildly different, and I saw the value in making a UI to match that.

Two images. The first is a reddit post of someone asking how they can japanese characters to render for their music. The iPod shows rectangles instead of characters. The second image is of an iPod where the font size has been made bigger. A piece of text sticks out from under the menu where it is not supposed to.
Left: a user encountering a UI theme with no Japanese support.
Right: a visually impaired user encountering UI bugs when changing fonts to be larger.

Conceptualising the interface

I explored many different avenues of design for the UI, a big decision I made was to only use two colours throughout. This allowed for dead simple customisation, letting users set any colourscheme they liked, but providing a number of programming challenges to solve.

I also put effort into designing information points to be as distraction-free as possible. This led to a minimalist design language, with a focus on hiding widgets when not in use. My overall goal in the process was to have a UI that anticipated the user needs and react at just the right time.

Three mockups of the UI in use. There are sticknotes around. The first suggests that colours could be changed by the user. The second suggests that icons of features not in use should be hidden. The third notes that the header bar is compact.
Some of Themify's core design principles

Developing and Refining

The biggest part of Themify however is it's functionality. I wanted not just for users to be able to put it on their iPod, but it to be a highly polished and bug-free experience. My process of implementing a featuring and refining the design based on how it functioned created a positive feedback loop throughout the UI.

I developed a number of novel techniques for working with iPod UIs in order to improve the user experience. My initial prototype lacked anti-aliasing for smooth graphics, which I fixed by hacking the font system to render my UI with.

The first themify design. It has sharp, pixelated corners everywhere. The icons are bulky and less information is shown The final themify design. The UI now has smoothed corners and appears more refined. Icons are compact and more information is available to the user.
The first prototype versus the final version

Contributing beyond the scope of Themify

I sought to improve the user experience further beyond what the Rockbox operating system would let me, and so I spent a month studying the OS codebase and learning more C in order to add the features I felt were needed. This experience taught me a lot about working within software projects with strict management and guidelines, as well as communicating within organisations. The work I did is also available to any Rockbox UI themes to implement.

On the left is the old quicksettings appearance, it lacks any visual feedback to the user bar a plain text setting output. The right shows the new appearance, each quicksetting has it's own button like style with clear feedback on the state of each setting.
The Quicksettings appearance after my changes to Rockbox

Release Management and Organisation

I learned a lot about managing and releasing a large project as part of Themify. I organised and communicated between a number of people commissioned to assist with creating extra assets for the project like illustrations and a manual. I also managed the release across a number of platforms and promoted it to relevant communities, including building a website as an information hub.

A small, squishy mascot. He looks like if an iPod was turned into a boy by a wizard. The image features many different poses and expressions.
Themify's mascot, t0Fu, created by Thom Mack

The project has seen moderate success with over 33,000 downloads and users from all over the world. It has also featured in videos across multiple different social media platforms in many different languages. I am incredibly thankful for the support I have received from fans on Ko-Fi that allowed to pursue this project to it's completion.

Themify Website
A collage of images from social media of people using Themify all over the world.
Themify users across the internet