UI Challenge 005: App Icon
App icons are something most of us don’t give a second thought about. They are par for the course when downloading an app. Typically, they are the logo (or are logo adjacent) for the product, and therefore are almost second nature for the user once they appear on a mobile device screen.
So when this UI challenge arrived in my inbox I had a couple of thoughts:
Option 1: Do I create an icon for the calculator I just designed – because the current iOS one is ugly AF?
Option 2: Should I design an app icon for my passion project I am currently working on?
Option 3: Or, should I try to come up with an icon for an already existing service, that may or may not have an app, and therefore take on the challenge of thinking through what app icon could be created for the service?
I decided to combine a bit of option 2 and 3 by tackling the creation of an app icon for the Copenhagen Metro.
My mission: To design an app icon, keeping in mind what best represents the brand or product. Or, is it an incredibly unique design? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?
The user(s): Locals and visiting tourists who are familiar with public transportation and plan to utilize Copenhagen’s Metro while in the city.
The problem: Users find it inconvenient when trying to navigate and plan their route on a Metro system if they need to reference a printed map and/or research on their computer before setting out into the city. They need a quick and easily accessible product that will allow them to reference a station map, plan routes and navigate while they are on-the-go.
My solution: Designing with the mindset that this app already exists, I set out to create an app icon that would feature both the branding of the current Metro website coupled with Copenhagen’s iconic Little Mermaid image.
Pencil to Paper
As I began to think through the possible solutions for the icon I knew I needed to keep in mind what is currently featured on the website (in terms of colors, logos and icons), as well as the iconography associated with the city and what the tourism board utilizes.
Light blue, white and red: The colors you find permeating throughout the Metro website and within the logo
The Little Mermaid: One of the most famous icons associated with the city, and used within the Visit Copenhagen branding
Scandinavian design: What this area of the world is famous for – clean, simple lines, minimalism, functionality without sacrificing beauty, and a lack of clutter.
Digitally Brainstorming
Now I am someone who prefers light mode. There’s just something happier and more upbeat (in my opinion) about your phone screen being in a brighter color.
That being said, with the release of dark mode within the past couple of years so many users gravitated toward a dark, richer and “more calming” phone display.
Because of this, I knew that I needed to consider both a light and a dark mode solution for my calculator – ultimately giving the user the option to choose their experience, rather than determining it for them.
Because I come from a background in graphic design after sketching I tend to continue brainstorming digitally. Being a visual person, once I have all of my illustrated elements created it’s easier for me to move them around on a canvas as I think aloud.
Which is how I ended up with the following ideas stemming from my sketches:
Refining the Design
This is where some “user tests” aka chatting with a user to see which they preferred came into play.
I of course knew what I was designing for, but would the user immediately recognize the app if one of the above was on their home screen? Although the top right solution (featuring the Metro logo with “Copenhagen” integrated into it) was the easier for the user to understand, the answer was no.
So I went back to the Adobe Illustrator drawing board – putting Scandinavian even more top of mind – and rearranged some things…
After taking a look at the two updated solutions, both within Illustrator and on a mocked up mobile screen, I made a couple of tweaks.
As much as I loved the placement of the Little Mermaid, I sadly realized she was too small for an icon on a mobile screen. So in terms of an app icon she wouldn’t work, but I know there is something there with that design so I’ll keep it in my back pocket.
