Transcript
Page 1: Sandy Martinuk UX Design Portfolio v3.1

Sandy MartinukMODIFICATION DATE

CREATORMon Mar 09 2015

Jan 19, 2015 - v1.0 initial set: InsuranceFlow & PhysPort Data ExplorerFeb 26, 2015 - v2.0: added TestBase AssessmentsMarch 03, 2015 - v3.0: added intro March 8, 2015 - v3.1: anonymized clients

DESCRIPTIONVERSION HISTORY

Sandy Martinuk Portfolio v3

Sandy MartinukOwner, Cognition Technology

UX Design Portfolio

Page 2: Sandy Martinuk UX Design Portfolio v3.1

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 field in 2011, I've refined my research and design skills with a variety of products for consumers, enterprise, and education. My specialties are enterprise tools, complex workflows, 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

Page 3: Sandy Martinuk UX Design Portfolio v3.1

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, workflows, and wireframes

Outline

PhysPort

InsuranceFlow*

⁃ Small insurance startup

⁃ Worked solo on 7 week contract

⁃ Delivered personas, workflows, and desktop and mobile wireframes

TestBase*

⁃ International academic publisher

⁃ Worked on a team of two designers for a 6 week contract

⁃ Delivered research, personas, workflows, and strategy

*not the real company name

Page 4: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Introduction Created by Sandy Martinuk

Page 4 of 33

PhysPort Data ExplorerPhysPort

IntroductionPhysPort 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. Specifically,

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 find teaching materials that are relevant to the specific problems identified 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 five month project.

Page 5: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Challenges Created by Sandy Martinuk

Page 5 of 33

ChallengesTo 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 fill out a lengthy form while uploading test results, and inviting to add additional info

afterwards.

The upload process needed to provide a smooth workflow 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.

Page 6: Sandy Martinuk UX Design Portfolio v3.1

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

Page 7: Sandy Martinuk UX Design Portfolio v3.1

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

identified their key tasks and pain

points.

I facilitated strategy sessions with

stakeholders to refine 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

Page 8: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio PhysPort Data Explorer - Example Workflow 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:&&unverified/unregistered&user&

Data%%Visualizer%

Upload%Wizard%

1%

Upload%Wizard%

2%

Upload%Wizard%

3%

Upload%Wizard%

4%

•  File%upload%•  Assessment%

info%

•  Confirm%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%

UConfirmaDon%UCreate%Username/%Password%

If%service%is%interrupted%can%we%resume%session%with%only%

session%cookie?%

%Can%we%show%unverified%users%any%

data?%

Can%we%show%“Students%Like%Mine”%to%an%unverified%user?%

I facilitated working sessions with

stakeholders to identify 13 high-

priority workflows which address

each persona's key needs and

pain points.

This example slide shows the

workflow 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 - Workflows

Page 9: Sandy Martinuk UX Design Portfolio v3.1

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 flows within the

visualizer were tackled one at a

time. Small teams produced

sketches that were discussed and

refined through several rounds of

critique.

Page 10: Sandy Martinuk UX Design Portfolio v3.1

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 workflows were validated

(although of course we made

some tweaks).

Page 11: Sandy Martinuk UX Design Portfolio v3.1

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

dataIn-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

Page 12: Sandy Martinuk UX Design Portfolio v3.1

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

Page 13: Sandy Martinuk UX Design Portfolio v3.1

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 McKaganDirector, PhysPortAmerican Association of Physics Teachers

OutcomesThe 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.

Page 14: Sandy Martinuk UX Design Portfolio v3.1

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 http://quick.as/gQqps53a for an example

0:00 / 4:59

Page 15: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Introduction Created by Sandy Martinuk

Page 15 of 33

InsuranceFlow*IntroductionInsuranceFlow 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

Page 16: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Challenges Created by Sandy Martinuk

Page 16 of 33

ChallengesThe 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.

Page 17: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Process Created by Sandy Martinuk

Page 17 of 33

ProcessWorked as solo UX contractor to conduct discovery, strategy, wireframing, and project management

Managed all client interactions, project schedule, and $50k budget

Interviewed stakeholders to identify personas and ideal workflows

Used rapid iterations and sketching to develop desktop and mobile wireframes for 4 key user stories for the

Insurance Administrator and Insurance Provider personas

Focused on clarifying implicit and explicit communication between admins and RFPs. The metaphor of "passing the

ball" back and forth emerged, and it was clear design needed to foreground that

Worked with clients' developers who coded the front end as we went along to provide timely feedback and design

adjustments as needed

Page 18: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Personas & Workflows Created by Sandy Martinuk

Page 18 of 33

The need for secrecy and speed

prevented extended discovery on

this project, so we relied on

stakeholder interviews to identify

personas and workflows.

I facilitated strategy sessions with

the stakeholders to clarify the

requirements and prioritize the

workflows.

Process - Personas

Page 19: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Example Workflow Created by Sandy Martinuk

Page 19 of 33

This workflow is for an insurance

administrator reviewing quotes.

Detailed comparison of quotes is

very complex, but an initial short-

list can be created by comparing a

few key metrics.

This workflow demonstrates initial

review of ongoing RFPs, creation

of a shortlist of quotes for a

particular RFP, and finally detailed

comparison of shortlisted quotes.

Process - Workflows

Page 20: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Administrator Dashboard Created by Sandy Martinuk

Page 20 of 33

This wireframe provides an

overview of all open RFPs and

their associated insurance types

(or "products").

Insurance administrators can

review progress of each RFP at

collecting quotes, and drill down

to review quotes in more detail.

This wireframe includes some

visual design elements to

represent the colors of an ongoing

re-branding.

Solutions -Administrator Dashboard

A Q&A mechanism allows Administrators to answer questions on any RFP, which are then visible to the entire marketplace

Dashboard lets administrator manage large numbers of RFPs and decide when to drill down to compare and select quotes

Page 21: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Administrator Quote Overview Created by Sandy Martinuk

Page 21 of 33

This page allows broad

comparison of quotes via a few

key metrics.

Primary action (comparison of

quotes) is clearly called out.

Filter toggles allow a focus on

"preferred providers", allowing

administrators to maintain

existing business relationships.

Solutions - Quote Overview

"Preferred Providers" feature allows marking favored business partners

View toggle lets administrators quickly switch between only seeing quotes from preferred business partners or from the entire marketplace

Page is clearly laid out for comparison of a few quote characteristics. Bold primary action invites user to proceed to a more detailed quote comparison

Page 22: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Administrator Detailed Quote Comparison Created by Sandy Martinuk

Page 22 of 33

Multiple Primary Actions

Solutions - Detailed Quote Comparison

After

Before

Single Primary Action

Jumbled column alignment

Consistent column alignment

High priority metrics buried at bottom of list

High priority metrics at top of list

Multiple, confusing column actions

Single, clear column action

Uses X to represent removing a quote from comparison

Uses X to represent removing a quote from comparison

Page 23: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Mobile Wireframes Created by Sandy Martinuk

Page 23 of 33

Solutions - Mobile Wireframes

The mobile wireframes enable users to quickly review the larger number of RFPs and quotes, and enable quick

communication. Here are a few key screens that enable the Insurance Provider stay on top of new RFPs.

Overview of new RFPs to help

manage larger marketplace

Insurance Provider Dashboard RFP List (filter panel open)

RFP Details (Q&A panel open)

Activity stream to stay current with communications

Quickly focus on preferred business

partners

Search-then-ask Q&A flow to

reduce duplicate communication

Quick actions for processing new

RFPs

Filters allow providers to focus on their preferred

niche

1 2 3

Page 24: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio InsuranceFlow - Outcomes Created by Sandy Martinuk

Page 24 of 33

"Working with Sandy was an absolute pleasure. Not only are his design skills terrific, but his ability to facilitate design meetings and work with end users to truly understand their needs and desires (even when they have a hard time articulating what they are trying to say) might be even more valuable. I can't speak highly enough of Sandy and I really look forward to being able to work with him again someday"

Mike Farley President & Co-Founder of InsuranceFlow, Inc

OutcomesThe project was completed in

summer of 2014.

InsuranceFlow developed the front-

end designs immediately.

Implementation is underway, but is

currently suspended pending the

acquisition of the company.

Page 25: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio TestBase - Introduction Created by Sandy Martinuk

Page 25 of 33

IntroductionTestBase is an international academic publisher that offers a variety of different online assessments which enable

teachers and administrators in K-12 education to monitor their students and programs.

These assessments are used by a variety of district and school personnel to plan, schedule, conduct, and report on

tests.

Because many of their current assessments were acquired by purchasing other companies they are hosted on different

platforms which overcomplicates the experience of their users.

ChallengeTestBase asked us to help them plan a centralized platform for hosting all of their online assessments. They needed

an understanding of how to build a system that would meet the core needs of their diverse users, address the pain

points of their current system, and they needed a strategy for designing and developing it.

TestBase*

*Not the real name of the company

Page 26: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio TestBase - Product Life Cycle Created by Sandy Martinuk

Page 26 of 33

We interviewed 10 stakeholders

and 5 users to develop an

understanding of the existing

products.

To frame our understanding of the

users' experience of the entire

product, we developed a

representation of the product life

cycle.

This cycle enabled us to clarify the

various business and user needs

at different stages, and to clarify

the roles and interactions of each

persona

Process -Product Life Cycle

Page 27: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio TestBase - Personas Created by Sandy Martinuk

Page 27 of 33

We developed four key personas,

1. District Administrator

2. School Administrator

3. Principal

4. Teacher (shown here)

We illustrated each persona's

engagement with each phase of

the product life cycle. Because

coordination between user types

is so important, we also called out

the key interactions between

personas during each phase of

the life cycle.

Process - Personas

Page 28: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio TestBase - Pain Points Created by Sandy Martinuk

Page 28 of 33

Based on our research, we

identified the key pain points for

each persona within the product

life cycle.

We used the pattern in pain points

to inform the overall strategic

recommendations as well as the

specific workflows.

Process - Pain Points

Page 29: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio TestBase - Design Principles Created by Sandy Martinuk

Page 29 of 33

We identified three design

principles that address patterns in

the pain points in TestBase's

existing products.

These principles are based on

broad areas of weakness in

TestBase's existing user

experience, and as such offer

opportunities for improvement

across personas and workflows

throughout the product cycle.

Solutions - Design Principles

Page 30: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio TestBase - Workflows Created by Sandy Martinuk

Page 30 of 33

We identified the highest-priority tasks for each of the personas, and developed 10 key workflows to illustrate them.

In addition to using best practices in UX design, we incorporated

our key design principles into each workflow in order to eliminate the users' pain points.

Here we show the workflow for a teacher reviewing the results of an assessment and planning student interventions to address any issues.

Solutions - Workflows

Communication is foregrounded - it's easy to generate and send reports to parents.

Offering appropriate curricular materials in context as well as tools for contacting other school staff make it easy for teachers to engage with the results of their assessments

Page 31: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio TestBase - Strategy Created by Sandy Martinuk

Page 31 of 33

To allow the client to build out this

project in smaller pieces, we

recommended designing the site

in modules of related workflows.

This approach enables the client

to design, construct, and test

smaller portions of the site in an

agile fashion.

Solutions - Strategy

Page 32: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio TestBase - Outcomes Created by Sandy Martinuk

Page 32 of 33

OutcomesTestBase's stakeholders were very pleased with the report, which was delivered in November 2014.

At the moment, they are making use of the report to secure internal funding for further design and development of their

next-generation assessment platform.

Page 33: Sandy Martinuk UX Design Portfolio v3.1

Sandy Martinuk | UX Design Portfolio Conclusion Created by Sandy Martinuk

Page 33 of 33

In my pursuit of elegant solutions, I bring the following skills to bear:

⁃ I am an expert Facilitator, and skilled at asking the right questions to

uncover assumptions and objectives

⁃ I am a versatile Researcher, and adept at using multiple methodologies

⁃ I have a proven track record as a Project Manager, with large budgets

and quick deadlines

⁃ I am a capable Designer of complex experiences for desktop and mobile

⁃ I am a keen Strategist with a passion for finding the win-win solutions that

benefit both the business and the consumer

Please don't hesitate to contact me if you have any questions or feedback on

my portfolio.

So what am I bringing to these projects?

Design

ResearchFacilitation

Project Management

Strategy

[email protected]

http://ca.linkedin.com/in/sandymartinuk

@cognitiontec


Top Related