Brian Jurvelin - User Experience (UX) Portfolio


Published on

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Brian Jurvelin - User Experience (UX) Portfolio

  1. 1. Portfolio for: Brian Jurvelin User Experience (UX) Designer, User Interface (UI) Designer, Interaction Designer, Information Architect, Usability Specialist
  2. 2. Contact Information Please contact me regarding potential job opportunities in the user experience (UX) field. Name: Brian Jurvelin Address: 29563 Linda Street, Livonia, MI 48154 Phone: 810-210-9323 Email: LinkedIn: Portfolio:
  3. 3. Portfolio Outline Section 1 shows the evolution of one UX project from start to finish. Section 2 includes artifacts from multiple projects to illustrate UX skills not shown in section 1. 1. Mobile Application Design (Party Armor)       Project overview Personas & usage scenarios Design sketches Wireframes Paper prototyping/usability testing Project results 2. Website Artifacts (Multiple Projects) • • • • • • • • • User research Competitive analysis Website diagram Card sort Task analysis Website interface redesign Usability testing Expert review Accessibility inspection
  4. 4. 1. Mobile Application Design (Party Armor)
  5. 5. Project Overview • Project: Mobile application design • Client: Party Armor - creator of a dietary supplement designed to prevent and relieve hangovers resulting from consuming too much alcohol • My Role: Lead designer • The Challenge: Design a mobile application that helps increase the credibility of the Party Armor brand • Scope Limitations: Graphic design and programming were not included in the scope of the project
  6. 6. Persona & Usage Scenarios • Extracted user needs based on user research provided by the client • Developed a primary persona and three typical usage scenarios (shown here) • Based remaining design decisions on what “Pete” would want
  7. 7. Design Sketches Interface design concepts Sketched design interface Began themultiple process by and interaction flow design sketching design concepts concepts • Sketches included potential interaction flows and layouts • • • Highlighted functionality that Sketches were used as the promoted the users’ and basis for wireframes well-a being prototypes paper (ex. call a cab) to increase brand credibility Used sketches as the basis for wireframes and a paper prototype Design concept for an interaction flow
  8. 8. Wireframes • Produced wireframes to model the initial design of the application • Created wireframes using Moqups, an HTML based wireframing tool • Generated a paper prototype from wireframes for usability testing
  9. 9. Paper Prototyping/Usability Testing • Conducted ‘discount’ usability testing with paper prototypes to get feedback on the initial design • Tested users using ‘think aloud’ protocol and recorded qualitative results • Documented potential design changes based on user feedback
  10. 10. Project Results Design change made based on usability testing • Made design changes, such as adding a sign in that did not require Facebook • Iterated between the design and usability testing phases to produce a final design • Client was happy with the final design and is in the process of hiring a graphic design and a developer Before After
  11. 11. 2. Website Artifacts
  12. 12. User Research • Created a survey and administered it to users of a graduate program’s student association website • Identified the users’ needs regarding website content and information architecture • Used information gained from the survey to help with the website’s redesign
  13. 13. Competitive Analysis Functionality included on competitor websites • Conducted a competitive analysis to aid in the design of a new website for a sporting goods company • Identified content and functionality included on the websites of four competitors • Recommended content and functionality for inclusion on the new website
  14. 14. Website Diagram • Diagrammed a local theatre company’s website (using Visio) • Modeled the organization and structure of the website through page relationships • Made recommendations for improvements to the website’s organization and structure
  15. 15. Card Sort • Conducted an exploratory card sort of the content on a local museum’s website • Tested six users to gain insight into how content was grouped and how labels were interpreted • Recommended changes regarding labeling and content grouping
  16. 16. Task Analysis Excerpt from one of the tasks included in the task analysis • Analyzed the processes for completing three tasks on a car dealership’s website • Documented the steps required to complete each of the tasks • Redesigned the tasks to improve efficiency, reduce errors and increase user satisfaction
  17. 17. Website Interface Redesign • Redesigned a local pottery shop’s website interface • Applied interface design principles and best practices to identify the strengths and weaknesses of the interface • Produced wireframes (using Illustrator) to model the design of the new and improved interface Subpage before redesign Subpage after redesign
  18. 18. Usability Testing Transcript from one of the usability testing sessions • Conducted a usability test of a stock photo website to identify user experience issues • Used ‘think aloud’ protocol to evaluate ten tasks with five different users • Recommended solutions for each issue, emphasizing issues with higher severity
  19. 19. Expert Review Description of a usability issue found on the website • Conducted an expert review to identify the usability issues on a website that sells knitting products c Screenshot of the website showing evidence of the problem • Created a list of usability issues, organized by the guideline that was violated and the severity of the issue • Made recommendations on how to correct each issue
  20. 20. Accessibility Inspection Description of an accessibility issue found on the website • Conducted an accessibility inspection of a weather forecasting website • Identified issues that could make the website content hard to use or inaccessible for users with disabilities • Made recommendations on how to make the website more accessible Screenshot of the website showing evidence of the problem