IMG_1431.jpg
 

John R. Stebbins

UX + UI design
Creative Direction

The art + science of usability

 

SKILLS

I am an innovative UX/UI professional with a record of success in user experience (UX) and user interface (UI) design and implementation with a focus on delivering solutions to clients while integrating UX across teams and stakeholders.

A creative leader, mentor and “working manager” with passion for building teams, meeting with clients, and evangelizing products that align with creative values and vision.

UX + UI

Enterprise + Marketing User Experience + Interface Design

UX Strategy

Front-End Development

User Research

Usability and A/B Testing + Data-Driven Design

Creative Content Development

Application Creation Prototyping

Responsive Web + Email Marketing & Design

Information Architecture

Graphic Design

 

Tools

Sketch

Figma

XD

Abstract

Invision

Photoshop

Illustrator

Dreamweaver

BBEdit

Omnigraffle

Paper + Pencil

work

I've been fortunate to work on a variety of projects, in a variety of capacities, throughout my career. Below are some examples of more recent user experience and interface design thinking.


MICROSOFT

Currently, the Microsoft global sales force uses a myriad of tools, used by many roles, to build, configure and price a quote for its numerous service packages. The CPQ system handles billions of dollars in revenue globally.

My role at Microsoft was as a member of the Enterprise Services Experience team (ESXP.) I was a UX designer on a new initiative to consolidate and design a new CPQ platform.

The above screens show the package selection process where a quote is initiated. Once a service package is selected, it can be configured by adding roles, determining rates and making optional discretionary adjustments.

In the Configure Packages screens, the user can add, remove and configure roles with associated allocated hours and rates on a package level. Discretionary adjustments, that may not be a typical point of revenue can be created and configured. In addition, funding sources can be specified per package, if applicable. This UI allows the user to select each package and make adjustments on one screen.


N2UITIVE CORPORATION

n2uitive is a leading enterprise-level Saas platform that enables insurance professionals to record, annotate, store, share and transcribe claims statements. With large insurance clients like Liberty Mutual and Farmer’s, n2uitive’s platform (known as n2view) enables claims adjusters and supervisors to record claims statements and store all relevant data that the organization will need to process claims.

View of adjuster and supervisor dashboard. Provides a quick visual of claim adjustment progress.

 

View of adjuster’s workflow showing initiation of claim from initial recording screen. The recording is an interview between the adjuster and another party. The recording is kept in the system and is the central artifact of a claim. The My Library screen shows a list of claims records for a particular adjuster.

 

Various pieces of data are input to build a claim. The visualization of the audio file allows an adjuster to review time-stamped comments and interview notes. Each claim record contains all pertinent information and artifacts for a particular claim. Both the adjuster and supervisor are able to explore the claim and its various artifacts.

 

SKODA AUTOMOTIVE

Overview

Skoda Automotive needed help with their loyalty program as well as re-envisioning their online purchasing process. I was on-boarded quickly and had to scramble to become familiar with Skoda. Because Skoda is an auto manufacturer based in the Czech Republic, I had little real-time resources to develop a strategic understanding that would drive the direction of the user experience and sought alternative ways to develop insights. In efforts to gain better understanding of Skoda customers and prospects, I scoured Skoda user forums and used social listening to develop a baseline perception of Skoda customers and prospects. With this information, I had enough of an understanding to audit the current purchasing process and develop personas for my recommendation. From this research, a new purchase flow was devised.

User flow and personas

After researching the landscape of Skoda’s customer experiences, through social listening, monitoring Skoda owner's forums and more, I was able to formulate personas that reflect typical prospects.

I also began an audit of the current purchase process. 

design realization

Using the information collected, I began wire-framing a more streamlined purchase flow that enabled the user to easily progress through the process. I was primarily focused on eliminating stumbling blocks as well as providing a prominent view into their selected vehicle configuration (not easily available on the current process). Our research also revealed that users needed a clear, easy way to connect with a representative through different channels at different stages of the process. The end result was a reimagined UX and purchase flow that successfully simplified the process of online purchase.


CRICKET WIRELESS

overview

The Cricket Wireless rewards app is an award winning loyalty app where users can earn and redeem points based on different criteria. The current app is successful but as its features grew, it began to outgrow the existing UX. Mapping the current UX against the business requirements and growing features, I was able to envision an updated UX that successfully addressed these challenges.

Wireframes

My primary goal was to consolidate the overly complex navigation structure, make the user’s status and point totals more prevalent and to put the various paths to earn points at the forefront. Another goal was to encourage the customer to use or donate earned points and develop and maintain loyalty.

design realization

Working closely with the designer, the wireframes guided a realized experience and interface that presented a more understandable, task-oriented interface while maintaining Cricket's unique branding.

Final design by Dwayne Mansfield.


A Place for Mom

Overview

A Place for Mom provides referrals for senior living facilities across the country. It has a strong SEO presence and users are able to research and find suitable senior living facilities for themselves, parents, or loved ones. APFM had two primary asks, to help them re-envision their conversion funnels and to redesign their main site. The site already received significant traffic from organic search but APFM also had several stand alone landing pages that were tailored to receive traffic from other channels (tv and display ads). These were used to collect information and criteria for matches showing the appropriate facilities. APFM wanted their main site to be more useable and the landing pages to have a higher conversion rate.

After a careful audit of the main site and the landing pages, I determined the initial effort should be to increase conversions on the landing pages. From past experience, I felt that the solution was a smooth transitioning multistep form submission.

The final design, based on the wireframes above, resulted in a ~50% lift in conversion rates. Since the main site already had a high SEO ranking, I focused primarily on giving more structure and order to the information, while making it easy for users to make sense of the many features. I also wanted to create distinct paths for users to get more information or perform a search for a facility.


AT&T

Overview

Arriving at Hacker Agency in 2010 the agency was developing standard, non-responsive and text only emails using best practices that were quickly becoming outdated. Using my significant html email design and development experience and I saw an opportunity to make immediate impact while providing a unique user experience in a channel where UX is often ignored. I began working to develop rapid functional prototypes that I could use to evangelize responsive email, not only within the agency but also to our largest telecommunications client. I also introduced interactivity and beautiful animations using the power of CSS 3, while demonstrating a default state for email clients that do not support CSS 3.

e-news

The team also managed the design, development, list maintenance and deployment of AT&T's monthly newsletter email. It is a complex, dynamic email sent to 10 million subscribers monthly. The team was able to convert a standard, non-responsive template to a dynamically populated, responsive email.

Design realization

Since 2010, all emails at the agency are now responsive. For AT&T, there was a 300% increase in click-through-rates, largely due to a significantly better user experience for mobile users. The agency and my team remain a high volume provider and email innovation leader for AT&T.


CARNIVAL CRUISE LINES

overview

Carnival Cruise Lines began a redeem/referral program where travelers could refer friends and receive benefits. They needed an online tool that was easy to use and understand, that enabled current travelers to quickly give referrals or redeem previous referrals. Carnival also needed to record all entries and send confirmation to the traveler.

This was a very quick turn deadline with minimal requirements documentation. Initial steps were to assemble a team of account reps, UX, a project manager, developer and designer and de-brief on the client ask and assess tasks and timelines. This project duration was approximately 3 weeks from kick-off to launch. Because of this quick-turn deadline, the entire process was highly collaborative with daily communication on progress and tasks.

Wireframes

With no site architecture in place, I was able to process the task of the user and begin wireframing the architecture and UI. To best provide an architectural framework to our development and database teams, I sketched a rough user-flow that enabled those teams to start setting up the framework for the backend. 

Once a basic flow was established, I began wireframing the UI and experience to enable the design team to take it and immediately implement into a final design.

Design realization

Wireframes were handed off to design and development and final creative was developed reflecting the rich Carnival brand. The team also designed all follow-up emails and the database team created systems to collect and send the client user input data. Design and development collaborated in an iterative fashion to ensure the deadline would be hit.

Final design by Patrick Halferty.

Development by Brian Perry and Rick Cook.


EarnMyDegree.com

EarnMyDegree.com is an education portal that receives millions of visits per month. It serves as a portal for prospective students to find and request information from numerous higher education institutions. Over time, the process for matching prospective students with appropriate programs and institutions had grown overly complex and the user experience had grown transactional, tedious, lacking focus and user-centric clarity. I envisioned an entirely new process that re-mapped the UX and UI while consolidating a multi-step process into a more concise and cohesive path to success (users completing the process and requesting information from one or more institutions).

The first task was to assess the underlying steps the user has to progress through and find ways to consolidate them on both the presentation level and the back end. The result was a re-imagined process that went from a seven-step path to completion to a streamlined four-step process. The matching engine that paired appropriate programs with the prospect’s interests was also reimagined to provide a more simplified, qualified match.

New screens were devised to organize content in a way that supports the back-end development while providing an enhanced UX. Upon completion of the process the user is presented with the best possible match for their interests. In addition, other matching programs/institutions are clearly presented. The result is that the user has increased control over selections and is able to select multiple institutions from which to receive information. This “cross-sell” opportunity resulted in an increase in leads generated.

Brand Experience

brands.png
 

GET IN TOUCH

For inquiries, please feel free to contact me using the form below. I look forward to hearing from you.

Resume (PDF)

 

Please complete the form below