UX Techniques & Methods

• Generative user research
• Persona creation
• Workflow definition
• Rapid prototyping
• Information architecture design
• Information design, wireframing, and interaction design
• Visual design

Overview

This showcases my and my partners’ abilities to discover users’ goals and tasks through interview and observation, and then solve knotty workflow and information display problems.

Problem

This client came to us to help unkink their aging desktop application’s workflow and information display issues while moving to a browser-based application.

Action & Results

My first task for this client was to document and understand the workflows using task analysis techniques. I conducted remote interviews and observations to understand how users incorporated the application into their tasks and where they experienced pain points. I’ve learned through experience that stakeholders should participate in this activity, so I made sure the product manager and developers attended as many of the interviews and observations as possible.

As the interviews progressed the team and I worked up simplified box-and-arrow workflows, medium-fidelity wireframes, and storyboards to show how the simplified workflows would be represented with screens.

We went back to a group of representative users to validate the redesigned workflows and gather feedback about the information displayed in the wireframes. During this phase we also reorganized the information architecture, selected a more usable and responsive navigation method, and tested these with users as well.

After iterating the design based on user feedback, my design partner and I applied an white-label visual design and provided the client’s engineering team with production-ready HTML/CSS/JavaScript, as well as an interactive style guide for the major elements of the design. (See below or gallery for screenshots.) Because the application needed to support theming by the client’s customers, we provided a minimalist out-of-the-box visual treatment. We also designed a theme selector feature where the end customers could choose color combinations and upload a logo.

Some examples of the white-labeled visual design, ready for theming by the client’s customers.

Results

The company implemented the updated workflow and navigation.

Lessons Learned

When you’re working for a client with a legacy application and a user base that is used to doing things a certain way, it’s important to conduct user research. You need to know when you need to preserve an existing but inefficient workflow, and when to redesign a workflow from the ground up.

Image Gallery