Portfolio

Minded to design for ecosystems of usage across multiple devices and the cloud, this is Edwin with a sampling of the prototyping artifacts that he employs: paper and whiteboard sketches, Balsamiq Mockups prototypes, Photoshop prototypes fed into interactive on-device prototypes, HTML/CSS prototypes, and UI specifications.

Minded to design for ecosystems of usage across multiple devices and the cloud, this is Edwin with a sampling of the prototyping artifacts that he employs: paper and whiteboard sketches, Balsamiq Mockups prototypes, Photoshop prototypes fed into interactive on-device prototypes, HTML/CSS prototypes, and UI specifications.

Portfolio

Should an Interaction Design Portfolio Showcase Final Products? If Not That, Then What?

As an interaction designer, showing a portfolio of your work can be a bit of a perplexing challenge. The shipped product represents not just your skills as an interaction designer, but the skills and work of user experience researchers, visual designers, developers, marketers, and many other stakeholders.

What, then, would best showcase the work and work style of an interaction designer?

Maybe the answer lies in reversing that question: what might a prospective client, employer, or co-worker want to learn about an interaction designer in deciding whether their team and this designer would be a good fit?

Here are a couple of key questions and answers to address that:

How does Edwin work, and what is he like to work with?
Check out my Design Processes, Artifacts, and Work Style.
What kinds of projects has Edwin done for employers or clients?
You can always refer to my resume, but for a more targeted answer to that question, my work history and experience include products in these categories (shown in more detail on my Design Processes, Artifacts, and Work Style page):

  • A screenshot prototype composed from rendered HTML/CSS pages and components.

    A prototype for a web application, composed in Photoshop from rendered HTML/CSS page components, showing a keyframe in the interaction that was more easily done in Photoshop than in just HTML/CSS.

    Web applications:

    • Business applications for: a specialized CRM domain (on SalesForce.com’s Force.com platform), order management, license management, service contract management, Yahoo Ad management
  • Java-based enterprise applications
  • Software applications (Microsoft Office, user research on a part of it)
  • Academic projects included: mobile phone software, TV remote control hardware and software, encyclopedia software.

Showing examples of these in a public portfolio can be problematic, for those reasons noted above as well as the fact that these examples are usually protected by non-disclosure agreements (NDAs) with employers and clients, who usually own the intellectual rights for those designs.

Sharing these in more controlled ways may be acceptable, however. This can be done in an in-person interview, of course, but we may be able to arrange something else if that is too inconvenient. Please contact me for arrangements.

Larger Questions

What kind of design or product vision does Edwin offer? On what kinds of projects might Edwin be interested in working, given the right opportunity?

I’ll include in my portfolio here a showcase of my design work from publishable professional work and personal projects. I explore themes and issues of interest in my personal projects, and they may involve multiple iterations and phases, or they may be one-shot designs.

Pandora Driving Mode (2014)

Driving mode prototype in action, no commentary (45 seconds). Tools used: Photoshop, Proto.io, AZ Screen Recorder.

In October 2014, I accepted a challenge to redesign Pandora’s mobile app or to add features at my discretion. After a quick heuristic evaluation, I focused on the core experience of Pandora’s mobile app—specifically, its Now Playing screen where users are probably spending most of their time, and that screen’s usage while on the go. I chose two areas in which I wanted to improve the app’s user experience.

The first area was the Now Playing screen’s lack of any indication of what station users were listening to and it’s lack of any way to navigate directly to other stations. With Pandora’s app design of the time, users had to leave this screen, going up to the app’s home screen to change stations.

The second area was the amount of visual attention and hand-eye coordination needed to interact with that screen. I felt it important to support users when they need to prioritize those resources for other activities like driving, riding a bicycle, running, or working out.

A side benefit of this minimization, it turned out, is that it led towards a design that might translate well to the kind of incidental use cases expected in wearables such as smartwatches

A full write-up of the design process with all the artifacts produced along the way is at the Pandora Driving Mode page, which includes both the abbreviated video demo seen to the right, and a video presentation of the prototype’s design.

RedBeacon design challenge (2013)

The new design expands the app from a service request submitter to a home improvement project notebook.

The new design expands the app from a service request submitter to a home improvement project notebook.

Redbeacon.com was looking for an interaction designer. In exploring the fit between my mindset, skills, and their needs, they offered a design challenge. This is my response, showing me to be more “user experience designer” than “interaction designer”—as RedBeacon defines them.

While our fit was not ultimately right, I learned through this process one company’s distinction between a “user experience designer” and an “interaction designer.” Where I had understood the terms and roles to be interchangeable, their hiring manager drew a distinction between them, with user experience designers being more holistic, providing designs for higher level aspects of products and services—e.g,, how a product or service might fit into users’ lives—where interaction designers are more focused on the details of screen designs and the coding of those screens.

Notifications (personal project)

The prototype shows the frame of the HP Touchpad, the status bar from within an application, the notification area dropped down, and the action drawer opened.

A Balsamiq Mockups prototype for an action drawer that opens vertically to the right as an actionable notifications framework that evolves webOS v3.x’ much-lauded notification system.

Expanding them from siloed, single-mobile-device notifications to multiple-device, cross-platform, coordinated, system-wide Personal Digital Infrastructure (PDI) notifications. That’s the theme, and it will involve a number of iterations and phases. Here’s what’s available now:

  • Actionable notifications for webOS v3.x+: webOS notifications are arguably among the best of the best in any mobile OS. I aim to make them better. I will write a fuller article about the project, but my 39-page design vision document (PDF, 5 MB) is available now. In it, I document the process that I followed from rationale to sketches and a couple of iterations of prototypes produced in Balsamiq Mockups. I also have a clickable prototype (PDF, 940 KB) of one of the design options.

Mobile App For webOS

A prototype made in Balsamiq Mockups for a map-based, mobile app that is intended to support dynamic queries and results exploration (as described by Schneiderman). The then-standard webOS floating heading (here, "Locations") is elaborated with a magnifying glass and a "Filters" section. Each of those summon translucent dropdown panels.

A prototype made in Balsamiq Mockups for a map-based, mobile app that is intended to support dynamic queries and results exploration (as described by Schneiderman). The then-standard webOS floating heading (here, “Locations”) is elaborated with a magnifying glass and a “Filters” section. Each of those summon translucent dropdown panels.

A mobile app that serves as an intelligent and searchable “DVR” app for real-time streams of location-based classified ads. Classified ad systems like Craigslist are a real-time stream of ads that users might have to constantly scan or spend a lot of time rewinding and scanning forward to the present in order to be sure not to miss anything. Why not create an intelligent DVR for that stream, “recording” the most recent version of ads that users are likely to be interested?

…Even better, if the ads have a geographical component, why not just map those and be able to show users what’s nearby or near a location of interest?

A write-up of this project as a portfolio page is forthcoming, but you can download the 21 page report now.

Comments are closed