This is my portfolio with work up to 01/2012.

1. User Experience Designer
Chris Havranek // Portfolio // chrishavranek@gmail.com

2. Chris Havranek // Contents // chrishavranek@gmail.com
BBB Marketplace Audit
Hello Viking
User Experience Specialist
Contents Target Back To College
Periscope
User Experience Designer
Event Registration System
Periscope
User Experience Designer
Internal Auto Website
AIMIA
User Experience Architect
Kellogg’s Mobile eCatalog
AIMIA
User Experience Architect

3. Chris Havranek // Target Back To College // chrishavranek@gmail.com
The Challenge: Target hosts numerous in-store
after-hours events around the country for
college students. Periscope was asked to plan
and execute each event along with a mobile
experience to accompany the events.
My Role: User Experience & Information
Architect
The Solution: I worked with the team to create
a responsive companion website that would
deliver contextual content to students based on
three phases of the campaign.
The Result: The online and offline portions of the
campaign were executed with higher rates of
engagement compared to years prior.
Target Back To College
Periscope
User Experience Designer
When possible, content would only be served once
and accounts are only required when absolutely
necessary. I wanted students to have as few barriers
as possible to interact with the website.
School
Selector
Home
Screen
Key
Countdown
Clock
Scratch to
Win
Lists
Bus Stop
Locations
Games Text to Win Survey Coupons
Target.com
App
Event
Overview
Reveal Gift
Card
View Lists
Add a List
View Bus
Stops
Favorite a
Bus Stop
Play Games Take SurveyView Details
Target.com
App Details
First Visit
Only
External
Destination
Login
Required
Edit List
Create
Account
Coupon
Details
Edit Account
Map to
Target
Google Maps
Text
Message
Legal

4. Chris Havranek // Target Back To College // chrishavranek@gmail.com
Complete these
challenges on event
night to win swag!
View popular
shopping lists for and
create your own.
Pre-event Home Page
Like saving money?
Our coupons help
you save even more!
Target.com mobile navigation
Download the Target App
Target BTC Login
View all the buses to
get to Target on
event night.
Find out if you've
won $X, $Y, or $Z!
Target Back To College
03 : 21 : 45 : 34
An after-hours event designed
for your college kickoff.
Days Hours Minutes Seconds
During-event Home
Target.com mobile navigation
Download the Target App
Target BTC Login
Complete these
challenges on event
night to win swag!
Like saving money?
Our coupons help
you save even more!
View all the buses to
get to Target on
event night.
Find out if you've
won $X, $Y, or $Z!
Text to win one of our
fabulous prizes on
the event night!
View popular
shopping lists for and
create your own.
Let us know how the
the event went with
our quick survey.
In conjunction with the events team, I determined what
content is most relevant to the students within the various
phases of the campaign.
Post-event Home page
Target.com mobile navigation
Download the Target App
Target BTC Login
Like saving money?
Our coupons help
you save even more!
View popular
shopping lists for and
create your own.
Let us know how the
the event went with
our quick survey.
Find a Target store
near you.

5. Chris Havranek // Target Back To College // chrishavranek@gmail.com
I lobbied to create a lighter desktop experience
in addition to mobile—allowing for students to
connect with our campaign regardless of what
touchpoint they began at. The mobile website
focused on delivering the full experience during
the pre, during and post phases as these
happened in a number of locations.

6. Chris Havranek // Target Back To College // chrishavranek@gmail.com
Having the opportunity to witness one of the
events take place was an eye opening opportunity.
Designing a mobile website to supplement an event
before actually participating in the event can only
go so far. Based on my observation that night I’m
confident I can create an even better one next year.

7. The Challenge: A large medical provider offers
classes to the public and aimed to improve
their registration process on both the front and
back end based on qualitative and quantitative
feedback.
My Role: User Experience & Information
Architect
The Solution: I strategized a system that would
streamline registering for classes based on
feedback from the client and numerous working
sessions to derive true issues.
The Result: The changes are in the process
of being implemented and the client is very
pleased with the potential for improvement.
Event Registration System
Periscope
User Experience Designer
Chris Havranek // Event Registration System // chrishavranek@gmail.com
At the outset, the client had a search form with
numerous fields often being neglected. I moved away
from this to a system that simplified the structure to a
step by step process. Additional refinement options
are given to the user upon the initial search.
Googlehealthcarewebsite.com
Website
Header & Main Navigation
Home > Classes & Events
Classes & Events
< Back to previous page
Bronson offers a variety of education opportunities. To find a class or event, use the search tools below.
Step 3: TimeStep 2: Topics
Locations
Step 1: Location
Battle Creek
Kalamazoo
Radius
15 Miles
Topics
Behavioral
Cancer
Childbirth & Parenting
Children
Time
This Week
Search
Search all topicsAll Locations
Browse Classes & EventsSearch Classes & Events

8. Chris Havranek // Event Registration System // chrishavranek@gmail.com
Originally, users were required to submit
their information for each individual class
they registered for—demanding around
eight steps per class.
Search Classes
Yes
Good results?
No
Refine Search
Need more
details?
No
Yes
View event details
Bringing
guests?
Yes
Yes
View Confirmation
Page / Email
Enter personal
information
Call / Email
Customer Service
Enter billing
information
Submit order
Confirm
Information
Continue
Shopping?

9. Chris Havranek // Event Registration System // chrishavranek@gmail.com
TheoptimizedprocessIputforthallowedfor
users to quickly register for multiple classes
with much fewer steps. Approximately,
eight steps for as many classes as desired.
Search Classes
Yes
Good results?
No
Refine Search
Need more
details?
No
Yes
Add to basket
View event details
Continue
shopping?
Yes
No
View Confirmation
Page / Email
Enter personal
information
Enter guest
information
Enter billing
information
Submit order

10. After the user has successfully registered for a class they are
supplied with all the necessary class information up front
and within an email. They may also choose to continue
their journey within the website based on related content.
Chris Havranek // Event Registration System // chrishavranek@gmail.com
Googlehealthcarewebsite.com
Website
Header & Main Navigation
Thank you!
Completely impact multifunctional processes and wireless supply chains. Dynamically engage business meta-
services for market-driven data. Collaboratively restore cross-platform users before client-centered manufactured
products.
To cancel or modify any of your reservations please email us at xxx@email.org or call 555-555-5555. Please
include your information when sending an email.
Alzheimer's Support Group
Hospital, Classroom 1
123 John Street
Kalamazoo, MI 49079
Location Details
Saturday 01/30/13
2:00-3:00PM
Date
Myself
Jason Stamos
Angie Pinkman
Attendees
$30Price
Alzheimer's Support Group
Hospital, Classroom 1
223 Jones Street
Kalamazoo, MI 49079
Location Details
Monday 01/01/13
8:00-9:00AM
Date
Myself
Attendees
FreePrice
iCal
Outlook
Google Calendar
Add to Calendar( ) Add to Calendar( )
Print
Tell your friends you're going to XXX
Please bring comfortable clothing and a
pillow for yourself and each of your guests.
Class Notes
Related Services Find a Doctor
Service Title Service Title Service Title
Service Title Service Title Service Title
Service Title Service Title Service Title
Completely impact multifunctional processes and
wireless supply chains. Dynamically engage
business.
Find a Doctor

11. The Challenge: A leading American Automobile
Company’s websites allows users to create
collateral to display in locations to promote
automobile parts and incentives. It was clear the
experience was not ideal, and they came to our
team to improve the layout and process.
My Role: User Experience & Information
architect
The Solution: Walking through the user
steps ourselves, we saw many that could be
combined or eliminated. I also used current web
standards and trends to influence our proposed
changes.
The Result: The suggestions that our team put
forth were accepted and helped to persuade the
client of a website wide redesign which began
shortly after this project.
Internal Auto Website
AIMIA
User Experience Architect
Chris Havranek // Internal Auto Website // chrishavranek@gmail.com
Looking at the current process map there
were several redundancies. We put forward
a map that moved from 11 minimum steps
to seven. We also introduced a way for
users to save previously created templates.
Login
Home
Dynamic
Publishing
Enrollment
Authorization
Cancel
BAC Code
Authentication
Valid?
No
Choose
Division
Yes
Select a
vehicle
Select
Template
Select
Accessories to
include
Are there
accessories?
Yes
Adjust
Settings,
Accessories,
Contact, Logo
No
Download
Low-Res
Download Hi-
Res
Click to begin
Original Ideal

12. In this example, 4 pages a user
would typically have to go through
was condensed into one page.
Less load times and the removal
of a redundant login system
will significantly reduce the time
required to create collateral.
Chris Havranek // Internal Auto Website // chrishavranek@gmail.com

13. Chris Havranek // Kellogg’s Mobile eCatalog // chrishavranek@gmail.com
The Challenge: Kellogg’s existing catalog could
be viewed on a mobile device, but it was
identical to the desktop version. This didn’t
provide an ideal experience for users attempting
to browse the catalog. This platform was also
used for other clients which needed a mobile
platform for their catalog.
My Role: User Experience & Information
Architect
The Solution: Our team built a mobile template
that can be used with any number of clients.
This included taking advantage of common
mobile phone functionality and best practices.
This template also had to be neutral enough to
allow for any company to insert their design
requirements into it.
The Result: The architecture was implemented
as planned and continues to be the default
template that all clients using this platform
utilize.
Kellogg’s Mobile eCatalog
AIMIA
User Experience Architect
The mobile experience needed
to include all aspects the
desktop did with an emphasis
put on paths users would
typically pursue on a mobile
device.
Email
Confirmation
Home
Enter a
Code
Rewards
Catalog
Promotions
and
Coupons
How It
Works
Points
Browse
Filter by:
categories
and/or
points
Enter
Single
Product
View
Results?
Error
Message
Logged
In?
Login
Register
Size, Color,
or Other
Options?
Select
Option
User Has
Enough
Points?
No
Yes
Yes
No
"Get It"
Button
View
Products in
Cart
Continue
Shopping
Checkout
No
Yes
No
Enter
Shipping &
Contact
Info
Cached
and/or
SSO Info
passed
Valid
Info?
Error
Message
No
Confirm
Order
Yes
Confirm
Cancel
No
Successful
Order?
Yes
Error
Message
Success
Message
Yes
No
1.0.0
2.0.0 3.0.0 4.0.0 5.0.0 6.0.0
3.1.0
3.2.0
0.1
0.2
3.3.0
3.3.1
3.3.2
3.3.3 3.3.4

14. Chris Havranek // Kellogg’s Mobile eCatalog // chrishavranek@gmail.com
Navigation and content needed to be reconsidered when
moving from desktop to mobile. Removing any extra content
allows users to quickly find what they’re looking for.

15. Chris Havranek // Kellogg’s Mobile eCatalog // chrishavranek@gmail.com
Forms that normally span multiple pages are
reduced when possible and field titles are
imbedded within the field itself. Minimizing
page load times while keeping scrolling as
low as possible was key on these pages.

16. The Challenge: The Better Business Bureau
looked to understand their current and
prospective customers more thoroughly. The
online landscape has been changing rapidly,
but what can the BBB do to remain relevant?
My Role: User Experience & Research analyst
The Solution: Hello Viking used previous
research conclusions, online surveys, and focus
groups to determine where the BBB stands.
The Result: The team processed hundreds of
online survey results and conducted three focus
groups. I worked to turn the data into relevant
conclusion that the BBB can use to further their
business objectives.
BBB Marketplace Audit
Hello Viking
User Experience Specialist
Using a survey service we received hundreds of online
results. We used insights from these quantitative insights
to help create a qualitative guide for the focus groups.
Chris Havranek // BBB Marketplace Audit // chrishavranek@gmail.com

17. Chris Havranek // BBB Marketplace Audit // chrishavranek@gmail.com
PAGE©2010 HelloViking LLC 3
Who we talked to
3 focus groups (ranging in size from 4-8 people)
• 1 group of men with mixed familiarity (most less familiar with BBB, but one was a small
business owner with past experience as an accredited business, 20s-40s)
• 1 group of primarily older adults (mixed gender, 30s+) with familiarity/experience with
BBB (one respondent was younger and unfamiliar)
• 1 group of younger adults (20s) with limited experience/familiarity with the BBB
The three focus groups allowed us to delve deeper
into questions derived from earlier in the project.
Afterwards, the team and I created a set of
recommendations backed by strong data sets.

18. User Experience Designer
chrishavranek@gmail.com
www.chrishavranek.com
Chris Havranek