An Espresso-Driven UX Approach

It was during a recent espresso-fueled debate around User Interface Design and UX as a multi-disciplined field that I got myself into trouble. In order to prove the effectiveness of UX tools to a bunch of skeptics, I agreed to create a concept iPad application. I had one week.

This was first published on great people, great content – check ‘em out.

So, here is what I did and how I did it.

Note: Due to the brand I used the ‘client’, as I’m unable to share all of the details, deliverables and insights in this post.

Day 1 – 4: Strategy

User needs and business objectives should lead you to the correct digital channels but, in this case, the requirement was for an iPad application. This made it even more important that I understand the audience and device.

The Business
Documentation is crucial but nothing beats face-to-face conversation with the relevant stakeholders.

- In this case, my access to the business was limited and I had to rely on only a few telephone interviews.

The User
I broke this up into two distinct tasks – (1) Identifying and getting to know the ‘target audience’, and (2) figuring out their needs.

– I created a simple 10 question survey at and used social media to source respondents.
– 3 face-to-face interviews with real people representing the target audience.

The Device
I ran the risk of proposing a website disguised as an iPad application, so I had to get a thorough understanding of the operating system and how people use tablets.

– Studied the Apple iOS Human Interface Guidelines manual.
– Picked up a copy of iOS Wow Factor: Apps and UX Design Techniques for iPhone and iPad (Apress, Timothy Wood) at the office. This is by no means the definitive guide to iOS but it gave my enough to work with.
– Lived on iTunes, staring at multiple applications from the relevant business category. Google Images and YouTube came in handy when I couldn’t access a specific application.

Day 5 – 6: Designing the Application

With my foundation set, I had to create tangible deliverables – (1) Map out the application (2) segment the functionality (3) and propose a working model for the user interface.

Mapping the Application
I reviewed the existing digital channels of the business and noted the most critical functionality and content. I mapped my new proposed functionality into a new framework based on the research in the previous step, and segmented and categorising everything as I went.

– I needed a quick way to articulate my proposed solution. I turned to iThoughts, a mind-map application on my iPad.

Segmenting the Functionality
I posted the giant mind-map on my wall and identified 2 distinct functional segments. I then categorised the functionality and content accordingly.

– Normally, I would turn to my friends at Optimal Sort, but this time I went old school. I covered my wall with several sticky notes for a Closed Card Sorting exercise.
– I fired up Omingraffle to map the taxonomy and high-level navigation.

Working Model for the Application UI
I feared this step the most, but with the structure and functional layers in place, the creative juices just flowed. I knew what the application had to do; I just had to figure out how it was going to do it.

– I found an array of design blogs with iPad related UI designs and also spent a lot of time on several pattern libraries.
– Sketching …lots of it!
– I used Omnigraffle to convert my sketches into a structured wireframe layout with relevant annotations (thanks to Konigi’s awesome stencils).

Day 7: Prototype and User Testing

I spent most of Day 7 documenting what I’d done into a presentable Keynote document. By that afternoon I had little time left, so I had to make some quick decisions. The objective was to test and demonstrate the UI framework in action.

Low Fidelity Prototype
Prototyping is ingrained in my day-to-day approach and my friends actually poke fun at me because of this. I’m a cautious strategist believing in starting small, interrogating the data and then iterating. I decided to show 1 or 2 minor interactions, just to get a feel for how the interface would react.

- I drew up a set of annotated wireframes in Omnigraffle to demonstrate how the interface would react to tactile input, and how the layout would adapt to the tablet’s vertical and horizontal orientation.
– Keynotopia’s set of UI components combined with native Keynote functionality allowed me to build an interactive application within hours.

User Testing
The final and probably the most exciting step and I ran out of time! I had the prototype ready on my iPad for testing with real users (thanks to the tools in the previous step).

– I planned to use Keynote on iPad for live testing.
– Click testing – I wanted to try intuition HQ or Usability Hub.

The Document

The following Slideshare document is an edited version of the final presentation, I’ve also included a screen-capture video of the prototype in action.

This entry was posted in Information Architecture, UX by Werner Puchert. Bookmark the permalink.

About Werner Puchert

South African Digital Strategist with a passion for all things UX. A proud member of the Information Architects Institute Werner believes that UX is more than an industry or profession - its something that needs to be ingrained into whatever you do. Africa is a hub for innovation and hungry to share and collaborate with the international community. Werner’s goal is to understand how UX can be harnessed to benefit both the community and those driving innovation.