Peter Mylonas UX Design Portfolio

Download Peter Mylonas UX Design Portfolio

Post on 14-Apr-2017

573 views

Category:

Art & Photos

2 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>UX/UI DESIGNER</p></li><li><p>CONTENTS</p><p>MY UX PROCESSSKILLS AND TOOLS</p><p>WORKCONTACT </p></li><li><p>MY UX PROCESS Finding the Problem</p><p>Research</p><p>Synthesize</p><p>Design</p><p>Test</p><p>Finalize</p><p> Defining the problem that needs to be solved ismy first step in the process, without it, where would I begin?</p><p> the product I am working on, find target audiences, findcompetitors, interview users for their pains and pleasures in hopes to find atrend. All research is crucial to the design phase.</p><p> the findings from the research phase. This helps break down andprioritize all of the information, to make sure that all user needs will be addressed inthe solution.</p><p> Beginning with Low-Fi Wireframes, and testing with users helps createa foundation for the next step of High Fidelity. Consistent user testing is key.</p><p> early, and often. That is something that I stick to carefully. Testing throughoutthe whole process is great, but testing early and often boosts efficiency and quality.</p><p> all designs and deliverables. Chat with users and see what they think ofthe solution. This helps me validate that my work has had a positive impact on howusers will use this going forward.</p></li><li><p>SKILLS AND TOOLS</p><p>Sketch Adobe InDesign P.O.P </p><p>OmniGraffle Google Sheets Google Docs</p><p>Adobe Illustrator Marvel Keynote</p><p>Google DriveAdobe Photoshop InVision</p></li><li><p>PROJECT // MEETUP</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p><p>MeetUp 9:41 AM 100%</p><p>Back</p><p>Gargoyle UX Meetup8:00 PM - 11:00 PM</p><p>10 W25th St</p><p>Join &amp; RSVP Join &amp; RSVP</p><p>Friday October 30th</p><p>Rebecca Black(917) 342-5600</p><p>rblack@meetup.com</p><p>RSVP</p><p>MeetUp 9:41 AM 100%</p><p>RSVP</p><p>Will You be Attending?</p><p>How Many People Will You be Bringing?</p><p>RSVP RSVP</p><p>Add to Calendar?</p><p>Recieve SMS/Email Updates/Reminders?</p><p>Yes No</p><p>Yes No</p><p>Yes No</p><p>0</p><p>MeetUp 9:41 AM 100%</p><p>Success!</p><p>Home Home</p></li><li><p>PROJECT // MEETUP</p><p>PROJECT BRIEF</p><p>TOOLS USED</p><p>TIMEMeetUp 9:41 AM 100%</p><p>Back</p><p>Gargoyle UX Meetup8:00 PM - 11:00 PM</p><p>10 W25th St</p><p>Join &amp; RSVP Join &amp; RSVP</p><p>Friday October 30th</p><p>Rebecca Black(917) 342-5600</p><p>rblack@meetup.com</p><p>RSVP</p><p>For this project, my team and I needed to create a more efficient way for Hosts of events to get in touch with Organizers of events so they can easily help eachotherand help the community.</p><p>14 Days to complete a high fidelity,clickable prototype with research to supportour solutions and findings.</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // MEETUP</p><p>SCREENER</p><p>PERSONAS</p><p>SYNTHESIS</p><p>USER INTERVIEWSAs a team, we decided it would be very beneficial to our next steps if we crafted a screener survey, to ensure we are interviewingthe right candidates. With this, we hope to find the users educated views on Meetup, and find different pain points that each user runs into.</p><p>From the screener responses, we carefully chose users that we would interview. Here, we were looking for people with experience attending, organizing, or hosting events. One user stated...</p><p>After our interviews, we gathered our information. This helped us prioritize the features we needed to implement, as well as find trends in pain points that users have experienced. This process was critical to our next steps into design, because without a strong foundation and understanding of the problem, how would we create a functional solution?</p><p>My team and I were targeting three types of users,Hosts, Organizers, and Participants of these events throughMeetup. Thus, we created three separate personas to design for,and each had their own needs, pains and pleasures.</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p><p>The hardest part of planning was finding a space. </p></li><li><p>PROJECT // MEETUP</p><p>USER FLOWS</p><p>WIREFRAMES</p><p>SKETCHES</p><p>SITEMAPSCreating a flow of the steps a user currently has to take to completea certain task was helpful to the design stage, because it gave us an in depth look at how we can make the experience as pleasant as possible.</p><p>The sitemap, or in the case, Appmap layed out every existing screen of the current app, which lead to great discovery of how the experience could become more clear, and delightful for the users.</p><p>After creating the existing User Flows and Sitemap, sketching was the next step. Coming up with multiple ideas in a short amount of time made us think of all possible solutions to the problemat hand. </p><p>Sketching lead us to begin low fidelity mockups of our ideas, which went through a round of usertesting. Those low fidelity mockups then became medium fidelity, and then into high fidelity, with a lotof testing in between. On the next page, you will find those mockups.</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // MEETUP</p><p>WIREFRAMES</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // MEETUP</p><p>WIREFRAMES</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // MEETUP</p><p>SOLUTION</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p><p>After all of the research, and design that went into making Meetup a better experience for its users, this is what we came up with. We created a better experience for hosts and organizers to contact eachother by allowing them to send eachother push notifications when they see there is a host/organizer in the area in need of one another. This would increase the speed of how quickly these events are able to be planned, which ultimately would positively affect the participant by allowing them to have plenty of time to clear their schedules for a certain event. These feautres went through plenty of testing, and we finally nailed it and created a solution that helps all users of Meetup.</p></li><li><p>PROJECT // MEETUP</p><p>https://invis.io/6S4QSW1K9</p><p>PROTOTYPE</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p><p>Please follow the link, and enjoy the fully functioning, clickable prototype.</p></li><li><p>PROJECT // MTA GoRide</p><p>42 Street 9:29 PM</p><p>34 Street 9:34 PM</p><p>14 Street 9:38 PM</p><p>W4 Street 9:44 PM</p><p>Canal Street 9:34 PM</p><p>Chambers Street 9:38 PM</p><p>Fulton Street 9:38 PM</p><p>Sketch 9:41 AM 100%</p><p>E</p><p>MetroCards Maps Schedule Profile</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // MTA GoRide</p><p>PROJECT BRIEF</p><p>TOOLS USED</p><p>TIMEFor this project, my team and I were assigned the task of picking an existing brand with a problem, and find the solutionthrough user interviews, user testing, research, and design. The problem with MTA, is that it is an inconvienience to constantly remember to refill your card, and keep track of it.</p><p>14 Days to complete a high fidelity,clickable prototype with research to supportour solutions and findings.</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // MTA GoRide</p><p>SCREENER</p><p>PERSONAS</p><p>SYNTHESIS</p><p>USER INTERVIEWSAs a team, we decided it would be very beneficial to our next steps if we crafted a screener survey, to ensure we are interviewingthe right candidates. With this, we hope to find the users educated views on using public transportation, and find different pain points that each user runs into throughout their journey.</p><p>From the screener responses, we carefully chose users that we would interview. Here, we were looking for people with experience using public transportation. Finding users that havehad a lot of problems refilling cards, and keeping track of their physical card was crucial, because thesecertain users have great suggestions for improvement.</p><p>After our interviews, we took all of our recorded information, and did multiple sorting exercises that helpedus prioritize our next steps into making a functional solution. These exercises included card sorting for useof certain terms, Affinity Mapping which layed out our interview notes, and a feature prioirtization process named MoSCoW (Must, Should, Could and Wont)</p><p>My team and I were targeting a few different types of users. Some users will be regular MTA Riders, and possibly in a rush to get to work,so they need a quick solution. Others will be infrequent MTA Riders, andmay need a map to get around. Thus, we designed for both of those typesof users.</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p><p>I wish I had an Apple Watch where I could just tap it to pay </p><p>Most of the time I forget that I need to renew, then I see insufficient fare and have to go back to the kiosk and miss </p><p>2-3 trains</p></li><li><p>PROJECT // MTA GoRide</p><p>USER FLOWS</p><p>WIREFRAMES</p><p>SKETCHES</p><p>SITEMAPSCreating a flow of the steps a user currently has to take to completea certain task was helpful to the design stage, because it gave us an in depth look at how we can make the experience as pleasant as possible.</p><p>The sitemap, or in the case, Appmap layed out every existing screen of the current app, which lead to great discovery of how the experience could become more clear, and delightful for the users. This is a small snippet of the AppMap.</p><p>After creating the existing User Flows and Sitemap, we went to the drawing board, and tried to createsketches of six different ideas in 2 minutes. This helped spark our creativity, and move onto the computer to create low fidelity wireframes.</p><p>Sketching lead us to begin low fidelity mockups of our ideas, which went through a round of usertesting. Those low fidelity mockups then became medium fidelity, and then into high fidelity, with a lotof testing in between. This time, the platform was for iOS as well as watchOS. These mockups are displayed in the coming pages.</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // MTA GoRide</p><p>USER FLOWS</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p><p>Purchasing a MetroCard User Flow (Single Refill Transaction):</p><p>MTAHomeScreen</p><p>Start LanguageScreen EnglishCard</p><p>Selection MetroCard Refill</p><p>Insert Card</p><p>AddValue / Time</p><p>Value Payment Amounts ValuePayment </p><p>Type Credit</p><p>Swipe CreditCard</p><p>Type PIN# Charges Screen OKCard</p><p>DispensedReceipt Screen Yes</p><p>Receipt</p><p>PAGE ACTION</p><p>Home Screen Open Apple Wallet/Hold Near ReaderTap on Desired Card </p><p>to Use</p><p>Internal Action</p><p>Card Slides to Top</p><p>Prompted to Use Touch ID</p><p>Place Finger on Touch ID</p><p>Completed</p><p>Try Again</p><p>Using Apple Pay</p></li><li><p>PROJECT // MTA GoRide</p><p>WIREFRAMES</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // MTA GoRide</p><p>WIREFRAMES</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // MTA GoRide</p><p>SOLUTION</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p><p>After all of the research, and design that went into making MTA a better experience for the user, this is our solution. We gathered that users found it difficult to remember to refill their cards, and some users even felt they may lose their MetroCard from time to time. Other users found it would be very easy to use their Apple Pay to pay their fare. Our solution was simple. Create an app that stores your card, which gives you the option to renew/refill the card. The app also offers an Apple Watch companion app, where you can access your Apple Pay for quick and easy payment. This app went through a lot of testing, and our users found each feature to be clear, findable and beneficial to their lives. </p></li><li><p>PROJECT // MTA GoRide</p><p>PROTOTYPE</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // Wellthy</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // Wellthy</p><p>PROJECT BRIEF</p><p>TOOLS USED</p><p>TIMEFor this project, my partner and I were tasked with helping the startup healthcare company Wellthy. Our assignment was to createa more efficient way for customers to chat with their Care Coordinatorson platform, instead of off-platform (email) like most users were doing.</p><p>4 Weeks to complete a high fidelity,clickable prototype with research to supportour solutions and findings.</p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p></li><li><p>PROJECT // Wellthy</p><p>SCREENER</p><p>PERSONAS</p><p>SYNTHESIS</p><p>USER INTERVIEWSBefore we sent out our screener, we knew we would have a slightly tough time finding the right candidates to interviewthat have had experience with being the care giver for sick lovedones, and we knew it would be a touchy subject for most to talk about. Our use of certain terminology was carefully selected to make sure noone felt pressured or offended about the sensitive topic.</p><p>From the screener responses, we carefully chose users that we would interview. Here, as stated, we were looking for people with experience caring for a loved one,taking them to doctors appointments, keeping track of medical records, and communicationwith doctors, and other important medical personell. </p><p>Organizing the information from our user interviews was very informative. We got the opportunityto speak with direct stakeholders of Wellthy. This gave us an amamzing inside look at how the companyoperates, and their goals to help their users. These interviews helped us craft our personas, as well as validate the features users wanted to see. </p><p>For this project, we knew we were targeting multiple typesof users. Care Recipients, people recieving care, Care Coordinators, people directing the Care Recipients care, and the family of the Care Recipient. </p><p>OVERVIEW | SCREENER INTERVIEWS PERSONAS SYNTHESIS | USER FLOWS SITEMAPS SKETCHES WIREFRAMES PROTOTYPE </p><p>It would be great if a person of any age could be in charge of their own health.</p></li><li><p>PROJECT // Wellthy</p><p>USER FLOWS WIREFRAMES</p><p>SKETCHES</p><p>Creating a flow of the steps a user currently has to take to completea certain task was helpful to the design stage. This helped us see how we needed to improve the chatting experience to keep users on platform.</p><p>With this phase, we sketched multiple different ideas and testedthem with our users. I had sketched an instance of the chat withbubbles, like in iOS and other chatting applications. We tested itagainst the existing Wellthy chat, which was more linear. Most users l...</p></li></ul>