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 and “working manager” with passion for building teams, meeting with clients, and evangelizing products that align with creative values and vision.

UX

Enterprise + Marketing User Experience + Interface Design

Front-End Development

User Research

Usability and A/B Testing

Creative Content Development

Application Creation Prototyping

Responsive Web + Email Design

Information Architecture

Graphic Design

 

Tools

Sketch

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.

 

n2uitive

This project is under NDA

UX and UI design, Sketch pattern library and style guide for a next-generation enterprise-level Saas platform. Please contact me for details.


SKODA AUTOMOTIVE

Overview

Skoda Automotive came to Hacker Agency in Munich to help with their loyalty program as well as to consult about 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, Hacker Agency identified the need to reimagine its UI/UX.

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. 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 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 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. At this point, the user is able to submit a request for information from multiple institutions. 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.

 

Please complete the form below

Name *
Name