Brendan Pailet UX Design Portfolio

Download Brendan Pailet UX Design Portfolio

Post on 15-Apr-2017

516 views

Category:

Design

7 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>Brendan Pailet UX Design Portfolio, 2016</p></li><li><p>Hi, Im Brendan!</p><p>This is me, if that wasnt clear Im a UX designer with a passion for idea generating. Driven by a desire to understand and create, I focus my work on user research and content strategy.I love to figure out what users think and how they respond to a product, and then turn that feedback alchemic-like into an executable design iteration.</p><p>About Process Project Contact</p></li><li><p>Lemme first catch you up on what youve missed so far</p><p>See what I did there?Started up my own </p><p>online magazine about D.C. life </p><p>and cultureIncluding a </p><p>spooky ghost house!</p><p>Not trying to brag,but I can make </p><p>a pretty great door</p><p>About Process Project Contact</p></li><li><p>Okay, so, now lemme tell you about my creative process</p><p>Affinity Mapping Brainstorming Feature Prioritization Data Synthesis Persona Creation Low Fidelity Sketching</p><p>Survey Creation User Interviews Competitive Analysis Comparative Analysis Card Sorting Heuristic Analysis </p><p>User Flows User Journey Site/App Map Medium Fidelity Prototyping</p><p>Usability Testing High Fidelity Mockup Iterating on Design Clickable Prototyping </p><p>Research Ideate Design Test</p><p>So, what exactly do ya do here? - Office Space</p><p>ContactProjectProcessAbout</p></li><li><p>Project/</p><p>Brief: A client consulting project for Linute, a social event planning app geared towards college students. Our task was to redesign the event creation and attendance process, in order to improve the user experience.</p><p>Team: 3 people Timeframe: 3 weeks My Role: Head Researcher</p><p>Posing is an important part of the UX process</p><p>About Process ContactProject</p><p>Solution: Our research showed that Linute users were unwilling to use the service, due to the UI/UX process being too complicated and confusing. Therefore, our goal was to simplify the UX process into an intuitive and enjoyable experience for the users. Our redesigns focused on the event creation process, finding other events to attend, and revamping the Linute feed. Additionally, we prototyped features that would assist in finding and messaging attendees, to boost attendance.</p></li><li><p>- Usability Testing</p><p>- Surveys &amp; interviews</p><p>- Competitive Analysis</p><p>- Heuristics</p><p>Usability TestingI promise, Im not smelling my hand in this picture</p><p>In order to figure out what we were working with, I conducted baseline usability testing of the existing Linute iteration, to ensure that we really were addressing the users concerns. Objectivity was key, so to not influence the user data. We also recorded all user testing, for later use and reference. </p><p>Surveys &amp; InterviewsBut we didnt stop at just usability testing. We created and distributed a survey to find participants that fit Linutes core demo, and could provide us with ideas to consider for our design iterations. I was in charge of interviewing survey participants, to ensure they would be useful feedback sources.</p><p>I keep trying to post an event, but it </p><p>wont let me. Thats annoying!</p><p>I cant find my friends on this,even under the friends </p><p>tab- its frustrating me.</p><p>Real quotes!</p><p>Users say the darnedest things!</p><p>- Data Synthesis</p><p>- Personas</p><p>- Feature Prioritization</p><p>- User Journey </p><p>- App Map</p><p>- Design Studio</p><p>- Med-Fidelity Prototype </p><p>- High-Fidelity Prototype </p></li><li><p>Competitive Analysis</p><p>Evaluation Issue Fix Best PracticeVisibility of system status Activity notification for attendee</p><p>Host information doesn't go away immedatelyNo chatNo notifcationFriends list burried in Trophy iconSetting Nearby radius on home page is hidden</p><p>Notification for everythingHave a clear indication for frends list</p><p>Match between system and thereal world</p><p>Discover is not clearFriends is not clearIcon is not standard sizeActivity icon looks like a chat, not clearRepost is redundant word, suggest to use Share</p><p>Change to Discover to News FeedChange Friends to Friends ListAdd Friends filter to Discover (News Feed)Icon should be 44X44 (Apple HIG)</p><p>Me: everything I did</p><p>User control and freedom Back out from createeventsNavigation bar is easy tofunction</p><p>Consistency and standards Icons don't meet Apple HIG standardTap Chat button swipe to next screen. However, user canswipe to chat screen without tap chat buttonTap Create button shows a blue theme which is notconsistent with Linute green color</p><p>Stay consistent</p><p>Error prevention No sign shows how to contact with support teamKeyboard doesn't go down (chat page)When user creates an event, the app crash itself</p><p>support team to preventerror prevention</p><p>Recognition rather than recall College icon is not clear as filtersLeader board is accessiable in two ways which isconfusing</p><p>Stay consistent create a event is clear andrecognitable</p><p>Flexibility and efficiency of use UI is not strong enough to create flexiablity and reputation Navigation helps user gothrough</p><p>Aesthetic and minimalist design Nearby feature is redundantIcon is smallHidden actionsLeader board is accessiable in two ways which isconfusing</p><p>Help users recognize, diagnose,and recover from errors</p><p>Partial error messaging strong Support team Error messaging oncamera</p><p>Help and documentation easy to search eventsupport is easy to find</p><p>Heuristic AnalysisHeuristics</p><p>We conducted competitive analysis in order to see how Linute differed from its competitors, and what areas could be capitalized on for improvement. </p><p>Heuristic analysis let us really look at Linute with a critical UX eye, and decide where the strengths and weaknesses were in its current form. As head researcher, I was in charge of determining what areas needed the most attention, based on user and competitive research. </p><p>Based on the Jakob Neilsen 10 key heuristics guide</p><p>- Usability Testing</p><p>- Surveys &amp; interviews</p><p>- Competitive Analysis</p><p>- Heuristics</p><p>- User Journey </p><p>- App Map</p><p>- Design Studio</p><p>- Data Synthesis</p><p>- Personas</p><p>- Feature Prioritization</p><p>- Med-Fidelity Prototype </p><p>- High-Fidelity Prototype </p><p>https://www.nngroup.com/articles/ten-usability-heuristics/</p></li><li><p>Personas</p><p>Data Synthesis</p><p>With all the data organized, I created three unique personas, in order to best represent the different types of users who would be experiencing Linute. Making sure the personas had a layer of depth to them, and werent just cardboard cutouts, was something I strived for in my creating.</p><p>I took all of our research data, from over 30 sources, and broke it apart into one of four categories: either pleasure, pain, context, or behavior. This made it easy to see patterns in what users thought about Linute, and who the core user was. </p><p>This method is called the 4-list method, </p><p>hence the four lists. Duh.</p><p>- Usability Testing</p><p>- Surveys &amp; interviews</p><p>- Competitive Analysis</p><p>- Heuristics</p><p>- Data Synthesis</p><p>- Personas</p><p>- Feature Prioritization</p><p>- User Journey </p><p>- App Map</p><p>- Design Studio</p><p>- Med-Fidelity Prototype </p><p>- High-Fidelity Prototype </p></li><li><p>Must Have</p><p>Nice to Have</p><p>ErrorMessaging</p><p>Sign up with Facebook</p><p>Resigster Phone number</p><p>Create an event</p><p>Event locationTimestamp</p><p>Start + End time Setting Posting</p><p>Organize by time (ending </p><p>soonest)View </p><p>Attendees</p><p>List of FriendsLabelingMessage CTA</p><p>Feedback Annotation</p><p>Import Photo from google</p><p>Profiletab</p><p>Discover</p><p>ActivityStream</p><p>Share w/ Friends</p><p>Share Publicaly Share Private </p><p>Option to review</p><p>Search by cityEvent picture Share w/ Facebook</p><p>Adding photo</p><p>Finding nearby shopping</p><p>Finding nearby vendor</p><p> nearby</p><p> Share with Friend +small </p><p>helper textEdit event after creation</p><p>Follow (not add) places</p><p>Liking</p><p>High EffortLow Effort</p><p>Trophy</p><p>Auto correct</p><p>Commet</p><p>Map</p><p>Invite Notification</p><p>Invite friends outside of </p><p>Linute</p><p>Feedback after Invitation</p><p>Direct message</p><p>Ranking</p><p>Clear layout</p><p>Friends event</p><p>Filter</p><p>Selling tickets</p><p>Street Marketing</p><p>Requesting</p><p>Street Marketing</p><p>Different Colleges</p><p>Words are small</p><p>Existing Feature</p><p>SuggestingFeature</p><p>Feature PrioritizationWith only a three-week window to work within, we created a feature prioritization grid to determine what redesigns were unavoidably needed, and what features would be easiest for a development team to iterate and bring to life. This made our final prototype into something immediately reflecting our user feedback. </p><p>- Usability Testing</p><p>- Surveys &amp; interviews</p><p>- Competitive Analysis</p><p>- Heuristics</p><p>- Data Synthesis</p><p>- Personas</p><p>- Feature Prioritization</p><p>- User Journey </p><p>- App Map</p><p>- Design Studio</p><p>- Med-Fidelity Prototype </p><p>- High-Fidelity Prototype </p></li><li><p>User Journey</p><p>Using swim lane flows and user flows, we were able to map out an exact user journey as to what the experience of using Linute was like. When it came time to present our redesigns to the Linute team, info-graphs such as this were essential in illustrating all the potential outcomes a user could have with Linute, and how our redesigns were tailored to this data.</p><p>- Usability Testing</p><p>- Surveys &amp; interviews</p><p>- Competitive Analysis</p><p>- Heuristics</p><p>- Data Synthesis</p><p>- Personas</p><p>- Feature Prioritization</p><p>- User Journey </p><p>- App Map</p><p>- Design Studio</p><p>- Med-Fidelity Prototype </p><p>- High-Fidelity Prototype </p></li><li><p>Linute</p><p>Discover Friends Create ActivityMe</p><p>Friends AttendedHosted</p><p>Event Detail</p><p>Add FriendsSettings</p><p>Add Friends Trophies Event Feed</p><p>Add Friends Trophies</p><p>Notification feed</p><p>Location search</p><p>SHARE WITH</p><p>View Attending</p><p>Invite Friends</p><p>Chat Map</p><p>Profile</p><p>Event Feed</p><p>Event Detail</p><p>Add Friends Trophies</p><p>View Attending Chat Map</p><p>Invite Friends</p><p>Profile</p><p>Event Detail</p><p>View Attending Chat Map</p><p>Invite Friends</p><p>Profile</p><p>Event Detail User Profile Event Detail User Profile Event Detail User Profile</p><p>App Map</p><p>Original Redesign</p><p>One of Linutes biggest problems was its over-clutter of features and information, leading to intense user confusion. This app map I made shows just how much we simplified and organized the system through our redesigns.</p><p>Design StudioIn order to bring all of our ideas out, my group did a number of design studio sessions, where we iterated and tested paper prototypes of our ideas until we reached a consensus of best practice. After going through and testing 22 different styles, we ended up at our medium fidelity prototype.</p><p>- Usability Testing</p><p>- Surveys &amp; interviews</p><p>- Competitive Analysis</p><p>- Heuristics</p><p>- Data Synthesis</p><p>- Personas</p><p>- Feature Prioritization</p><p>- User Journey </p><p>- App Map</p><p>- Design Studio</p><p>- Med-Fidelity Prototype </p><p>- High-Fidelity Prototype </p></li><li><p>Medium Fidelity Mock-ups</p><p>NotificationFriendsCampus</p><p>K-Style Bake Sale</p><p>Nov. 10th 7am-5pm2nd Fl Lobby, Vertical Campus</p><p>Filter</p><p>Search</p><p>Happening Now</p><p>7 going Join</p><p>Join</p><p>Join</p><p>25 going</p><p>10 going</p><p>K-Style Bake SaleNov. 10th, 7am-5pm2nd Fl Lobby, Vertical Campus</p><p>7 going Join</p><p>Join</p><p>Join</p><p>WIB Philanthropy Event #3:Days for GirlsNov. 10th, 8am-10amRm 2-110, Vertical Campus</p><p>25 going</p><p>An Intro to DungeonsNov. 10th, 2pm-5pm2nd Fl Lobby, Vertical Campus</p><p>10 going</p><p>K-Style Bake SaleNov. 10th 7am-5pm2nd Fl Lobby, Vertical Campus</p><p>ProfileCreateFriendsLinutes</p><p>LINUTEVerizon 9:41 AM 100%</p><p>Wei-Li Cheng</p><p>Brendan Pailet</p><p>Ning Xu</p><p>Ebenezer Gavieres</p><p>Laurence Brouillette</p><p>Derek Timm-Brock</p><p>Andi Muskaj</p><p>Nabeel Alamgir</p><p>Hadi Rashid</p><p>Ian Dombroski</p><p>ProfileCreateFriendsLinutes</p><p>FriendsVerizon 9:41 AM 100%</p><p>Search</p><p>ContactsFacebookLinute</p><p>Create A HangoutVerizon 9:41 AM 100%</p><p>| What do you want to do? Coffee, groupproject, park etc.</p><p>Where?(Optional)</p><p>(Optional)</p><p>(Optional)</p><p>When?</p><p>Who?</p><p>CREATE</p><p>Friends OnlyPublicDONE!</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8 Feedback to notify user that the event has been successfully created</p><p>All other information fields optional</p><p>The only information field that is required to create an event</p><p>Redesigned content tabs, localizing all friend data to one central location and hub</p><p>Redesigned friend list; now shows first and last names</p><p>Join button allows users to easily mark events to attend on the fly</p><p>All important event data: title, date, times, location, number of people attending</p><p>Event filters to see events going on, events your friends are attending, and all notifications</p><p>- Usability Testing</p><p>- Surveys &amp; interviews</p><p>- Competitive Analysis</p><p>- Heuristics</p><p>- Data Synthesis</p><p>- Personas</p><p>- Feature Prioritization</p><p>- User Journey </p><p>- App Map</p><p>- Design Studio</p><p>- Med-Fidelity Prototype </p><p>- High-Fidelity Prototype </p></li><li><p>Prototype: https://invis.io/DC4XAAVNK </p><p>High Fidelity Mock-ups</p><p>Fancy shmancy, huh?</p><p>- Usability Testing</p><p>- Surveys &amp; interviews</p><p>- Competitive Analysis</p><p>- Heuristics</p><p>- Data Synthesis</p><p>- Personas</p><p>- Feature Prioritization</p><p>- User Journey </p><p>- App Map</p><p>- Design Studio</p><p>- Med-Fidelity Prototype </p><p>- High-Fidelity Prototype </p><p>https://invis.io/DC4XAAVNK</p></li><li><p>Now heres where you come in</p><p>Contact Info</p><p>About ProjectProcess Contact</p><p>610.613.7880</p><p>Brendan.Pailet@gmail.com</p><p>https://www.linkedin.com/in/brendanpailet </p><p>Shine in the night sky above Gotham City</p><p>mailto:brendan.Pailet@gmail.com?subject=https://www.linkedin.com/in/brendanpailet</p></li></ul>