Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

IterateUX Design Challenge Team 8 Presentation

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
New Leaf Presentation
New Leaf Presentation
Wird geladen in …3
×

Hier ansehen

1 von 23 Anzeige
Anzeige

Weitere Verwandte Inhalte

Aktuellste (20)

Anzeige

IterateUX Design Challenge Team 8 Presentation

  1. 1. Iterate UX Challenge Presentation TEAM 8 Redesigning the Steam gaming Interface with consideration for accessibility
  2. 2. Team 8 Tanika Roberson UX Designer Michael Onwuchuruba UX Designer Ashley Cooper Mentor Christina James UX Designer
  3. 3. The Challenge Topic Redesigning the Steam online PC gaming store front’s gaming interface with consideration for accessibility Problem Statement A PC Gamer who uses Steam to purchase games feels frustrated about the excessive steps during the checkout process Goal Statement Our redesign of Steam’s checkout process will let users find and purchase games more eiciently which will aect all users by removing redundant screens and optimizing the process of finding specific games. We will measure eectiveness by comparing the time to check out for finding specific games.
  4. 4. Design Phases Research 01 Learned about user needs and their pain points Define Create point of view that is based on user needs and insights Ideate & Prototype Brainstormed and came up with creative solutions and built a representation of a few of our ideas Testing Returned to the user and tested our ideas for feedback 02 03 04
  5. 5. RESEARCH Artifacts: Survey, Competitive Analysis, Heuristic Evaluation 01
  6. 6. Findings based on user survey results Live In United States (56.7%) Germany Age 25-34 (46.7%) 35-44 (23.3%) 18-24 (23.3%) Income <$20,000 (30%) $50,000-74,999 (23.3%) Frequency of Steam Usage A few times a month (53.3%) Daily (30%) 0-2 hrs per day (70%) 2-4 hrs per day (16.7%) Who Are Our Users Gamers?
  7. 7. What Are Their Needs & Pain Points Learned about our users: ● Wants ● Typical uses of the platform, ● Challenges/successes while on the platform ● Work-arounds to overcome challenges ● Processes/steps used to purchase a game Affinity Map
  8. 8. What Are Their Main Interactions ● Accessing, buying and downloading games ● Managing game downloads ● Wants control over online features ● Avoid using the site when faced with challenges ● Variety of content Findings based on site heuristic evaluation and user survey results Current Steam homepage
  9. 9. How Does The UI Present Content? Current Steam homepage
  10. 10. Evaluating User Interface ● Every possible page navigation is visible in a scrolling segment ● Similar pages not being combined ● 4 Independent lists in view (3 non-collapsible) ● Inconsistent brand identity on certain pages Solutions ● Move Left sided list (recommendation, discovery, browse, etc.) inside the floating list ● Make top navigation a left-sided extender menu ● Add search function on header ● Main Navigation/Header should stick on scroll ● Consistent brand identity ● Easily accessible high yield information How Does The UI Present Content?
  11. 11. What Are The Competitors Offering Users? Competitive Analysis
  12. 12. DEFINE Artifacts: Archetype, Task Analysis 02
  13. 13. What Are The User’s Core Needs and Behaviors? Archetype
  14. 14. Problem Statement Nick is a casual PC Gamer who needs an easily navigational way to find sales and download games because the current system is frustrating and full of excessive steps. Problem statement based on results from ainity mapping, task analysis, and evaluating information architecture:.
  15. 15. What Are The Steps to Buy A Game? Steam User Flow Our User Flow
  16. 16. IDEATE & PROTOTYPE Artifacts: Sketches, Low to Mid Fidelity Wireframes, Style Guide, Mockups, Prototyping 03
  17. 17. How We Solved Our User’s Problems Based on the discoveries from challenges listed in the survey, our task analysis, and our user’s core needs/behaviors, we focused on these areas: ● Homepage ● Search Feature ● Game Details Page ● Checkout Page Wireframes Sketches
  18. 18. What Solutions Did We Implement? ● Created and applied style guide. Reorganized UI to prevent content overload ● Reduced user clicks from 20 to 11 to quickly purchase 2 games ● Reduced screen navigation from 7 to 1 for purchasing 1 game Default navigation list is collapsible and user can expand PROBLEM: Need easily navigational way to find sales and download games because the current system is frustrating and full of excessive steps ● Content overload ● Excessive steps to purchase a game ● Every possible page navigation is visible in a scrolling segment USER PAIN POINTS: PROPOSED SOLUTIONS: Style Guide
  19. 19. Current Steam Design Our Redesign Steam Homepage Steam Search Feature Our Homepage Our Search Feature
  20. 20. TESTING Survey, Competitive Analysis, Heuristic Evaluation 04
  21. 21. What Was The User’s Opinion of Our Solution? Performed remote user testing with 4 users to evaluate our solution and uncover any problems/opportunities User Quotes ● “Collapsible left categories is so much beer than 50 dierent random things” ● “The Hover feature has all the information I actually need” ● “I think this might be faster and I love the color tag system” ● “The collapsible bar should save state on exit of steam” Our prototype: Steam homepage
  22. 22. Next Steps Design and Implement cart functionality and payment flow/screen Screen for and interview users who use accessible features in gaming Design and test accessible design system across app
  23. 23. Thank you for watching Click on our pictures to connect with us on LinkedIn Tanika Roberson UX Designer Michael Onwuchuruba UX Designer Ashley Cooper Mentor Christina James UX Designer Q & A

×