UX Portfolio - Chris Stair
Upcoming SlideShare
Loading in...5
×
 

UX Portfolio - Chris Stair

on

  • 560 views

I've been developing quite a bit over the past year. I've been taking classes and going to seminars. I've pixel pushed and presented. All I need now is somewhere to apply my newfound skill set.

I've been developing quite a bit over the past year. I've been taking classes and going to seminars. I've pixel pushed and presented. All I need now is somewhere to apply my newfound skill set.

Statistics

Views

Total Views
560
Views on SlideShare
559
Embed Views
1

Actions

Likes
2
Downloads
11
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UX Portfolio - Chris Stair UX Portfolio - Chris Stair Presentation Transcript

  • UX Portfolio Chris Stair Monday, November 11, 13
  • Skills Overview • Research - Competitive Analysis, In-Person/Long Distance Interviews, Surveys, User Testing • Analysis - Qualitative Analysis, Task Analysis, Personas, Scenarios • Features - Brainstorming, Feature Generation, Feature Prioritization • Sketching - Creative Ideation, Paper Prototyping, Iteration • Wireframing - Wireframes, Mockups, Site Maps, Specification Documents (Programs: Omnigraffle, Keynote) • Prototyping - High and Low Fidelity Prototypes (Programs: Omnigraffle, Axure, Keynote) 2 Monday, November 11, 13
  • Mentor - Lis Hubert - IA Back in February 2013, a college friend mentioned that a UX Designer was looking for an intern. Little did I know what the future would have in store for me. Since then Lis has taken it upon herself to expose me to the wild world of UX. Blog Posts http://wp.me/p26Qjq-2Vz http://wp.me/p26Qjq-3bm http://wp.me/p26Qjq-3hL Projects Book - How to Set Up a Website Research Visual Design Monday, November 11, 13 Client Page Redesign
  • Case Study #1 General Assembly’s Front Row Live Stream Redesign by Chris Stair (For UXDi) Monday, November 11, 13
  • General Assembly’s Live Stream Redesign As of October 2013 General Assembly outsourced the live streaming element for their online content. They were considering bringing the service in-house and were interested in how they could improve the experience. In their words, “It should be able to provide online users with a way to interact, collaborate, connect, ask real-time questions, broadcast needs, share resources and otherwise communicate with each other in a meaningful, intuitive and extremely functional way.” The challenge: Identifying important trends in research and translating them into a design that meets both client needs and user needs. The Solution: A redesign of the confirmation email to accommodate first time users, a new sign in process, a new waiting screen, a new interface and a new exit screen. All stages of design paid special attention to networking and question handling. Monday, November 11, 13
  • PROJECT OVERVIEW The project lasted three weeks. During that period I met with my stakeholders from General Assembly, interviewed users and GA Staff, participated in live streams, analyzed the research and then proceeded to design solutions to augment the live stream user experience. The project culminated in a presentation for General Assembly’s Digital Products Team. While working I realized that the most important element of the live stream users’ experience could be solved outside of the stream itself. The stages I went through during this process were: • Research • Persona Creation • Sketching & Creative Ideation • Wireframing • First Iteration • Prototyping Monday, November 11, 13
  • KEY SCREENS AND FEATURES Main Interface Growth Hacking Strategies Email Redesign Part 2 of 3 Chat - Sally 1:32 Arturo Uploaded Growth Statistics.xl 1:33 Tommy Generally that refers to acquiring new users or increasing revenue over a given period of time Randy 1:40 What are some models for growth? 16:9 1:40 Dana - Moderator Great Question @Randy! @Ami 1:42 Hey Sally, thanks for posting that link earlier. Do you know any other useful websites? #GAlivestream Send Description Questions Message Upload Users Starting a business seems like a daunting task. In this class, Erik will explain three strategies he has used to start successful businesses. Whether you’d like to understand how to increase your visibility on the web, choose an insurance plan, and focus on your value proposition, this is the Frank Me Frank Cori Robert Arturo Kurt Order Confirmation Ami class for you. TAKEAWAYS ▪ Know how to form your company ▪ Understand strategies for increasing visibility on the web ▪ Get live Erik Kimel is an entrepreneur and founded his first company, Peer2Peer Tutors, as a senior in high school in 2004. He grew Peer2Peer from one tutor and one client to over 5,000 tutors and Question Forum Descriptions Tommy ABOUT THE INSTRUCTOR Congratulations, you have successfully registered for the upcoming live stream. It will be airing on November 5th at 5:00 pm. Randy Sally Network at GA Please keep an eye on your email, you’ll be receiving a link 30 minutes prior to the scheduled start time. Question Questions 1 New: What are companies with high growth? Vote 20 1:35pm What are some growth models? 15 What are some techniques for research? 17 1:30pm 5,000 clients across the east coast region of the United States. In What are the best ways to grow on a low budget? 1:43pm Ask the Moderator Related Videos 1:40pm What job title would help me grow my business? 12 1:20pm How do you go about getting your first 5,000 clients? 12 1:15pm What in your mind, are some of the greatest trends in business today? 10 Class Description 2012, Peer2Peer Tutors was acquired by an international network of college admissions experts, which was covered by the Wall Network at GA Street Journal. Kimel has been featured on the Top 25 under 25 list in Business Week Cheers, The GA Team What is growth hacking? Are there any good books on growth hacking? Monday, November 11, 13 Answered 1:35 Answered 1:40
  • DESIGN RESEARCH Method: I interviewed 7 people from all around the United States, as well as 1 in Russia and 1 in Vietnam. The participants were asked 1 of 3 scripts depending on their exposure to online learning: unfamiliar, beginner, heavy user. Findings: I found that getting questions answered was the most important aspect for new users, because receiving a real time response was the only element that competing services cannot currently offer them. The second most important part of the live stream experience was networking. Opportunities Identified: I found that General Assembly can better answer questions and facilitate networking through: 1). Email Redesign 2). Sign In Redesign 3). Interface Redesign Monday, November 11, 13
  • PERSONAS ENTERPRISING INDIVIDUAL Amber Gonzalez - 30, Philadelphia “My goal was to learn more.  In my specific case, I’m on a mission to cram my brain with as much information as possible.  I want to make sure I’m current with trends.” Background Amber majored in journalism at Skidmore in upstate New York.  She graduated seven years ago and worked at a magazine for five.  In the past two years, she became interested in starting a website that would match coffee enthusiasts with new brands of coffee. She started taking online courses for HTML and InDesign from lynda.com. In addition, she was looking for general business skills. She found GA while searching online for brand strategy workshops. She ended up signing up for the live stream, because it was free. Living in Philadelphia, it is not as convenient for her to take GA classes on-site. Key Characteristics She uses the site in order to have a general knowledge of entrepreneurship, with multiple focus of interests. She would browse through a list of interesting livestream classes and would like to interact with both instructors and students. As she wants to know more about how other people do small business, she would like to know about other students’ profile. Goals and Motivations - She came to GA to learn about general business strategies and skills. - She wants to know enough to stay current, not necessarily an expert on one single area - She is looking to network and meet like-minded individuals in chats. Frustrations and Pain points - She dislikes when people comment too much in the chat - She could not know much about other interesting students just through chat. - She thinks the classes aren’t put into the proper hierarchy in terms of expertise. - She wishes she could read reviews about classes ahead of time. - She could not find some of the helpful links or sources in the chat after livestream Monday, November 11, 13 IMPROVING PROFESSIONAL TECH TOURIST Dmitry Rosen, Russian, 20 William Moore - 36, New York Background William is a 36-year old mid-level director at a retail oriented corporation living in Upper East Side, NY. He is busy all the time with his high-powered job, but he feels the need to learn more skills such as design, so he does not have to wait for other departments to finish up the projects his team is working on. He heard about GA from some networking events, browsed GA’s website and found out about the online program. He tried on-demand videos but came up with a few questions, and hoped to get them answered through live-stream Quote “It’s not about being an expert, it’s about filling that gap.” Goals and Motivations - to learn a specific skill: digital marketing. or any skill that would quickly fill in the gap in his workstream - already has a few questions in mind and hope to interact with the instructor - wants a quick and easy way to get the information he wants from an experienced instructor Key Characteristics - he is an experienced and serious professional who likes to stay focused - he is not into networking or anything social with other online students - he has a concrete problem and wants an answer from expert Pains and Frustration - he is very busy, unable to watch more videos or go back and check out all the links - sometimes his question do not get answered - he is unable to predict the quality and level of the livestream classes - feels annoyed by students having silly side conversations Background Based in St. Petersburg Dmitry works freelance for several agencies that do business providing cheap coding for US-based companies.  He heard about GA when he searched online courses for branding. He looked at the website and liked the design.  After clicking through the various offerings he figured out that the live stream option is free. He will not pay for a service unless there is a demonstrably high value. Dmitry wants to stay current because he feels that the education in Russia, especially in tech, is lacking. It is generally 2-3 years behind technology in the United States. So he wants to take advantage of cutting edge lectures so that he can continue working with his clients in the United States. Goals and Motivations - To stay current, at the forefront of technology - To learn best practices in a variety of contexts - To improve his career path Key Characteristics - Brand oriented rather than rating or review oriented. He does not trust reviews. Brand orientation involves prestige of GA, prestige of speaker, and perceived value of the topic. - He is not interested in the chat feature. - He does not have a strict focus because he is trying to ‘stay current’.  He’s more likely to watch topics that play to his strengths but he will not ignore anything for fear of being left behind. - He does not trust the chat feature because he doesn’t know if the users have their own agendas. He spends most of his time focusing on what the teacher is saying. - Very literal. Pains and Frustration - Timezone is a blocker, but he can make it if he stays up late. - He often watches videos on his mobile and gets frustrated when the video is not mobile compatible. - Thinks there is a lack of structure in the Front Row, would like more structure with more takeaways and technical skills. - Subscription cost is high in his currency - Wants a larger community to exist outside - Does not feel he is a part of the GA community but wants to be
  • Scope of Questions Broadens Based on Number of Visits Specificity Single Question Personas Improving Professional Enterprising Individual Tech Tourist Narrow Topic General Industry 1 2 3 Visits Monday, November 11, 13 4
  • CONCEPTUAL IDEATION Monday, November 11, 13
  • DESIGN HYPOTHESIS Target Demographic for Email Redesign Specificity Single Question Personas Improving Professional Enterprising Individual Tech Tourist Narrow Topic General Industry 1 2 3 Visits Monday, November 11, 13 4 Target Demographic for Question Forum
  • DESIGN ITERATION 1 ITERATION 1 Chat send 8 7 Method: How much do fonts cost? 6 Description Slides Notes Links 1 2 3 4 Person Person Person Top 7 Questions Question 1 5 After interviewing participants, determining client needs and doing a competitive analysis I designed an interface that would take advantage of current user behaviors which included checking the course description, reviewing slides, taking notes and examining links. The question answering process was very important to users so I designed a ‘question forum’ to facilitate the communication between General Assembly and users. In addition I redesigned the confirmation email and the sign in screen to further accommodate user needs. Question 2 Question 3 Question 4 1. 2. 3. 4. 5. 6. 7. 8. Class Description Slide Presentation Notepad Link Collection Question Forum Chat Function Current Question Full Screen EMAIL REDESIGN 1 SIGN IN REDESIGN 1 Order Confirmation Class Title/Link to Description Enter username Information about Email Reminders Upload or Choose a Photo (Optional) Questions? (Wording TBD) Network at GA About GA Order Summary Monday, November 11, 13 Submit or sign in with In f
  • Email Redesign Method: FINAL EMAIL CONFIRMATION After interviewing participants and determining client needs. I recognized there was a common theme among all new users. They had specific questions they wanted answered, in fact it was those questions that brought them to the live stream. The questions ranged in specificity, but it was universally important to the users that their questions get answered. Opportunities Identified: Order Confirmation Congratulations, you have successfully registered for the upcoming live stream. It will be airing on November 5th at 5:00 pm. Please keep an eye on your email, you’ll be receiving a link 30 minutes prior to the scheduled start time. If you have any questions you would like addressed in the live stream please contact the moderator by clicking below. Ask the Moderator Class Description Network at GA Cheers, The GA Team Monday, November 11, 13 Answering the right questions was the largest concern for the user base. However they lacked a good opportunity to ask questions before the stream. There were also a number of reasons that kept users from asking their questions during the stream. Giving users a way to ask the questions immediately after signing up for the live stream would solve problems for both the business and the users.
  • DESIGN ITERATIONS | PROTOTYPE FINAL PROTOTYPE Method: I created a high fidelity prototype using OmniGraffle and Keynote to detail the entire experience from the pre-stream email confirmation to the exit screen for when the live stream is over. Growth Hacking Strategies Part 2 of 3 CORE PRODUCT EXPERIENCE Receiving an order confirmation Submitting a question before the stream starts Utilizing interface during stream to network and learn more Chat - Sally 1:32 Arturo Uploaded Growth Statistics.xl Tommy 1:33 Generally that refers to acquiring new users or increasing revenue over a given period of time Randy 1:40 What are some models for growth? 16:9 1:40 Dana - Moderator Sign-in process Chatting during the Live Stream Learning more about fellow classmates Upvoting a question Learning more about the topic via related materials Full Screen Great Question @Randy! @Ami 1:42 Hey Sally, thanks for posting that link earlier. Do you know any other useful websites? Send #GAlivestream Descriptions Message Questions Questions Upload Users Question 1:40pm Vote 1 New: What are companies with high growth? What are the best ways to grow on a low budget? 20 Frank Me 1:35pm What are some growth models? What are some techniques for research? 17 Ami Robert Arturo Kurt FINAL SIGN IN 15 1:43pm Frank Cori Growth Hacking Strategies Growth Hacking Strategies Part 2 of 3 1:30pm What job title would help me grow my business? How do you go about getting your first 5,000 clients? Chat Users Related Videos 12 1:20pm Part 2 of 3 12 Tommy Erik Kimel is an entrepreneur and founded his first company, 1:15pm Peer2Peer Tutors, as a senior in high school in 2004. He grew 10 What in your mind, are some of the greatest Peer2Peer from trends in business today? one tutor and one client to over 5,000 tutors and Randy Sally Sign In Network at GA 16:9 Enter Username Next Done or sign in via Related Content Description In Questions Starting a business seems like a daunting task. In this class, Erik will explain three strategies he 2012, Peer2Peer Tutors was acquired by an international network Profile 16:9 5,000 clients across the east coast region of the United States. In What is growth hacking? college admissions experts, which was covered Answered 1:35 of by the Wall Chat Users Related Videos has used to start successful businesses. Whether you’d like to understand how to increase your visibility on the web, choose an insurance plan, and focus on your value proposition, this is the Optional f City Questions Description Company Name Starting a business seems like a daunting task. In this class, Erik will explain three strategies he has used to start successful businesses. Whether you’d like to understand how to increase your class for you. TAKEAWAYS Upload Photo TAKEAWAYS Website in Business Week Are there any good books on growth hacking? Answered 1:40 ▪ Know how to form your company ▪ Know how to form your company ▪ Understand strategies for increasing visibility on the web ▪ Understand strategies for increasing visibility on the web ▪ Street Journal. Kimel has been featured on the Top 25 under 25 list Job Title visibility on the web, choose an insurance plan, and focus on your value proposition, this is the class for you. Get live ▪ Get live ABOUT THE INSTRUCTOR What topics are you interested in? Erik Kimel is an entrepreneur and founded his first company, User Experience ABOUT THE INSTRUCTOR Business Erik Kimel is an entrepreneur and founded his first company, Foundations Design Peer2Peer Tutors, as a senior in high school in 2004. He grew Peer2Peer Tutors, as a senior in high school in 2004. He grew Peer2Peer from one tutor and one client to over 5,000 tutors and Web Digital Mobile Peer2Peer from one tutor and one client to over 5,000 tutors and Product Design 5,000 clients across the east coast region of the United States. In 2012, Peer2Peer Tutors was acquired by an international network 2012, Peer2Peer Tutors was acquired by an international network of college admissions experts, which was covered by the Wall of college admissions experts, which was covered by the Wall Street Journal. Kimel has been featured on the Top 25 under 25 list Street Journal. Kimel has been featured on the Top 25 under 25 list in Business Week Monday, November 11, 13 Development Marketing Development 5,000 clients across the east coast region of the United States. In in Business Week Data Analysis
  • Case Study #2 intervieWMe by Chris Stair GA UXDI Course Project #3 Monday, November 11, 13
  • Project Brief IntervieWMe was the Third project from my General Assembly course. Working alone over the course of two weeks I developed an idea from a research phase into a high fidelity prototype. These are the steps I took: • Research • Persona Creation • Feature Prioritization • Sketching/Iteration • First Iteration • User Testing • High Fidelity Prototyping Monday, November 11, 13
  • Final Product Description IntervieWME is an interview preparation tool designed to help recent college graduates prepare for upcoming interviews. It allows users to record, review, save and share answers to potential interview questions. The users can share their answers through multiple channels. InterviewME has an advantage over the competition because it is designed for mobile and connected to social media. 18 Monday, November 11, 13
  • Research I created a screener survey to select millenials from my class who had varying levels of job interviewing experience. From my pool of 12 qualified applicants I interviewed seven people over the course of two days. Participants in the study were asked about their interview preparation habits and their performance in past interviews. I found that participants fell into three basic categories in terms of their methods of preparing for interviews. Those three categories became personas. I designed for two of the personas because the third, by definition, did not spend time preparing for interviews. 19 Monday, November 11, 13
  • Cheryl Ko - The Overachiever “There was a time that I prepared a huge booklet for a job and it threw them off completely. They were impressed.” • Stresses before interviews, but alleviates the stress by preparing. • Rarely makes mistakes in an interview because of her intense preparation. • Highly social in her preparation, frequently solicits advice and feedback from friends and family. • Represents key demographic. Monday, November 11, 13
  • John Lenney - The Stresser “I get easily distracted, and then I get nervous and then I don’t do anything.” • Stresses before interviews, relieves stress by paying attention to something else. • Often makes simple mistakes in interviews because of his lack of preparation. • Generally prepares alone. • Preparation is short, generally 1-2 hours before each interview. • Often receives pressure from family to work harder at preparing. • Represents key demographic. Monday, November 11, 13
  • Mark Kurfess - The Winger “I don’t really go in thinking of things I like to do it off the cuff.” • Has experience interviewing. • Does not stress heavily before interviews. • Does not spend much time preparing, preparation often involves a quick background check on the company itself. • Makes mistakes in the interview, but they tend to be small and relate to a lack of preparation. • Not part of target demographic. Monday, November 11, 13
  • Key Features • • • Record Answers for Potential Questions Replay Recordings and Improve Answers Share Answers with Friends for Feedback 23 Monday, November 11, 13
  • Design Iterations interviewME Designed Mobile First for Desktop Redesigned According to Mobile Conventions John Gates 10/25/13 Why I make an awesome worker Interview Recording of Why John Makes an Awesome Worker Justin Park I really like his explanation Roy Park ya me too Sara Brown 10/25/13 Why I make an awesome worker Converted to Desktop Monday, November 11, 13 Converted back to Mobile
  • First Wireframes Home Enter Your Question Here Projects Record Share BofA Why are you a good job candidate? Share Cancel Why would you be a good candidate? 1 Comment How much experience do you have? 0 Comments 0:50 What is your greatest weakness? 0 Comments 0:50 If you had a problem you couldn't finish, how would you deal? 0 Comments 0:50 T l me about el yourself. 0 Comments f 0:45 1:00 Why are you a good job candidate? 0:45 0:45 25 Monday, November 11, 13
  • Key Takeaways from User Testing Users: • • • • • Were confused by home screen Found two step sharing process cumbersome Were unsure of the format for their answers Needed a global navigation Needed standardized icons 26 Monday, November 11, 13
  • Final Design Home Profile Record interviewME Profile Record John Gates 10/25/13 Why I make an awesome worker Share Cheryl Ko 15 Videos Share Share Write Comment… 204 Connections Cheryl Ko Interview Recording of Why John Makes an Awesome Worker LinkedIn Email Justin Park I really like his explanation Roy Park ya me too What is my greatest strength? Comment Sara Brown 10/25/13 Why I make an awesome worker Share +Question Sean Bradcliffe Good Job Staying up late to work on this 27 Monday, November 11, 13 0:15 Facebook Interview Me
  • Case Study #3 Paper GA Work Guidelines Asset and Logo2 UXdi September 2013 March 2013 Alan Nudman, Ethan Cline and Chris Stair Monday, November 11, 13
  • Project Brief The second project I completed during my User Experience Design Immersive at General Assembly was a mock newsreader application for Facebook. Over the course of two weeks my team of three members worked to understand what advantages a brand like Facebook could leverage in the form of a news reader application, as well as what users look for in a news reader application. • • • • • • • Research Persona Creation Feature Prioritization Sketching Wireframing User Testing Low Fidelity Prototyping Monday, November 11, 13
  • PRODUCT OR PROJECT DESCRIPTION Product description Facebook Paper is a convenient and socially optimized news reader for RSS users who have not found a replacement for Google Reader. It allows all 1.1 billion Facebook users to find news from a single source they already use. The reader has an advantage over competition because Facebook has more data on their users and the users already read, share and comment on news in Facebook. Key features • Trending & Popular feeds • Saving articles to mobile • Share & commenting • Add & organize feeds Monday, November 11, 13
  • Research Our group interviewed six participants over the course of three days. We used a screener survey to select participants between the age of 22 and 35 who regularly read news online. We found that there were two basic demographics which we then used to create personas. Conclusions 1. Two different content consumption habits 2. Importance of simple interfaces was universal 3. Value of “push to mobile” feature 4. Former Google Reader had not been replaced yet 5. Difference between “pleasure reading” and “work reading” was voiced across the board Monday, November 11, 13
  • Personas Julia Edwards •Prefers high resolution images and longer articles. •Distinguishes between browsing for pleasure and browsing for work. •Generally reads news online at home on the desktop. •Places a high value on shares from friends. Craig Gomez •Prefers to read shorter articles with no images. •Reads at home on the desktop, but then bookmarks longer articles for mobile consumption during the commute. •Places a high value on staying informed. •Dislikes when news ‘backs up’ and he has several thousand unread articles in his feed. Monday, November 11, 13 “I subscribe to all these sources because they all have good writing and I enjoy the quality of the writing.” “I like to read really fast...” “I like tech and culture, social media for the breaking... I get on Twitter and Facebook and they’ll say Syria is really bad. Then I´ll look at the Atlantic to get opinions”.
  • Design Iterations from Sketching to Wireframing Monday, November 11, 13
  • Usability Testing 1. Users wanted a more simplified Dashboard 2. Users needed clarification for the ‘Add’ button 3. Users couldn’t recognize the wireframe as Facebook 4. Users didn’t like the confirmation page from the ‘add feed’ function 4. “Add feed” function’s confirmation page didn’t make sense to users Monday, November 11, 13
  • Contents (Home) We decided to keep Facebook’s formatting when displaying articles. We found that the majority of our users like saving articles to their mobile devices for later reading. Facebook’s main competitive advantage lies in the information they possess, showcased in trending. We found that having one button to control feed subscriptions keeps the interface streamlined and manageable. Monday, November 11, 13
  • Thank you! Email: ccstair@gmail.com Monday, November 11, 13