Roy McCowan's

Design Toolbox

Resume

Process

MY PASSION IS FEEDBACK LIKE THIS:

“Lot more simplistic – everything was great”

Visual Design

UX Process

Data Visualization

Customer Support

AI Dev Tool

Native Mobile

Roy McCowan's Design Toolbox

My process

Inspired by Lean UX

Define success

What needs to happen at the end of this project for us to call it a success? Can we measure that? If so how?

POSSIBLE TASKS:
Creative Brief

Investigate the user

What do we know about our existing users? What do we know about their mental models? Is there more than one persona? Are there users we don't currently have that we want to target?

POSSIBLE TASKS:
Persona Study User Inquiries Card Sorting

Explore solutions

Is this a new flow or a redesign? What can we learn from our user research and our competition?

POSSIBLE TASKS:
Competitive Analysis Whiteboarding Swim Lane Mocks Design Spec Style Guide

Test the design

Get feedback as early and often as possible to reduce time wasted on wrong assumptions. Depending on what is learned from the feedback, go back to explore more solutions to address the findings. Maybe it will even take you back to refine your definition of success, or who your users really are.

POSSIBLE TASKS:
Prototyping Usability Testing

Roy McCowan's Design Toolbox

Print Design

MyOVS logo

Project: Sales Sheet

My role: Logo Designer and Graphic Designer

Partners: Executives and PMs

Year completed: 2012

PROJECT DESCRIPTION

Sales sheet for the sale force to leave at the potential clients office, either to remind them of what was discussed, or get them interested to talk if they were not available.

DEFINING SUCCESS

Deliverables: Got project direction from management

Goal 1:

Getting people to email parent company SmarTek21 for more info.

Goal 2:

Getting someone to be better prepared to sell their boss on the merits of the product.

INVESTIGATING THE USER

User info derived from sales people interacting with customers in the field

The main target audience is middle management people who are looking for ways to cut HR costs and become the "hero" to their bosses.

EXPLORING SOLUTIONS

Logo, layout, illustration, and photo compositing

My biggest challenge:

To grab the attention of the middle management HR person in a way that would make them want to read more.

How I resolved it:

I was inspired by how a salesman described selling the product as a way to become the "HR Hero" and created a logo for it. I then found a stock photo of an exec turned super hero and a dynamic sky and combined them and my logo to create the sales sheet top graphic.

TESTING THE DESIGN

Deliverables: None

The sales force liked it because when the person they wanted to talk to was not available they could leave it behind to start telling the benefits of the product.

Roy McCowan's Design Toolbox

Visual Design

Providence home page personalization design idea
Providence logo

Healthcare Web: 2020

View Figma Presentation

Project

Idea phase home page personalization mocks.
Inspired by competitive analysis and new technical capabilities in progress.

Role

Visual Designer, Product Designer, and Content Strategist

Team

Experience Director and PM

Problems to solve

  • Patients are mostly coming from search engines directly to secondary pages and never seeing the home page
  • Patients use search engines rather than Providence to find a doctor or medical information
  • Patients aren't visiting very often or staying very long

Results

  • Experience Director liked the exploration well enough to show to superiors
  • Project is gaining interest and making progress

My Design Journey

Full process description

1.

Collected user data from search engine research and internal sources.

Most any adult, but more likely between the ages of 25 and 34 and quite often women who are taking charge of their own health and those of others like children and parents.

Competitive Analysis - Kaiser Home Page

2.

Biggest challenge:
To present lots of helpful content in a clean, inviting, and engaging way.

How I resolved it:
So I started by looking at what others were doing.

3.

Then I dove into medium quality mocks good enough to test different ideas.

Mock Iterations

4.

I also worked with the other designer working on similar projects to align on design language consistency.

Style Guide

5.

The contract ended before testing could be done, but the PM liked the general direction and the idea of a checklist the user could customize to their needs.

Roy McCowan's Design Toolbox

Native Mobile

MyOVS mobile app animation MyOVS mobile app animation
MyOVS logo

HR Self-Service App: 2012

Project

iOS and Android versions of the original desktop app
Self-service HR app to make it easy for employees to track hours, pay, benefits, time off, and more without help. It is a customized Sharepoint UI layer that hooks up to multiple and diverse backend data bases.

Role

Lead UI Designer, UX Designer, and Graphic Designer

Team

Executives, Clients, and Developers

Problems to solve

  • Deciding what content could be removed from the desktop version to keep this phone version intuitive and clean
  • Deciding the hierarchy of the remaining elements and functionality
  • Making it all work inside a customized SharePoint UI

Results

  • Successfully shipped and sold to several satisfied customers
  • Helped the parent company SmarTek21 maintain the status of being one of the fastest growing IT Companies in Washington State

My Design Journey

Full process description

1.

Defining the personas

Any adult user working at a large enough company to warrant self-service software. Wide range of ages and computer skills.

2.

Exploring solutions challenge:
Getting buy-in on limiting the data to only the essentials that the user would want for their next task. The idea that more isn't always better.

How I resolved it:
I mocked it up both ways and was able to show how much easier one was to comprehend and navigate. It also started a mind-set of asking with each new screen what was the "essential" content and what could be removed.

Full Size Mock

3.

After each feature or screen was approved, I provided redlines and image assets to the dev team.

Redline

4.

This is early in my career with no testing budget
Now, I would at least test with fellow workers.

Roy McCowan's Design Toolbox

AI Dev Tool

Facebook dev app animation
Facebook logo

Desktop Web App: 2019

View full flow

Project

Dev tool to build voice activated apps.
This is the onboarding flow to make sure new users learn how to use the tool and have success as quickly as possible to promote engagement. The first "aha" moment is when they see their learning model (app) starting to understand their utterances (spoken word) after only a few minutes of effort, even if they are new to AI. The animation above is showing the first of five onboarding tours. The user is automatically opted into this first tour (Training the language model) when they create an app for the first time but can opt out immediately. Users can opt-out from any tour at any time and opt back in when they are ready, from the checklist at the top of each page.

Role

UX Designer, UI Designer, and Researcher

Team

PMs, UX Lead, UI Leads, Content Writer, Researcher, and Developers

Problems to solve

To make it powerful, versatile, and efficient enough for experienced developers to want to switch from what they are currently using, and yet easy enough to learn for those new to AI and building voice-activated apps to give it a try.

Results

  • Great start to guiding users in how to build their first voice-activated app
  • Internal interest is still high and the company is still iterating on the best design solution for this tool

My Design Journey

Full process description

1.

Defining the personas

Persona 1:
Experienced developers who are skilled in hooking apps up to different services, and also experienced with artificial intellegence, machine learning, and building voice activated apps. They value tools that are versatile and time efficient - even over being intuitive and simple.

Persona 2:
Developers who are new to artificial intellegence, machine learning, and building voice activated apps. They very much appreciate tools that make things quicker and easier to learn than searching for and sifting through endless documentation.

2.

As a person new to AI myself, I dove into learning the terms and concepts through research and working with the dev team.

Google's Dialog Flow screenshot

3.

Once I had a basic understanding of the terms and concepts I did a competitive analysis. At the time, the two main competitors (Amazon and Google) did not have a first-run/onboarding experience. They had some really good documentation and learning videos, but only terminology help inline as show in the image above.

4.

Then I created wires and mocks with these ideas to stand out from the competition:

  • Have them learn by doing, and show them success as quickly as possible
  • Provide only the information they need for the current step in small easily consumed chunks
  • Provide links all along the way if they want to dive into more detail
  • Let them learn at there own pace by opting in or out of tours at will through the use of a checklist
  • Enhance instructions with animation when needed like shown below:
Annotation explanation animated gif Full mock set

5.

The app was tested with Facebook developers at an internal hack-a-thon with some initial success. However, we did not get any testing done on the onboarding flow before my contract term ran out.

Roy McCowan's Design Toolbox

Internal Tool

Privacy compliance tool animation Privacy compliance tool animation
Microsoft logo

Desktop Web App: 2019

Project

Internal tool to streamline documenting privacy compliance

Role

UX Designer, UI Designer, Researcher, and Prototyper

Team

PMs, Users, Legal Team, and Developers

Problems to solve

  • Collaboration and documentation done in separate streams was too slow
  • Version control and progress status were hard to manage
  • No way to standardize answers to improve consistency and accuracy
Slow email process graphic

Results

  • Process is greatly streamlined with improved accuracy and consistency
  • Endorsed by the legal team and adopted by over 500 users across several teams
Slow email process graphic

My Design Journey

Full process description

1.

Defining the personas

Persona 1:
Business Ops users who make sure their team has the most appropriate set of questions for their team's product, service, or event.

Persona 2:
Privacy Program Managers (PPM) who are tasked with making sure their team's privacy compliance documentation is accurate and compete.

Persona 3:
Privacy Champs who fill out the privacy documentation for PPM approval.

Persona 4:
Data Protection Officer (DPO) that is in charge of making sure that the handling of personal data is handled in compliance aross the company.

Persona 5:
Admins in charge of tool support.

2.

I started with whiteboarding to understand the roles and permissions of the different types of users. Then with each business requirement I whiteboarded again to decide what design options to explore in wireframes and prototyping.

Flow whiteboard image To do list whiteboarding

3.

Then I created mocks for each functionality and a prototype to get stakeholder and user feedback. Once the design was finalized I created a design spec and style guide for the offshore dev team to build from per user story.

Mocks Design Spec Style Guide

4.

The stakeholders quickly got excited about the design and started asking when we could get it all developed. To triage what to work on first, I conducted user interviews with six end users to find out what was most important to them.

User inquiry report

Roy's Design Toolbox

Data Visualization

Microsoft customer service app Microsoft customer service app
Microsoft logo

Desktop and Walll Monitor Web App: 2014

Project

Internal tool to help customer support call center managers increase customer service efficiency worldwide for all Microsoft products.

Role

UX Designer, UI Designer, Researcher, and Prototyper

Team

PMs, Design Leads, Designers, and Developers

Problems to solve

  • Call center agents had to use several different tools to do their job
  • Those tools were outdated and not very compatible with each other
  • How can we improve issue resolution speed and quality?
  • How can we improve pinpointing issues and forecasting call volume?

Results

  • Managers can quickly match agents to customers waiting in the queue
  • Managers can see trends to track goals, pinpoint issues, and forecast volumes
  • Managers can see transcripts of calls to help train agents

My Design Journey

Full process description

1.

Defining the personas

Varied age, but mostly under 30 years old, and tech savvy. They are most interested in anything that can make their daily repetitive tasks quick and easy.

2.

Exploring solutions challenge:
To cleanly present data heavy content (50+ agents at a time) with filtering parameters to wall monitor users who can't interact with the app, while also providing robust filtering options for desktop and tablet users who can.

How I resolved it:

  • Utilized a filter drawer that showed the filtering parameters of the current results in the collapsed state, and filtering options in the open state
  • Added a narrow band of customer metrics at the top to leave as much room for results as possible
  • Incorporated clean visual data visualization (with a limited number of metrics) to improve data comprehension

Design one mock set

This is the "Azure" inspired version the PM and devs were asking for. The navigation got too complex and did not leave enough room to meet the goal of showing 50+ agents at a time.

Design two mock set

3.

Testing the design
User data was collected by Microsoft managers via onsite observation and interviews. We also received design requests and code bugs through our in-app feedback feature.

Roy McCowan's Design Toolbox

Bing info card

Microsoft customer service app
Microsoft logo

Bing Responsive Website: 2020

Project

This is a new template format idea for Bing search results pages. This mock is something I did as part of the application process for an open position.

Role

UI Designer

Team

Recruiter and hiring managers

Problems to solve

  • Microsoft want users to be more engaged and stay on the pages longer
  • The design team needs to be able to utilize the template to make other pages quickly

Roy McCowan's Design Toolbox

UX Process

My end-to-end design process graphic
ATT logo

B2B Responsive Web: 2017

Project

UX end-to-end process example
Online self-registration flow for wireless business users

Role

UX Designer only
I handed off wires to a visual designer, except when I was helping resolve system design needs

Team

PM, UX & UI Leads, UI Designer, Content Writer, Researcher, and Dev Team

Problems to solve

  • Admins were having to call into customer support to register, and some were tasked with making other admins daily
  • Non-admins had a long eight-step process to register online
  • Both flows needed to upgrade to the new design system that didn’t have all the patterns needed

Results

  • Users now register online in 5 min. rather than 30-45 min. on the phone
  • AT&T is saving $100k a month on call support (4k registrations per month)
  • Both flows are upgraded to the new design system

My Design Journey

Full process description

AT&T persona graphic

1.

Collected user data from the outside agency marketing study and multiple internal sources.

2.

Collaborated with the PM to understand all of the different scenarios possible for registration, depending on role, contract type, and verification choice.

Journey Map Swim Lane
Step study graphic

3.

Looked for ways to reduce the number of steps from the old non-admin flow

4.

Created wireframes with specs per agile user story. My idea of including a creative brief and Journey map at the beginning of each Axure set of wireframes became part of the full UX Team procedure.

Wireframes
Missing pattern image

5.

This project was one of the first to implement the new design system and I ran into several instances where I needed a new pattern to ensure a good user experience. One of those is shown above. The circled area shows the pattern that I collaborated with the Design Standards Team to get added.

  • I presented to them why I needed this pattern
  • Presented possible design solutions
  • Then integrated their tweaked final version
ATT new control design animation

6.

This a new control I designed and got approved to be built and added to the library for others to use. This is common design pattern you see now, but it was one of the first back in 2017.

Purpose.
To provide feedback to the user on their progress of creating a valid business level pasword as they type.

Benefit.
With validation happening in real time with each character entered, the user is much more likely to create a valid password the first time, that they can actually remember. Re-setting a password was the most common support call driver.

  • I presented to them the value of this pattern
  • Presented possible design solutions
  • Collaborated with them to get it through design, development, and accessibility approvals
Approval Request Input Prototype Project prototype
AT&T research results image

7.

I coordinated the usability testing with our UX Researcher. Above are the results from that testing.

  • I built the Axure prototype
  • I created the task list for the participants to accomplish
  • I listened, watched, and learned from the remote moderated testing
  • I then made the minor adjustments needed to the design for the next day's testing
Axure Prototype

8.

Because this was a succesful and highly visible project, I got to present it with my team mates to the executives.

PowerPoint Deck

Roy McCowan's Design Toolbox

System Design

Microsoft system design animation Microsoft system design animation
Microsoft logo

B2C Responsive Web: 2016

Project

Several different teams around Microsoft were wanting to upgrade their specialty customer service pages to reflect new design styles and functionalities but did not have a designer to do the work. This is for specialty pages like "Disability Desk, Lifecycle, and Security Center pages that have different pattern needs than regular customer support pages.

Role

UX Designer and UI Designer

Team

PMs, Lead Designers, and UX Designers

Problems to solve

  • Several customer support service teams did not have the budget or design resources to update and upgrade their web pages on Microsoft.com
  • These service type pages had different needs than common customer support pages, but with no design patterns to support them

Results

  • PM's could now utilize design patterns we created to upgrade or build their own customer service page
  • Freed the design team up to concentrate on higher profile work

My Design Journey

Full process description

1.

Defining the personas

PMs wanting to update their service type customer support pages but did not have a designer to do the work

2.

Exploring solutions challenge:
Discovering patterns that would work across a diverse set of team needs.

How I resolved it:
I worked on pages for several different teams at the same time to see what was needed and where commonalities could occur. I started with making secondary versions of existing patterns, like a shorter hero version to allow more room for content heavy type pages. Then I came up with new patterns where needed.

New service type customer support patterns image

4.

No opportunity to test, relied on internal subject matter experts

Roy McCowan's Design Toolbox

Customer Support

Microsoft device repair animation
Microsoft logo

B2C Responsive Web: 2016

Project

Web page flow for users to get help with their device repair needs. They can quickly describe their issue, and see if it is something they can easily be guided to take care of themselves, or fill out and submit a repair order to send their device in for repair.

Role

Interaction Designer and UI Designer

Team

PMs, Lead Designers, and UX Designers

Problems to solve

  • Many customers were sending thier devices into repair when they could have resolved the issue themselves if they knew how
  • Microsoft was spending repair center dollars on devices that did not need repair
  • Sending a device in for repair that did need it, was not as quick and easy as it could be

Results

  • Customers were much more often resolving their own issues
  • Microsoft was saving repair center money
  • Sending the device in for repair was much quicker and easier

My Design Journey

Full process description

1.

Defining the personas

Could be virtually any adult online retail user, including those that are not tech savvy, and possibly already frustrated with a device that doesn’t work.

2.

Exploring Solutions Challenge:
This project was functionally a step flow inside of a step flow. We first ask you a couple of questions and suggest things to try before sending your device in for repair. Then if that doesn’t resolve the issue we send you through a step flow of creating a repair order that has different options and costs depending on what you chose in previous steps.

How I resolved it:
I began with a task flow to understand the order and relationship of tasks.

Task flow image

3.

Then I began iterating on mocks. I tried first to visually represent the nested flow and it always turned out too busy and confusing. While collaborating with the other designers in my team the idea of flattening it out came out - and it worked!

Mocks Redlines

4.

No opportunity to test, relied on internal subject matter experts

Roy McCowan's Design Toolbox

Mobile-First Web

4U Music Ministries web site animation
M4U Music MInistries logo

Charity Responsive Web: 2016

Current Website

Project

Non-profit website to bless people that are struggling with simple neccessities like food, shoes, coats, and soap etc. The idea is to generate funds by getting people to donate to the cause by buying and downloading a song they like.

Role

Logo & Web Designer, Researcher, Front End Dev, Photographer, and Song Writer

Team

Guest Musicians and Guest Singers

Problems to solve

  • Many people are destitute and worse, they feel invisible, hopeless, and unloved
  • Many who have what they need still feel lost
  • I did not have any native mobile projects to work on

Results

  • A work in progress, but what funds have been generated have been given toward loving people in a tangible way
  • At least a couple of people who downloaded the songs have said they felt blessed
  • By creating my own mobile-first project, I got to continue building my mobile design skills

My Design Journey

Full process description

1.

Defining the personas

All ages old enough to make a donation. Beginner to tech savvy

2.

Exploring Solutions Challenge:
Come up with the best design and copy to express this unique vision as simply and quickly as possible.

How I resolved it:
I designed the logo and wrote the first draft of copy to describe the vision of the project. I then designed low fidelity wires to make sure I was being as minimal and clean as possible to make sure it worked well for all breakpoints.

Wireframes image

3.

I then created mocks to get the design just right

Wireframes image

4.

I then tested my design with a free version of usertesting.com called "Peek". And I am so glad I did! As it turns out, I had a major usability issue.

5.

Here's what I learned:
The panel that explains the purpose and method of the website was open on page load, but closed automatically after 8 seconds to get out of the way of browsing the songs. The world we live in is far too distracting for that to work and so I now have a static panel that stays open until the user clicks the "Listen to the songs" button. I will never make that mistake again.

Curent Website

Roy McCowan's Design Toolbox

Control Design

ATT new control design animation

Approved to be built and added to the control library

ATT logo

Project: New control for creating passwords  |  B2B Responsive website

My role: UX Designer, UI Designer, and Prototyper

Partners: Patterns Team, Lead Designers, and Developers

Year completed: 2017

View prototype

PROJECT DESCRIPTION

New control design to provide a quick and easy way for business users to create a new password for their wireless business login. This was critical to the success of getting users to adopt the method of registering themselves online rather than making slow and costly calls to support. The more strict business password validation requirements make it even more beneficial to provide immediate feedback while you are creating it.

DEFINING SUCCESS

Deliverables: Creative brief

Goal 1:

Make the creation of a valid password quicker and easier.

Goal 2:

To provide specific error messaging inline, even when there are multiple errors for one input.

INVESTIGATING THE USER

Deliverables: None

Here's our guess

Business users are always in a rush and get very frustrated when things aren't easily done in a minimal amount of time.

Here's what we know

Creating a password for Premier can be tricky with eight security requirements to validate.
And no one wants to take the time to read a long list of rules and regulations.

EXPLORING SOLUTIONS

Deliverables: Mocks, prototype, and new pattern proposal

My biggest challenge:

To propose a design solution that would accomplish the goal without breaking too far out of the existing design patterns.

How I resolved it:

I took existing patterns and explored using them in a new way. In this case it was presenting both requirements and errors inside the existing tooltip as you need them, in an immediate feedback way. I collaborated with other designers on the design patterns team until we had a good first draft. Then took the idea through the new design pattern request process by submitting the request form. The new control was approved to be built and added to the library at the end of 2017.

SKETCH PHASE

FORM TO REQUEST NEW DESIGN PATTERN

TESTING THE DESIGN

Deliverables: none

Relied on interviews with internal leads.

Roy McCowan's Design Toolbox

Card sorting study

ATT logo

Project: B2B  |  Native Windows tablet app

My role: UX Designer, IA Designer, Researcher and Prototyper

Partners: PMs, SMEs, and Developers

Year completed: 2014

Flight planning suite to combine several existing apps into one unified experience.

Below is the research to understand the different mental models of the personas.

DEFINING SUCCESS

Deliverables: Creative brief, card sorting IA explorations, and UX discussions with the client

INVESTIGATING THE USER

Deliverables: Utilized Boeing subject matter experts for user data

User 1:

Pilots who have been flying for many years and are used to flopping back and forth between apps to do different tasks.

User 2:

Newer pilots who are more open to organizing the suite by task since they have to do tasks in a certain order to complete their pre-flight checklist.

CARD SORTING STUDY

EXPLORING SOLUTIONS

Deliverables: Wireframes, mocks, and Silverlight UI

My biggest challenge:

To make sure that the flow of the app collection made sense to the pilots.

How I resolved it:

I presented design ideas that would be task driven to match the order of the checklist the pilots have to complete to be cleared for take-off. However, because there are a lot of pilots that have done this pre-flight checklist by going back and forth from app to app for years, the subject matter expert decided that it would be too big of a change to switch to task based.

WIREFRAMES

Boeing Tablet App Mock

TESTING THE DESIGN

Deliverables: Prototype

Participants were employees but from other teams not familiar with the project. All five participants were able to do all tasks without difficulty.

Roy McCowan's Design Toolbox

Competitive analysis

Providence competitive analysis
Providence logo

Project: Competitive Analysis  |  Responsive Web

My role: UX Designer

Partners: PM

Year completed: 2020

PROJECT DESCRIPTION

Providence was undergoing an intiative to unify all of there hospital and clinic websites under their new branding for Washington, Oregon, Texas, California, Montana, and Alaska. My task here was to learn what the competition was doing and see what things to employ and what to avoid.

DEFINING SUCCESS

Users are more engaged, more loyal, and come to Providence to manage their healthcare rather than their insurance or health provider site. Providence design and development teams are more time efficient because they aren't dupicating efforts.

INVESTIGATING THE USER

A search engine investigation informed me that the most likely user to do things like find a doctor or schedule a visit online are also those that actively use social media. Many are searching for information on a particular specialty often for others such as older parents or children.

EXPLORING SOLUTIONS

I leaned heavily on past experience and on HCI principles to assess.

TESTING THE DESIGN

Not applicable.