Jens Jonason: User Experience Designer

I have fifteen years of professional experience designing technology that works for users and businesses. I have led design and development teams to successful delivery of products, on time and on budget. I am passionate about mentoring designers, coaching stakeholders, and fostering inter-disciplinary teamwork.

Yahoo! omg!

omg!, Yahoo’s celebrity news site, launched in June 2007 after only six months of design and development. The signature (and patented) home page was designed to immediately communicate the celebrity-oriented nature of the content, be visually distinct from competitors, accommodate advertising without degrading the user experience, and give users a playful way of accessing the top stories.

I kept the overall interaction design of the site as simple as possible in order to A) let the photo-centric content speak for itself, and B) reduce the implementation complexity, thus enabling the development team to deploy improvements faster.

omg! home page

Wireframe detail of module for user comments on photos and articles

Wireframe detail of search box behavior

Page flow for iPhone app

Early conceptual model for social features

Wiki-based Interaction Design Specifications

In additional to conventional wireframes, I created a wiki-based system for nested interaction design specifications. A paper-based specifications document often require readers to flip between pages to see details for modules and elements on pages. The nested wiki documentation allowed readers to expand the specifications context. Furthermore, updates to the specifications were immediately distributed since developers didn't have to download and print out large spec docs.

The screen capture movie below illustrates how a developer would look up the details of a module on the page, and elements within the module.

 

Loud3r Inc.

As the Director of User Experience Design of a small startup, I worked with the CEO to build the product development team, set product priorities, and design the user experience of Loud3r's editorial tools.

Loud3r's core product is a content aggregation engine that finds the best stories from across the web about a particular topic. The primary clients are publishers who are looking to augment their content offering, or monitor blogging and social media buzz about their own content.

Loud3r Stream Manager

The Stream Manager is the centralapplication where editors and curators manage the flow of aggregated stories. I utilized the metaphor and style of an email client since the task of processing stories is similar to managing a high-volume email flow.

Customized UI for Corbis image-centric workflows

We developed a custom version of Loud3r's aggregation engine for image provider Corbis. Their image-centric workflows and business rules required a significant rework of the user experience.

Agile Software Development and User Stories

We designed and developed Loud3r's products using a Scrum-inspired agile development process. Therefore, the backlog and user stories became the primary tool for capturing and expressing the details of the interaction design specifications.

Rather than annotating wireframe decks, I captured expected behaviors as acceptance tests in Pivotal Tracker (an agile development and project management tool). This made it easier for everyone on the team -- designers, developers, clients -- to test and verify whether a particular component of the user experience behaved as expected.

In the early stages of projects, we often used physical 5x7 cards to capture user stories. Using paper rather than digital tools allowed the team to move faster and focus more on exploring ideas.

Sketching

Sketching using pen and paper (or marker and whiteboard) is one of the best ways to explore ideas rapidly. I always prefer to develop designs using pen and paper before creating detailed designs using digital tools.

Whiteboard sketching

Notebook sketching

 

Diagrams, diagrams, diagrams!

Sometimes a a diagram is the best way to give stakeholders an overview of the components of a system. Below is a selection of diagrams from different client projects.

Main components of a resort reservation experience

Concept map and core user flow for a self-help site

Concept map for social TV site