Chris Havranek's Portfolio

1,432 views

Published on

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

Published in: Career, Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,432
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chris Havranek's Portfolio

  1. 1. User Experience Designer Chris Havranek // Portfolio // chrishavranek@gmail.com
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. User Experience Designer chrishavranek@gmail.com www.chrishavranek.com Chris Havranek

×