Tagged with: ‘ux’

Posts: 4

Questions to ask your design work

Last month I spent some time updating my portfolio. As a product / user experience / web designer, it can be quite tricky to present your work to others.

The rock star visual designers of this world can get away with presenting screenshots of their stunning visual work — job done, money due.

But if your day-to-day consists of making user flows, interaction designs, napkin wireframes, trade-offs, A/B tests, and minimum viable products, then you — like me — need to do a bit more groundwork to do the show and tell properly.

It’s not so much the what, but the why and the how.

With this in mind, I decided to structure my portfolio around the questions I ask myself when looking at other products and services:
A user experience, product design portfolio layout

1/ What was the context?

Was this a piece of work for a fast moving startup or a 100 year old family business? Setting the context lays some good foundations for answering the questions around what you did and why.

2/ What problem were you trying to solve?

The cornerstone of successful design projects, is making sure you’re solving the right problems.

In this section of my portfolio pieces, I found it useful to pull apart the problem I was hired to solve.

Sometimes the problem definition is a bit blurry i.e: Do we really need to make the sign up process faster? Or - to convert more prospects - should we enable users to access features without committing to signing-up first?

3/ How did you design the solution?

Here we deep dive right into how you designed the product / interface / solution.

Unpack how you approached things. Show rather than tell. Let us see what you made.

Did new insights emerge as you moved through the project? If so, lay them out here — tell us how you responded.

4/ Review the above

The final section of the portfolio answers:

  • How did it go?
  • What impact did the solution make?
  • What happened when your work reached customers’ hands?
  • Can you surface some feedback or data that points to show your solution is working out?

Arguably, the biggest thing you bring to the table as a designer is your ability to render an optimal solution — and answers to these questions go a long way in revealing how you do that.

Same Same. But Different.

It’s Sunday, late morning, and I’m right in the middle of cleaning the bathroom. In the other room I hear a frustrated girlfriend struggling to find accommodation on - lets say - website X, for our trip to the Amalfi Coast.

Complaints flying left, right and centre, vented in a tone that kind of suggests that this is all my fault:

  • “Why won’t this?”
  • “It won’t let me!”
  • “I keep loosing my tab when I go to trip advisor for reviews!”
  • “I hate this”
  • “Why can’t it show me what’s available on the dates that we’re going”
  • “Oh FFS!”

At this point I’m scrubbing the bottom of the shower. The smell of bleach is intense and my trainers squeak on the floor as I scrub back and forth. Before I hear the next complaint come in, I stop and shout - “try AirBnB?”

“Ahhh! I can’t use this useless website anymore.”

“Try AirBnB!” I shout.

No reply…

30 seconds later:

  • “This place looks gorgeous”
  • Then there was laughter “this guy’s review is hilarious… ‘It's a great place to unwind and get away from it all. Especially given the wifi and flatscreen TV doesn't work’ haha”
  • “I’m loving the ones that look good, ok”
  • “we can go through them later“

3 minutes later, “I’ve found somewhere! Let’s book this one!”

Same problem, solved differently

AirBnB and website X offered the same thing, that is: A product that helps you find, compare and buy accommodation for your travels.

One had concentrated on designing a delightful user experience, the other clearly has some work to do.

What fascinates me though, is the impact that poor design can have on someone’s Sunday morning.

Put another way, how important our work as designers is.

This is How You Automate

Just received a wonderfully engaging / automated / interesting / human / polite / funny / direct / personal upgrade message (there’s an oxymoron there, I know) from the folk at TeuxDeux. This is how automated marketing should be:

Dearest Tom,

It’s been six months since the launch of the new TeuxDeux and we very much hope you’ve enjoyed it. Given how much you’ve been using it, it’s our guess that you have. In fact, with 1846 items done since you’ve been with us, you are certainly among the most productive people on the planet!

As we mentioned in March, TeuxDeux is moving to a paid subscriptions service and it’s almost time for you to decide whether you want to become a “true believer.” You can subscribe here:


Becoming a subscriber helps us keep TeuxDeux running, fix bugs, update our apps and, soon, shared lists! And that’s just what’s up next.

Before we go, we thought you’d enjoy a couple other fun facts about you & your TeuxDeux:

  1. The to-do that was on your list the longest that you finally completed was: “Complete e-Business models section” (1405 days)
  2. The to-do on your list the longest that you haven’t completed… yet :) was: “Portfolio video” (193 days)

Don’t worry. You’ll get her soon.

Thanks so much for all your support. We love and appreciate you.

The friendly folks behind TeuxDeux’

Notes from Mobile First

I read Luke Wroblewski's Mobile First over the weekend. Here are my (unedited) notes:


  • Mobile opens up new opportunities & introduces new constraints
  • Forces you to focus products & interfaces
  • Desktop users = deep sea diving
  • Mobile users = snorkelling

Advantages of Native Mobile Experience:

  1. Better access to system resources
  2. Robust access to hardware capabilities
  3. Core features like access to address book / photos / camera / audio / notifications etc.
  4. In-app sales

Advantages of Mobile Web Experience:

  1. No updates to download
  2. Less expensive
  3. Can be used by all mobiles
  4. Improved share-ability. [Marco Arment wrote an interesting piece about this.]
  5. Easier to A/B test


  • Reduced screen size
  • Means a reduction in interface debris, complimentary content, ads and unnecessary calls to action
  • Forces us to focus

Performance is V.Important

Google research shows an additional 200ms can disrupt engagement and effect bounce rates [more so, on mobile]

Some measures to take:
- Use image sprites - Bundle together and minify CSS & JS - Limit the use of CSS grid systems - Use proper HTTP headers to ensure files are appropriately cached in the browser's memory. - Where appropriate, take advantage of modern browser capabilities like: 1. Canvas
2. Appcache


  • 84% home
  • 80% misc downtime
  • 74% waiting in a queue for something
  • 69% while shopping
  • 64% while at work
  • 62% while watching television
  • 47% during commute

More distributed spread of usage across the day. Does this create new opportunities for user engagement?


As well as introducing constraints, it's important to maximise potential on mobile by pushing capabilities.

  • Most important features come through satisfying a customer's vs. the use of a specific hardware tool
  • Can access GPS / accelerometer through web browser on iPhone
  • Audio interfaces?
  • Proximity?
  • can we build on new / mobile capabilities to better meet our customers' needs?

Case in point: London underground
- Desktop > browser > url > find maps page > download map > find nearest station - Mobile > open app > app finds nearest station


  • Align with how people use their mobiles and why
  • Emphasise content over navigation
  • Options for exploring and pivoting
  • Pivoting: Navigation points at the end of the page. More contextual over global
  • Anchor to bottom of page = a smart navigation patter.
  • Controls at the bottom of the screen are easier to work with: But these contend with browser chrome.
  • Maintain clarity and focus; a là Yahoo!'s email compose screen

Most mobile usage reflects:
1. Lookup / find (urgent info, local)
2. Explore / play (bored, local)
3. Check in/ status (repeat, micro-tasking)
4. Edit / create (urgent change / micro tasking)


  • Go small by going big
  • Consider swipe interactions
  • Explore NUI's (Natural user interfaces)
  • [Page 76] for conventional gestures to open options / delete / refresh screens
  • Hover is dead. Though can be used as a click action (no JS required)
  • Yahoo!'s swipe for email options


  • Embrace mobile as an opportunity for our users to contribute whenever inspiration strikes
  • Keep labels on top and outside of form fields
  • Mobile optimised labels and placeholders
  • Select/options are tap inefficient. Consider input[type="number"] for tap up and down figures etc.
  • Speed up task by making smart defaults on good assumptions
  • Reduce validation problems with input masks. Best practice shows the mask beforehand, and persists throughout input
  • Be brutal and trim trim trim trim trim
  • Hide away other elements on non-linear forms such as editing profile > pop open when needed
  • Where we wanted improved contributions, use in-context inputs for speed and little effort
  • New opportunities NFC inputs, audio interfaces, cameras for scanning, GPS etc (nearest hotel crosshair tab)
  • Make it obvious and easy for users!