How to Prototype Animated Interactions

This blog post was originally written for Tobias & Tobias. Should UX designers learn to code? My answer is no. I don’t expect UX designers to build complete systems with code. What I do expect is an understanding of code so that you can communicate with team members easily. I worked on this blog article with various members of the company from UX design to development. This pushed the blog article to have proper examples and insights. Great things don’t happen to those who work alone.

In the early days of web design, animated gifs, <blink /> and <marquee /> tags were crude ways to add motion to a webpage. Before long, JavaScript emerged and in its nascent form it enabled a generation of designers to experiment with animations, most of it unnecessary and gimmicky, even the best of it slow and unstable. Web sites remained largely static affairs, and for the vast majority of serious websites, animation was unfeasible. Fast forward a few years and things have changed. Mobile apps have led the way in proving that animations are not just ‘details that delight’ but also an important part of the experience, making transitions easier to understand and reassuring users about what’s happening. Increasingly designers take a “mobile first” approach to building web apps, and it’s natural to want to include these transitions in web apps and make sure they’re part of the desktop experience too. Javascript and CSS have matured and the hardware has become faster, so designers can freely consider adding even the most complex animations and transitions in world class websites and apps.

Read the rest of the article on Tobias & Tobias’s blog

What DIY Investors Want To Know

This blog post was originally written for Tobias & Tobias. This was the first blog article I written related to finance. It is funny to me because I spent over 7 years in the finance industry working in investment banking. I am grateful to the team at Tobias & Tobias for helping me craft my thoughts into an interesting read.

There are 23 million do-it-yourself (DIY) investors in the UK and a common tool they use to monitor their investments is the portfolio report. These are often static paper or pdf reports, or webpages behind a user log-in, linked to via a monthly, quarterly or annual email or letter.

However with all the numbers and charts, these reports are presented in a manner that requires a lot of prior financial knowledge. We wanted to know if the portfolio reports actually provide enough information to help advise investors, support their research requirements and answer questions that a DIY investor may have.

Read the article on Tobias & Tobias’s blog

Where Are We with Wearables?

This blog post was originally written for Tobias & Tobias. I went to a meetup about wearables and wrote a summary on the night. I wrote an article about the disruption with watches on this blog a few months ago.

At Tobias & Tobias, some of our staff wear Pebble watches, Fitbit trackers and tinker with kits to create connected devices. Some of us attended the IxDA MeetUp on wearables last week and were keen to see how the space is developing.

Wearables are electronic devices that create reports or recommendations based on physical activity, when worn by the user. We listened to several talks by artists and technologists making waves in the art, fashion and tech worlds about how wearables will become as ubiquitous as smartphones.

Read the rest of the article on Tobias & Tobias’s blog

Navigating the Restaurant Menu

This blog post was originally written for Tobias & Tobias. I explored the information architecture of a restaurant menu.

At a dinner out with some friends, the friendly waiter comes by and asks “Are you ready to order?” For some of us, that moment was the first time we had looked at the menu; “May we have a few minutes please?”

Have you ever wondered what is happening when you are trying to choose an item from a menu?

Read the rest of article on Tobias & Tobias’s blog

It’s done or is it?

Working with Agile works when there is a general understanding of the tasks within the team and transparency on how progress is going on. One area that seems to cause issues is what it means to be done. When something that is not completely done the team can’t move the item forward and thus this puts the team behind on their schedule.

The Definition of Done (DOD) is something that should be established so that everyone understands what it means to be finished a task.

In the world of cooking you are assembling a dish together by having your team creating different components together. This is the same with software applications. But when you send in work that is not “done” then “it’s raw”!


What can we do to improve this scenario?

  • Establish a clear checklist of tasks that must be completed to be considered done
  • Documentation, unit tests and testings should be considered in the checklist
  • Demo to someone else for feedback/pretest prior just to get another pair of eyes on the work


Lessons in making my UX portfolio

The one thing that you will need when applying for UX roles is a portfolio. Here are some of the things that I learnt during the process of creating a UX portfolio.

You can find my online UX portfolio at


Initial Portfolio

Final Portfolio

Final Portfolio

Not a direct translation of your resume
Coming from a development background I was very familiar with creating a resume for a developer. Usually you would want to highlight keywords or list all of the skills/programming languages you know. A portfolio is not a list of words but a highlight of your key accomplishments.

Won’t get it right the first time
I was rushed when creating my first portfolio. I didn’t know what I wanted to do so I slapped together some projects that I worked on and stuck it on my blog. I just chose things that I thought would look nice or show different sides of me. However this was not good enough for a UX portfolio.

What to include
It is easy to include work that is publicly accessible. However most of the work I was involved with in the past was under NDA or not accessible by the public. I asked for permission from the company to use some of the sample screenshots. They were happy for me to use the assets as long as the branding was removed. I also didn’t have a lot of work in the mobile since my professional career focused mainly on the desktop. To fill this space, I used some of my personal time and created sample applications and created UX assets for the concepts.

Choose your best work or work with a story.

The work you show on your portfolio way not even be completed or actually ever live. To show the outside world uncompleted work was a new concept to me. This is part of a UX designer’s work, you may create something that doesn’t get funded or the product takes a different direction. What is important is thinking process of why you did something or how you solved a problem.

Know your audience
I talked to different people to see what they looked for when hiring UX designers. I was able to determine the gap between my initial design versus where it should be. I also had a chance to talk to some UX recruiters who stressed the importance of process over end product.

You are not only a visual designer. The process should be showcased not only the end product.

The final piece of work alone in a portfolio does not say much about why or how something got on to the screen. The way your showcased item should read is like a case study or a problem with clear stages.

  • Problem
  • Brainstorm/Design
  • Solution

Although you may spend a lot of time working on your portfolio and you want to write about everything in detail, in reality it will be design managers or other recruiters who will look at your portfolio. They may have a lot of candidates and may only spend seconds looking at your portfolio. Your portfolio should contain enough information for someone to understand your process but also easily consumable if they just scrolled through it quickly.

How to show a portfolio
I chose to use the web to display my portfolio. This is good because people can view your portfolio easily at their desk or on their phones (provided that your portfolio is mobile friendly). Github allows for free hosting for simple webpages. Since I already had a Github account I thought this was the best way to approach deploying and building my webpage.

I used Twitter Bootstrap as my HTML5 template and bought a theme, Shapes, which handles portfolios well.

One day I will need to create a PDF version of my portfolio to make it easier to present on a screen as a slideshow or to have as a hardcopy.

Useful Resources