Shannon Holloway - UX Portfolio

1

UX DESIGN PORTFOLIO

SHANNON HOLLOWAY

Shannon Holloway - UX Portfolio 2015

Welcome!

2

Welcome to my UX Portfolio where you can find out more about me and my work.

Here’s a user’s guide to this experience!

About Me

Skills + Tools

Case Study #1: Pearson

Case Study #2: Bluefly

Case Study #3: CredSpark

Contact

3

5

6

17

28

35

Shannon Holloway - UX Portfolio 2015 3

Self-portrait at age 16 Self-portrait at age 26

About MeAfter receiving my degree in the Practice of Art from UC Berkeley I moved to New York City to pursue my artistic dreams with a day job in finance.

Over time it became harder to unplug from my professional life and I spent a lot of time thinking about how my brain was being rewired to behave like a computer rather than computers being designed for humans. I’ve long been fascinated by the impact of technology on society as revealed in my artwork over the years.

Working in venture capital allowed me to understand the landscape in developing new technology and I wanted to get involved.


That is how I discovered user experience design and left finance to make our digital world a better place.

I am passionate about human-centered design and creating solutions that help people in their daily lives.

My art background provides a solid foundation in design thinking. I’m continuously learning and growing my skills through experience, research, and as an active member of various Meetup groups where I share ideas and best practices with other UX professionals.

4


Skills + Tools

5

• Stakeholder Workshops

• Information Architecture

• Rapid Prototyping

• User Flows

• Research

• Competitor Analysis

• Personas

• UX Strategy + SEO

• Operations Management

• Agile Development Process

• Omnigraffle

• Balsamiq

• Invision

• Axure

• Google Analytics

• Adobe Creative Suite

• HTML, CSS, JavaScript

• Python

• Ruby

• Xcode

• Pivotal Tracker, Rally

PEARSON

CASE STUDY #1

6


The Pearson System of Courses is a comprehensive tablet-based tool for K-12 education aligned with Common Core State Standards.

My responsibilities as UX Lead included overseeing design implementation for K-1 and 2-12 apps for iOS and Win8, onboarding and managing a team of designers, and integrating agile UX process improvements.

7


Define: Pearson UX creates

initial wireframes and user flows

New Development Process after Feb 20, 2015

(SME / Pearson)

Pearson Product Team works directly with the SMEs to gather pedagogical requirements

Deliver: Pearson UX provides: • Annotated

wireframes • Mockups & Specs

PSOC Process Flow3/02/15 5

2 4

Discover: Pearson UX gathers

requirements: • Business - POs/BAs •Technical -Architects • Pedagogical - SMEs

1

SMEs

Get SME approval on final

wireframes only if

pedagogy is involved.

Review: Verify designs fit business goals,

technical constraints, and

pedagogical vision

3

Agile UX ProcessOperations management, process flows

8

The transition from agency to in-house design afforded improvements to the product development process, involving the product team to vet designs before moving to the build phase.

Pearson UX: Re-designs wires/

specs/visual assets to fit technical requirements

Create wireframes / specs that satisfy SME

requirements

Current Development Process through Jan 30, 2015

(SME / Agency / Pearson)

AGENCY

AGENCY

SMEs

SMEs & Agency determine the vision of the project

Build Teams: Start building with Possible docs and

discover not feasible/incomplete

Launch Delays: Unplanned design updates push out

scope

PSOC Process Flow2/23/15 1


Stakeholder WorkshopsRequirement gathering, wireframes, user flows

9

I worked closely with pedagogical Subject Matter Experts [SMEs] to ensure both the teacher and student experience fit their vision of a digital classroom integrating Math and ELA curriculum, assessment, reporting and classroom management tools.

PAGE 24Thu Feb 05 2015

TEST TUNNEL / CONSTRUCTIVE RESPONSE (Check Answer)

Exercise: L1. Exploring Large Numbers

SUMMARY

Question 2 of 20

3a4

1 2

7 8 9

3b

NextPrevious

CHECK ANSWER

6

System Tray / App bar disabled here.

1. Nav Bar - Note: contains no buttons.

2. Exercise Title

3. Flag Icon - On tap, toggles flag state from Flagged to Unflagged.

3a. Unflagged state3b. Flagged state

4. Summary button - On tap, drives to Assessment Summary page.

5 Question Content - May not be able to be formatted.

6. Check Answer button - Allows the user to review a sample answer to compare their work with.

7. Previous button - Displayed only if there is a previous question. On tap, jumps to previous question.

8. Question Number - Displays the number of the question and the total number of questions.

9. Next button / Review and Submit button - Next button displayed if there are subsequent questions. On tap of Next button, jumps to the next question. Review and Submit button displayed on the last question. On tap, drives to Assessment Summary page.

5

Look at the graph of this line:

Write an equation in both slope-intercept form and standard form for the line.


PAGE 5Fri Feb 06 2015

TEST TUNNEL USER FLOW TEST TUNNEL USER FLOW

open exercise from lesson

browser

answer question on device check answer is the answer

correct?revisit question (2nd attempt)

open question from assessment

summary answer question

on paper self score open next question

revisit question (read only)

is the answer correct?

fixed response

open ended response

yes

no

A

yes

no

answer question on paper

constructive response

A

In this example SME input was critical in the development of the Exercises assessments, which needed to accommodate various content types and user interactions. This user flow solved for fixed and open response questions as well as student self-reflection for constructed response items.


Team WorkflowProject management, storyboarding

11

I lead design team standups to track progress across 10 scrum teams and handle any blockers, facilitated team collaboration using Trello boards, and storyboarded features to prepare deliverables for sprints.


Rapid PrototypingGroup sketching, vetting, and iteration

12

Rather than lob wireframes over the fence, I encouraged the team to sketch in order to quickly elicit feedback from product owners, architects and developers and iterate on the design.


PAGE 10Mon Mar 02 2015

REPORTS SYSTEM MAP - TeacherREPORTS SYSTEM MAP - Teacher

2. Group Overall Report

3A. Contextual Roster Report

3B. Group Unit x Unit Report

3C. Contextual Areas of Focus

Report

4B. Assessment Report List

4A. Student Portfolio Report

5A. Student Assessment

Report

4C. Area of Focus Domain

Report

7. View Student Item Response

1. Reports Home

5B. Group Assessment Summary

Report

6B. Group Assessment

Item Analysis

5C. Area of Focus Cluster

Report

User selects Reports from System Tray

Modified3/02/2015

Assessment ReportsSystem maps, content hierarchy

13

A key feature for the Back to School release was the assessment reporting system, designed for teachers to monitor student performance over time and by consortia standards.

AREAS OF FOCUS HIERARCHY - ELA

35PEARSON +

?

?

?

Children Informational

TextLiterary Text Language in

Reading

Reading Writing Listening /Speaking

Conventions of Standard

EnglishKnowledge

of LanguageWriting Language in Writing

ELA

Comprehen-sion &

Collaboration

Presentation of

Knowledge and Ideas

Language in Listening

Actions & Guidance

Guidance - Mastery

Guidance - Proficient

Guidance - At Risk

Guidance - Bubble

Guidance - Below

Standard

Key Ideas & Details

Craft & Structure Vocabulary

Language in Writing

about Reading

Language in Opinion/Argument

Language in

InformationLanguage

in NarrativeWriting Language in Writing

Opinion & Arguments Information Narrative

Language PARCC/SBAC

Depth of Knowledge

1 2 3 4

Key Ideas & Details

Craft & Structure

Not for Back to School

Not for Back to School

follows structureas determinedby consortia



REPORTS - Navigation

Assessment Item Analysis

Quiz 5: Grade 8 Math Section 4 Last updated: 2/26/15 at 5:10pm

1

Back

2 3

Top Navigation for Reports

1. System Tray - On tap, displays System Tray menu at left of screen.

2. Back button - On tap, takes user to previous screen.

3. Report Title

4. Browse Reports icon - On tap, displays drop-down menu that allows the user to navigate to another Report for the same Section.

5. Group Identification - Identifies which Grade and Section the user is currently viewing.

5a. Naming convention - For all Reports: Grade # Math/ELA Section #.Within specific Assessment: Assessment Name #: Grade # Math/ELA Section #5b. Drop-down menu - On tap, displays drop-down menu that allows the user to select another Section within that Grade.

6. Last Updated - Displays the date and time content was last updated in format shown: MM/DD/YY at HH:MM am/pm

7. Refresh button - On tap refreshes content.

4

5b 6 75a

While reviewing upcoming work I identified efficiencies, risks and dependencies and proposed solutions with limited changes to the original designs. This navigation enhancement for the reports system delivered a more consistent and discoverable experience across platforms while leveraging existing functionality to reduce dev team effort.


REPORTS - Navigation Menus

Domain Details

Grade 8 Math Section 4 Last updated: 2/26/15 at 5:10pm

BackTop Navigation for Reports - Menus

1. Group Identification - Identifies which Grade and Section the user is currently viewing. A teacher may have up to 5 Sections within a group. Naming convention - Grade # Math/ELA Section #

1a. Menu title - Course Summary 1b. Unselected state 1c. Selected state

2. Browse Reports icon - On tap, displays drop-down menu that allows the user to navigate to another Report for the same Section.

2a. Menu title - Browse Reports2b. Unselected state 2c. Selected state

6 7

Browse Reports

Overall Report

Areas of Focus

Student Roster Report

Assessment List

Grade 8 Math Section 1




Course Summary1a


Unit Performance

1c

2c

2a

2b

1b

2

1

2. Teacher taps on “Section 1,” data in report below updates, but panel remains open to allow tap-thru of sections.

3. Teacher taps close button or on report below to collapse section selector. Tapping on group name reopens panel.

1:25 PM 45%iPad

1:25 PM 45%iPad

1:25 PM 45%iPad

Overall Report

Overall Report

Overall Report

Current Year | All EventsGrade 8 Math: All Sections

Current Year | All EventsGrade 8 Math: Section 1

Current Year | All EventsBack Grade 8 Math: Section 1

Course Summary Section 1 Section 2 Section 3 Section 4 Section 5 Section 6


3:12 PM 45%iPad

Overall Report

Grade 8 Math: Section 1 Current Year | All Events

Overall, how are my students doing so far?

Overall Course Performance

View Unit Performance >At RiskCourse So Far

Assessed Units:

5.5 Units

How are my students doing by areas of focus?

How are my students doing by Domain? >

Back

Back

Back

ADVANCED FILTER SET (NOT FOR BTS)

47PEARSON +

For future designs, Section Selection Tray could scale and have an advanced filter set with more robust options.

1:25 PM 45%iPad

Overall Report

Current Year | All EventsGrade 8 Math: Section 1

Back


MathELA

All Assessments Exercises Quizzes End of Unit Projects Proficiency Games Interactives

All Units Unit 1 Unit 2 Unit 3 Unit 4 Unit 5 Unit 6 Unit 7 Unit 8 Unit 9 Unit 10 Unit 11 Unit 12


PAGE 9Tue Mar 03 2015

GROUP ASSESSMENT ITEM ANALYSIS

Vert

ical

ly s

crol

labl

eVe

rtic

ally

Fix

ed

Horizontally scrollableHorizontally Fixed

Assessment Item Analysis

Quiz 5: Grade 8 Math Section 2

At RiskOverall Class Score:

Assessment Key

Group-Wide % Correct

Primary Cluster ID

22

1 2

D 1 -2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

1✕

✕ ✕ 0 0 ✕ ✕ 0 ✕

0

✕ ✕ ✕ ✕

70% 60% 60% 40% 95% 35% 72% 70% 70% 60% 60% 40% 95% 35% 72% 70%

0 ✕ ✕

✕

0 ✕ 0 ✕ ✕ ✕ ✕

2 2 2 2 1 4 2 2 2 3 1 2 2 2 1 1

2 1 11 11

22 43 11 13 242 1 2 1 2

CBC - -B -D -A AAA C

1

1 1 12 11 131

111121

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

2

A B C B A

B

CB C 0

70% 60% 60% 40% 95% 35% 72% 70% 70% 60% 60% 40% 95% 35% 72% 70%

B A D

A

C A C C B B C A

1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6 1.G.6

Fran Healy

Frank Herbert

Kenny Jakobson

Trevor Kelliman

At Risk

Scoring Required

Not Proficient

Not Scored

Proficient

Last updated: 2/26/15 at 5:10pm

Not ProficientAll Students At Risk Proficient Not Scored

Back

1a

2

Not ProficientOverall Class Score:

ProficientOverall Class Score:

2

2

Arrived at by tapping on the View Item Analysis button on the Group Assessment Summary Report page.

1. Performance Category Tab - Tapping a tab displays the respective filtered view. Default tab All Students unless accessed by a specific CTA on Class Assessment Report page.

1a. All Students tab (shown selected state) - Displays all students and the results to all their questions.1b. Not Proficient tab1c. At Risk tab1d. Proficient tab1e. Not Scored

2. Class Proficiency Status - Read only display of Class Proficiency with color coded background.

3. Question Number

4. Group Wide Percent Correct - For each question, lists the percentage of ALL Scored students who received points in the proficient category. Not related to Performance Category filter.

5. Primary Cluster ID

6. Point Value - Lists the point value for each question.

7. Correct Value - Displays correct answer for each question.

7a. Fixed Response - Displays the correct multiple choice answer for fixed response questions7b. Open Response - Displays “-“ for open response items where data cannot be formatted for display

8. Student Row - Row order: alphabetical, student last name. Contains the following components pertaining to each student:

8a. Student Name8b. Student Proficiency - The student's proficiency on the assessment along with color coded proficiency icon.

9. Question Score Tile - Displays the students score per question. On tap of tile, take user to View Student Response Item.

9a. Correct Score - Displays check mark9b. Incorrect Score - Displays incorrect student response in red 9c. Partial Score - Displays number of correct points out of the total.9d. Not Scored - Blank tile for questions that have not yet been scored.

4

5

8

1b 1c 1d 1e

1

8a 8b

9

Question Score Tiles

Discrete Solution

Correct Incorrect Non-zeroScore

Not Scored

Correct Score

B

Incorrect Score

9a 9b 9c

Point Value

Correct Value

6

7

Susan Woo

3

2

Partial Score

9d

7b7a

Modified3/03/2015

Along with the top navigation update across the reports system I standardized performance indicators, both display and naming conventions, to provide teachers a more intuitive way to navigate the system as a whole as well as group assessment and individual student reports.


PAGE 6Tue Feb 10 2015

MODAL - Graphic Organizer / Global View

3

7

1

6

User taps "Save to Notebook" icon from Graphic Organizer chrome to load Notebook Picker Work Browser modal

1. Header - Select Notebook

2. Close Modal button

3. Viewing: All Notebooks3a. On tap - displays My Notebooks drop-down menu 3b. Default view - displays all Notebooks, with both Task Notebooks and Personal Notebooks selected

4. Sorted By4a. On tap - displays drop-down menu with options for Most Recent and Lesson 4b. Default view - Most Recent

5. List of Notebooks - Displays all available Notebooks within selected Filters.

6. Notebook Tile - One for each existing Notebook within selected Filters.6a. On tap - closes Modal overlay and takes user to Notebook view6b. Clipboard content - automatically pasted into next blank page of existing Notebook upon opening6c. Title - is editable. Refer to PSOC_iOS_Personal_Notes-Edit-2_20140529.jpg

7. Create Notebook - User can create a new Notebook that will NOT be tagged for Work Browser filtering

7a. On tap - closes Modal overlay and takes user to Notebook view7b. Clipboard content - automatically pasted into first page of new Notebook upon opening7c. Title - is editable. Refer to PSOC_iOS_Personal_Notes-Edit-2_20140529.jpg

8. Scroll bar - Displayed only if there is additional content

2

4

8

5

Board of Education SubmissionCross-functional and remote team collaboration

16

We faced strict deadlines and requirements to submit the product for instructional material adoption. Collaboration and clear communication with internal and external teams was key.

37PEARSON +

4.0 Handwriting / Resource Library MenuiPad

Lesson 2: Lorem Ipsum Eggyness

52%9:02 AM

LOREM IPSUM

Lorem Ipsum, Sit Amet Dolor

Unit 6

‹ 6 ›

Lorem ipsum dolor sit amet, consectetuer adipiscing , sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Delenit augue duis dolore te

feugait?• Est usus legentis in iis qui facit?

DescriptionAfter tapping on the Resource Library Icon in the header chrome:

1. The Resource Library menu contains buttons for Spelling, Vocabulary, Language Studies, Handwriting, Glossary, Rubrics, Graphic Organizer, Tools, and Games.

On tap of the Handwriting button, the the Teacher Resource Site (deep linked to the Handwriting Lesson Content) is displayed in a full screen overlay.

Resource Library

Spelling

Language Studies

Handwriting

Tools

Games

Vocabulary

Glossary

Rubrics

Graphic Organizer

1

BLUEFLY

CASE STUDY #2

17


Bluefly is a leading online retailer of designer, contemporary and private label apparel and goods. The site features over 750 brands and 35,000 products that attract 20+ MM unique visitors a year.

As the sole UX designer I work closely with product stakeholders and teams located in NYC and remotely to design a top-notch user experience.

18


DiscoveryCompetitor analysis, data analytics, interviews, personas

19

Since I had limited access to users I focused on 1x1 interviews with key stakeholders to understand business objectives, researching user data and the competitive landscape. I created personas to design with user

Persona - The Indulger | 1

Persona - The Fashionista | 1

Persona - The Status Seeker | 1


Bluefly Site Map June 2014Checkout User Flow

Thu Jun 12 2014

Creator

Modified

Shannon Holloway16 / 16

Shopping Bag

Checkout

PaypPal review your

informationPayPal Sign In

Signed In?

Shipping & PaymentAmazon Sign

In

Amazon authenticate connect with

Bluefly

Review Order

Sign In

Sign Up

Register

Welcome to Bluefly

Continue as Guest

Select a shipping address

Enter a payment method

Credit card: add card &

billing address

Place Your Order

Existing customer?

Yes

No

Yes

No

See PayPal checkout

see Amazon checkout

In my usability review I identified UX issues across the site, prioritizing gaps in the checkout and new customer onboarding experiences that were hurting conversion rates. I outlined these in process flows and user journeys.


Information ArchitectureTaxonomy, content hierarchy, navigation

21

The information architecture needed updating to support usability and findability. I reorganized the taxonomy establishing a more intuitive content hierarchy. The top navigation had confusing CTAs and flyout menus and an outdated look and feel. The new design provides an elegant and user-friendly solution, incorporating a chat functionality for an improved customer service experience and interactive elements to provide the user with feedback.


The restructured mega menus allow users to navigate deeper into the site directly and include areas for featured content to promote seasonal merchandise and drive user engagement.


UX Enhancements

There were UX issues site-wide that had to be addressed with a limited scope since a redesign was slated for the replatforming process a few months out. Here is an example of enhancing the

Sketches, wireframes, user flows, interactive prototypes


The tap-friendly design includes a faceted navigation that can handle the rapidly expanding number of brands and marketplace partners and 35,000+ products featured on the site.

24


Fall LaunchWireframes, interaction concepts

25

The skinny jeans were tight and the deadlines even tighter for our fall launch in unison with our presence on the ground at New York Fashion Week. I designed lookbook templates, designer boutiques, and a homepage takeover to engage our fashion-savvy users with editorial imagery and curated content.


Platform MigrationStakeholder workshops, information architecture

26

I worked on replatforming the Belle & Clive flash sale site with the tech team in NYC and a remote development team in Austin, TX. Stakeholder workshops were critical in determining the direction for the site and addressing a number of usability and branding issues. I led the workshops and delivered a site map, interaction concepts and wireframe templates.


I sketched out user journeys to define an authentication process that invites the user to browse but requires credentials to view details or make a purchase. The new design features a faceted navigation, more areas for editorial content to engage the user, and an elevated aesthetic more consistent with the Bluefly brand.

CREDSPARK

CASE STUDY #3

28


CredSpark is an ed-tech startup where users showcase their career-related skills and knowledge to help them stand out in a competitive job market.

I partnered with product stakeholders and engineers on the road map from minimum viable product to releasing 1.0.

29


DiscoveryStakeholder workshops, interviews, usability analysis

30

I spoke with product stakeholders and clients to understand the problem space and business objectives.

The site was content heavy and lacked structure. There were a number of usability issues including broken links and confusing calls to action.


ConceptingIdeation, user stories, low-fidelity sketches

31

After identifying the main product points I sketched out ideas for how they should function. This included layout, interaction concepts, and an IA structure that can accommodate new features as the product develops.

I worked directly with the engineers to develop user stories and UX enhancements, iterating with their feedback.


StrategyCompetitor analysis, content and brand strategy

32

CredSpark differentiates itself from the competition with original content created by experts in their respective fields that test harder-to-find skills. I devised a consistent branding strategy that establishes our own “cred” by featuring our notable experts and press mentions.

I identified product opportunities for sponsored content and spoke directly with clients about feature requests.


SolutionAnnotated wireframes

33

The responsive one-page design is clean and easy to navigate. New areas for sponsored content and new features such as topic tags on challenges and a search bar encourage user discovery.

The new release was able to generate revenue through banner sales.


Infographics, smaller groupings of content and clear calls to action make the site more approachable and clearly communicate the value proposition to the user.

When a user passes a challenge they receive a certificate that can easily be shared on social media to help them stand out for their skills.

34


Thank you for taking the time to review my UX portfolio.

Think we might strike a good match? I’d love to discuss further.

[email protected]

Contact

35

mailto:[email protected]

Design

Shannon Holloway - UX Portfolio