User Experience Design Skills and Examples

Design Planning and Project Management

In most of my projects, I have been responsible for the entire user experience design process. In some of my research-oriented projects, I've managed the entire project or the entire technical side of the project. From this experience I've gained solid skills in project management and in planning the user experience design process. The images at left are examples of some of the project planning documents I have prepared in the past. (Not shown are schedule, budget, and requirements documents; I have significant experience with those as well.) These documents helped me plan, schedule, and manage project work, and helped communicate project vision and goals to project teams.

User Research

In many of my projects, user experience design begins with user research, work aimed at better understanding the needs of the people for whom the project is intended and the context in which they will use it. I have employed a range of quantitative and qualitative research methods in my projects, including lab-based experiments and task-based user studies, online surveys, and qualitative interviews. I have experience with a range of tools for gathering and analyzing user research data, including Qualtrics, Excel, R, and content analysis tools, such as Dedoose.

And, as I describe more fully in my user research portfolio, I've also taught several graduate-level research methods courses, which dealt with many aspects of user research.

Personas and Scenarios

As a way to summarize findings from user research and help determine user requirements and priorities, I have developed personas and scenarios in many projects. I have also taught students to use personas and scenarios in my Digital Libraries and Digital Media Collections courses. These documents particularly help larger project teams form a common understanding of the project's intended audience and priorities, and serve as a useful reference for design decisions throughout the development process.

I developed the examples at left for recent projects at Stanford University.

Concept Models

I often use concept models to facilitate a "big picture" discussion with team members in the early stages of a project, or to convey high-level ideas for a particular project feature or idea. I also find that developing concept models in the early stages of a project is helpful for me as a designer to understand the scope, boundaries, and potential of a project. These concepts models have proved particularly useful for projects involving multi-disciplinary teams with widely varied backgrounds and technical experience.

Except for the last two, which are from older projects, the examples at left are from current and recent projects at Stanford.

Site Maps and Structural Models

To move towards a more concrete representation of intended project products, I usually develop site maps and structural models. These help move the project from agreed-upon conceptual ideas to a discussion of how major components of the product will fit together, usually helping to define and clarify a hierarchy of product components and suggesting ideas for how people will navigate when using the product. The completed site maps convey both hierarchical and navigational relationships among the primary features of the product and work well as a basis for subsequent design tasks aimed at fleshing out details of the product, especially wireframes.

Wireframes and Mockups

I've produced wireframes and/or mockups for most of the projects I've worked on in recent years. Creating wireframes helps me, as the UX designer, ensure that user requirements will be met by the product; the finalized wireframes also serve as an effective blueprint for programming and visual design. In projects involving team members whose primary contribution is domain expertise (rather than technical or design skills), I've found that wireframes help them understand the direction the project is taking and provide an excellent opportunity for feedback before programming begins. I prefer lo-fidelity wireframes, though as the examples at left show, I use higher-fidelity wireframes or actual feature mockups when it makes sense given the background of the project team (e.g., domain experts with no previous exposure to wireframes).

Interactive Prototypes

With significant skills in both programming (HTML/CSS/Javascript/jQuery, Ruby, Ruby on Rails, PHP) and the advanced features of diagramming tools (OmniGraffle, Visio, Balsamiq), I can rapidly develop a range of create functional prototypes. In past projects, I've created click-through prototypes of an entire set of wireframes as a proof-of-concept to help stakeholders understand the potential of a project. Other times I've created wireframes as actual HTML files so stakeholders get a better idea of how all the pages of a website will fit together. More frequently, I've created interactive prototypes to illustrate the interaction design of a particular product feature, either to explore the feasibility of the idea, to obtain feedback from the larger project team on an idea, or to serve as a guide for the development team assigned to the product.

Visual Design

Although I am not a graphic designer, I have solid design skills. I am comfortable producing visual design mockups, or as has been the case in many of my projects, the final visual design as part of my user experience design work. The examples at left are examples of products for which I handled the visual design (usually along with handling the CSS/SCSS to produce the visual look). I'm comfortable with many software products intended for visual design, such as the Adobe suite, Sketch, and OmniGraffle, and have significant experience with image and video manipulation (many of the products I've worked on have been multimedia-focused).