Sandy Martinuk UX Design Portfolio v3.1

Download Sandy Martinuk UX Design Portfolio v3.1

Post on 04-Aug-2015




1 download

Embed Size (px)


1. Sandy Martinuk MODIFICATION DATE CREATOR Mon Mar 09 2015 Jan 19, 2015 - v1.0 initial set: InsuranceFlow & PhysPort Data Explorer Feb 26, 2015 - v2.0: added TestBase Assessments March 03, 2015 - v3.0: added intro March 8, 2015 - v3.1: anonymized clients DESCRIPTION VERSION HISTORY Sandy Martinuk Portfolio v3 Sandy Martinuk Owner, Cognition Technology UX Design Portfolio 2. Sandy Martinuk | UX Design Portfolio Introduction Created by Sandy Martinuk Page 2 of 33 Hi, my name is Sandy and I've been an independent UX Designer since 2011. I'm fascinated by perception, motivation, and decisions, and passionate about design that improves peoples quality of life. My varied career lets me bring a breadth of perspective to my work. As a PhD student, I used quantitative and qualitative research methodologies to study how students' framing and engagement, and to assess impacts of reforms. I honed my practical empathy skills, and worked with diverse teams to facilitate consensus on a new models. Since joining the UX eld in 2011, I've rened my research and design skills with a variety of products for consumers, enterprise, and education. My specialties are enterprise tools, complex workows, generative research, and usability testing. Introduction Researcher and independent project manager since 2007 UX designer since 2011 Background in engineering, teaching, and education research Specializing in complex workflows, enterprise tools, generative research, and usability 3. Sandy Martinuk | UX Design Portfolio Outline Created by Sandy Martinuk Page 3 of 33 In this portfolio I hope to give you a brief story about who I am as a designer. I'm going to tell this story through the window of a few case studies of my projects. Each case study will highlight the challenges, process, and solutions of a selected project. Featured Case Studies PhysPort Data Explorer Education client with large stakeholder team Managed a team of two designers for a 5 month contract Delivered research, personas, workows, and wireframes Outline PhysPort InsuranceFlow* Small insurance startup Worked solo on 7 week contract Delivered personas, workows, and desktop and mobile wireframes TestBase* International academic publisher Worked on a team of two designers for a 6 week contract Delivered research, personas, workows, and strategy *not the real company name 4. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Introduction Created by Sandy Martinuk Page 4 of 33 PhysPort Data ExplorerPhysPort Introduction PhysPort provides access to research-based teaching materials to help physics educators teach more effectively. The Physport team had received a grant to build tools to help instructors use assessments more effectively. Specically, they wanted to enable instructors to score, interpret, and act on the results of their research-based assessments by: helping instructors score their tests by giving them a tool where they could upload their raw data making it easier to interpret the results by letting them compare to their peers helping instructors understand the meaning of their results by offering tools for sophisticated analysis helping instructors nd teaching materials that are relevant to the specic problems identied in their assessments The team also wanted to use instructors' data to conduct research into the factors that lead to better learning. PhysPort asked me to help them design the Data Explorer: a website that would allow teachers to upload the results of their tests, visualize and analyze the results, and compare to the results of their peers. I led a team of two designers and managed the $74k budget for this ve month project. 5. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Challenges Created by Sandy Martinuk Page 5 of 33 Challenges To support their goal of conducting research and to offer relevant teaching recommendations, the PhysPort team wanted their users to specify information about their university, class, students, and teaching methods. The design needed to make it easy to ll out a lengthy form while uploading test results, and inviting to add additional info afterwards. The upload process needed to provide a smooth workow for single datasets as well as for large bulk uploads of data. The design needed protect professors' and students' anonymity and build trust so that faculty knew that their data would be protected. The visualization engine needed to offer simple results immediately, but also invite deeper exploration and analysis. It also needed to support diverse reporting needs, from looking at a single dataset for a novice user up to sophisticated reporting on an entire department's worth of data. 6. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - User Research Created by Sandy Martinuk Page 6 of 33 I remotely interviewed 10 physics faculty and department heads to uncover their needs and expectations around assessment. We assessed faculty's differing attitudes and needs around classroom assessment to construct personas. Process - User Research 7. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Personas Created by Sandy Martinuk Page 7 of 33 Based on user research, we constructed 5 personas and identied their key tasks and pain points. I facilitated strategy sessions with stakeholders to rene and prioritize personas. We decided to focus our design on three of the personas, summarized here. Process - Personas Personas Name Paul Raphael David Tim Marge Role Doubter Motivated Novice Benchmarker Seeker Proto-Researcher Occupation Key Quote "The entire assessment movement seems to ignore that we are already assessing out students" "... make it useful for the students. I mean at the end of the day, that's all I really care about." "The ability for faculty to compare what they are doing with other faculty would be really useful and spur them on to improve their teaching." "We're driven by data and cause and effect. If the data shows that the students are getting more out of the course, then that gives you reason to change." "It's hard to argue that you don't want data about what your students are learning in your class." Goals & motivations Not convinced that PER techniques offer anything more than traditional/current methods Assessment to reaffirm validity of current teaching methods External pressures for assessment. Thoughtful teacher who cares about student learning. Traditional background or new to teaching. Acknowledges that there are challenges with traditional teaching/assessing methods. Time-pressured Interested in the result of assessment: the number. Running assessment to compare results. Pragmatic optimizer. Prefers summary information. Generally curious and interested in student learning improvement. Asks questions which lead to change / improvement. Wants to find suitable existing tools. Internally motivated. Has questions or needs beyond PER. Wants to assess new aspects of students understanding / development. Has a strong need to do more analysis of assessment results. ! Raphael, the Motivated Novice needs the site to be simple and straightforward. He needs clear results, and actionable insights. We developed our recommendations with Raphael in mind. David, the Benchmarker, just wants to get the score for his assessment as quickly as possible. The result needs to be quick and obvious, but we also want to give him easy ways to dig deeper. Tim, the Seeker, is looking for a deeper understanding of his results. He wants sophisticated tools for detailed reporting, and for comparing across many datasets. He likely already has lots of data waiting to upload. We didn't design for Marge, as her needs are already met by her existing tools. We didn't design for Paul, as he isn't very interested in assessments. 1 23 8. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Example Workow Created by Sandy Martinuk Page 8 of 33 Ideal Usage Flows: RAPHAEL (Motivated Novice) What do my assessment results mean? Home% Compare%with%students%like%mine% Data%% Visualizer% % CASE:&&unveried/unregistered&user& Data%% Visualizer% Upload% Wizard% 1% Upload% Wizard% 2% Upload% Wizard% 3% Upload% Wizard% 4% File%upload% Assessment% info% Conrm% columns% Other%InformaDon:% School% Teaching%method% Demographics% Examine%InterpretaDons% Share/%Print% Students%like% mine%on%by% default% InvitaDon%to%add%more%data% Compare%to%students%like%mine% Enrich%data%set% Split%data%set% Other%InformaDon:% School%(required)% Teaching%method% Demographics% UConrmaDon% UCreate% Username/% Password% If%servic we%resu se %Can unveri Can Studen to%an%un I facilitated working sessions with stakeholders to identify 13 high- priority workows which address each persona's key needs and pain points. This example slide shows the workow for Raphael to upload and visualize his assessment result. Slides like this one were used to anchor discussion with the stakeholder team and drive consensus around the ideal solutions. Process - Workows 9. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Sketching Workshop Created by Sandy Martinuk Page 9 of 33 Process - Sketching Workshop After clarifying the personas and their needs, it was clear our users were very excited about charts! To generate ideas for our visualization engine we facilitated a full-day sketching workshop with the stakeholder team. Key functions and ows within the visualizer were tackled one at a time. Small teams produced sketches that were discussed and rened through several rounds of critique. 10. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Usability Testing Created by Sandy Martinuk Page 10 of 33 Process - Usability Testing We constructed preliminary wireframes and build them into an InVision interactive prototype. This prototype was used for usability testing with 8 participants. All major workows were validated (although of course we made some tweaks). 11. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Data Explorer Wireframe Created by Sandy Martinuk Page 11 of 33 The Data Visualizer is the main interactive display of users' assessment results. This view foregrounds the chart and key result in a simple and straightforward way to meets the needs of our novice personas. However, it also invites exploration and provides sophisticated reporting tools for our advanced persona. Solutions - Data Visualizer Wireframe Tabs provide quick shortcuts to invite exploration of other reporting tools Chart is featured - people came here to see their data! Primary action lets users discover that this tool can handle lots of data at once Prominent summary of score for Benchmarker Interactive axis controls invite exploration of other perspectives on data In-context recommendations provide suggestions for action and invite users to explore the rest of the site Aggregated, anonymized data from other contributors is used to construct "Students Like Yours" and "National Median" data 12. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Annotations Created by Sandy Martinuk Page 12 of 33 Solutions - Wireframe Annotations To fully specify this highly-interactive project we produced a total of 49 wireframes to document 19 distinct screens with associated menus, overlays, and interactions. Here are some samples of the wireframes we produced to show: 1. Main navigation 2. Onboarding tips 3. Axis menus 4. Hover effects 1 3 2 4 13. Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Outcomes Created by Sandy Martinuk Page 13 of 33 "Sandy's designs are clean and clear, a difficult task for such a highly complex, interactive site. He works closely and very well with other team members. I'm very pleased at how the project team, with Sandy's help, works on design, content, and usability together. I would be pleased to have Sandy on any research, development, and design project." Ginny Redish Data Explorer External Supervisor Author, "Letting Go of the Words" "Sandy's team has helped us to transform a very complex problem into a clear and powerful design. He helped us to clarify the Data Explorer into something that will be incredibly valuable (and usable) for teachers nationwide. I am extremely excited about this project, and would recommend working with him to anyone." Sam McKagan Director, PhysPort American Association of Physics Teachers Outcomes The designs were completed in January of 2014 and were reviewed by an external usability expert. The prototype has been featured at national and international conferences, and educators are eager for its launch. The project is currently under development and is expected to launch its beta by fall 2015. 14. Sandy Martinuk | UX Design Portfolio Interlude - the power of prototyping Created by Sandy Martinuk Page 14 of 33 Interlude - the power of prototyping I have been exploring the power of prototypes and videos for documentation Click the video or see for an example 0:00 / 4:59 15. Sandy Martinuk | UX Design Portfolio InsuranceFlow - Introduction Created by Sandy Martinuk Page 15 of 33 InsuranceFlow* Introduction InsuranceFlow is a small startup that offers a B2B insurance marketplace for specialized kinds of health insurance. Their existing app mediates transactions between Insurance Administrators and Insurance Providers. The general life cycle of the transactions is: Administrators publish RFPs Providers review the RFPs, and submit quotes for some of them The Administrators review the submitted RFPs and choose one for their clients This exchange is traditionally done via person-to-person communications withe established business relationships. InsuranceFlow asked us to help them add functionality to their marketplace that would encourage and enable their users to move beyond established business relationships and interact with a much larger pool of users. *Not the real name of the company 16. Sandy Martinuk | UX Design Portfolio InsuranceFlow - Challenges Created by Sandy Martinuk Page 16 of 33 Challenges The key goal of the design changes is to enable users to interact with a large marketplace of RFPs and Quotes. To avoid email overload in this larger marketplace, we needed to enable for one-to-many communication to answer questions about the RFPs and Quotes (rather than emails or phone calls). We also needed to provide the Insurance Administrators with tools to shortlist and compare large numbers of Quotes. It was also important to support users' existing practices of working with a small number of trusted partners, while encouraging them to develop new business relationships. 17. Sandy Martinuk | UX Design Portfolio InsuranceFlow - Process Created by Sandy Martinuk Page 17 of 33 Process Worked as solo UX contractor to conduct discovery, strategy, wireframing, and project management Managed all client interactions, project schedule,...