Skype & Microsoft
UX | UI | Motion | Visual | Marketing
Helping the world feel together, whenever they’re apart.
A brief overview of the projects I was fortunate enough to work on during my time at Skype, in roughly reverse chronological order. Not alone of course, these products are the effort of a team of great people.
Scroll ↓
Skype Translator
Breaking the Language Barrier
Interaction | Visual | Motion
Skype Translator was a great collaboration between the Skype, Bing and Microsoft Research teams. Locked in a conference room for an intense two weeks, we brainstormed, built and tested ideas on a daily cycle. Armed with the findings from the previous afternoon's testing session, we would continually refine the experience of having a conversation with someone in a different language.
Critical to this was the timing of animation and visual cues. Over communicating what was going on under the surface caused users to become distracted. Too little, and they'd start talking over each other. Sitting side by side with developers allowed us to iterate quickly until we found a the right balance.
Seeing the results of our efforts breaking down communication barriers was incredibly rewarding.
Skype UI Symbol Font
One Font to Rule Them All
Visual | Technical
The Skype icon library had grown to be over 300 strong and managing changes across multiple platforms was proving tricky, with fragmentation starting to occur. To tackle this, in anticipation of the Windows 8 release, I took on the challenge of creating a font containing every icon. It sounded simple enough. There were tools that could automate this kind of thing, right? SVGs in one end, .ttf, .otf, .woff out of the other...
And yes, there were tools, but the quality of output from all of them at the time was rather poor and certainly wouldn't be good enough for us. So I ended up diving into the weird and wonderful world of OpenType tables, font hinting and a bunch of tools that felt like they hadn't been updated since the 90s.
I contacted the Microsoft font team in Redmond for advice, and they confirmed my fears. A majority of the Illustrator artwork would have to be modified to some degree to make the contours more suitable for TrueType hinting, a process where instructions are added to vertices to ensure the glyphs render nicely at smaller sizes. They put me in touch with Mike Duggan, who is not only a legendary font hinting expert, having worked with the likes of great type designers such as Hermann Zapf, Matthew Carter and Bruno Maag, but was also one of the inventors of ClearType sub-pixel rendering technology. Mike spent two intense days teaching me as much as he could about font hinting.
Two months later, there was a completed icon font that shipped with the launch of the Windows 8 Skype client, and survived Microsoft's rigorous testing and signing process. The same font was rolled out to all clients and web over the following year.
—
300+ icons, Windows, OS X, Linux, iOS, Android, Windows Phone, web | 1 file, 74kB.
Skype for Windows 8 (Modern/Metro)
A Touch of Something New
Visual | Technical | Marketing
Microsoft were about to launch their touch focused Windows 8 OS to the world and there of course needed to be a Skype client on it. My primary role was on the visual execution, but that quickly grew to fulfil a new requirement. We now needed to localise all marketing product shots. Initially this would be to 38 languages, but would ultimately grow to 106.
After testing a few ideas, in collaboration with a front-end engineer and consultation with the l10n team, I built a system that would take real UI strings and localised dummy chat messages and generate print ready screens in every language. This was not only less error prone, but saved a great deal of time and also my sanity.
A great side effect of this set up was that we could now easily test if any design changes were going to break in certain languages, especially ones with non-Latin character sets, or a right to left direction.
Skype for OS X: 2.8–6.2
Primarily contributing to visual execution and a major overhaul of the buttons system for the Retina upgrade.
Visual | Production
Skype for Windows: 4.0–6.1
Icons, buttons, avatars, logos, overlays.
Visual | Production
Amazon Fire, Windows Mobile, 3Skypephone, Blackberry, Symbian S60
Mobile (various)
I had the chance to work on a variety of mobile devices, each with their own quirks and challenges. Overcoming storage limitations and banding gradients was par for the course during this era.
Visual | Production
Asus SV1 AiGuru Videophone
Icons and preparing assets for implementation.
Visual | Production