Top Banner
UX designer strategist and culture explorer
15

UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

Jul 13, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

1

UX designer strategist and culture explorer

Page 2: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

2

Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure

RP, Adobe Creative Cloud

NIKE - Global Brand MarketingDigital Asset and Brand Planning Management Tool

OverviewOn a three-member team doing UX/ UI for a new Global Brand Marketing digital asset and brand planning management system. Revitalized (working name) will replace three over-extended planning and management tools, integrating exist-ing features while improving upon the currently-used, but decade-old system. Scope of work includes: • Developing user stories into progressive-fidelity wireframes (Axure and PhotoShop);

• Presenting concepts and to key stakeholders;

• Interfacing with development team to support time/resource commitment in an

Agile environment;

• Creating custom asset libraries (Axure and Illustrator) and widgets for wireflows;

• Usability testing with internal product owners and users;

• Translating wires and usability findings into high fidelity comps and responsive design

templates ready for dev implementation.

• Designing and developing the Style Guide for Revitalized

3 44k 62sheets of

printable magnetsglobal usersperson UX

Page 3: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

3

Usage-Initial screen with defaultsREVITALIZED

SelectAsset Type: *

Audio

Video

Graphic Materials, no photo

Graphic Materials, photo

Photography

2.0

5.0

4.0

Number of assets selected.

Asset Type must be selected (see details for dropdown options), if not already selected on the Tags screen.

4.1 If user does not select an Asset Type, an error message appears after ‘Save & Continue’ is selected.

4.0

Manage Assets

TAGS PERMISSIONSUSAGE

SAVE USAGE & CONTINUE

SAVE & CLOSE

2.0

3.0

6.0

7.0 8.0

You have selected 2 assets to which to apply the following usage restrictions and contracts.

SelectAsset Type: * 4.0

Users must select one or more assets before they are able to manage assets.1.0

3.0

Thumbnails of selected assets. Functionality will mimic slider used in filmstrip view.

Manage Assets

TAGS PERMISSIONSUSAGE

SAVE USAGE & CONTINUE

SAVE & CLOSE

You have selected 2 assets to which to apply the following usage restrictions and contracts.

SelectAsset Type: *

4.1Please select an Asset Type.

Photographer/Videographer/Artist:

Photographer/Videographer/Artist:

6.0

User can select ‘Save & Close’ at any time and changes/selections will be saved and modal will close.

User can select the ‘X’ button to cancel and close the modal at any time. Any changes or selection made will not be saved.

User can select ‘Save & Continue’ at any time, but user will receive an error message(s) if required items have not been selected/filled in. See bottom example for specific messages. Once required items have been supplied, ‘Save & Continue’ takes user to ‘Permissions’.

7.0

8.0

5.0

Photographer/Videographer/Artist field is optional. Functionality mimics that of the photographer field in Tags:

5.1 As the user clicks in the text entry field, a fly out menu will appear with photographer/videographer/artist names (Names of all will display in the same menu.) Menu will be set to a max height and names that don't fit the vertical height will trigger a scrollbar. As user types the list of names will start to filter according to what the user types.

5.1

Usage-with Contract Type selectionsREVITALIZED

3.0

4.0

2.0

Broadcast / Cinema Online Media (OLM) Out of Home (OOH) Print Ad Digital Marketing

e.g. public displays, billboards, stadium perimeter boards

Note: Hovering over any field in the Pre-Approved Usage section will provide a ‘help tip’.

2.1

ASSET MANAGEMENT

TAGS PERMISSIONSUSAGE

You have selected 2 assets to which to apply the following usage restrictions and contracts.

PhotographyAsset Type: *

CC CONTRACT TYPE

1.1

Barber, TimPhotographer/Videographer/Artist:

SAVE USAGE & CONTINUE

SAVE & CLOSE

Paid

APPROVERS * Admin (default)

GEOGRAPHY All Global C & E Europe Emerging Markets Greater China Japan North America Western Europe

Paid Placement (Advertising): Unpaid Placement:

Broadcast / Cinema Online Media (OLM) Out of Home (OOH) Print Ad Digital Marketing

Retail Digital Marketing PR Print Collateral For-Sale Item Event

02-05-2018

02-05-2016Start Date:

End Date:

Dates Available for Unpaid: Dates available for Paid:

08-05-2016

02-05-2016Start Date:

End Date:

PRE-APPROVED USAGE

Available for internal use

1.0

02-05-2016Start Date:

Market Launch Date:

Require approval for all requested downloads (approvers will receive requests via email.)

These assets have the following restrictions, in addition to the contract, which will be displayed upon download:

Athlete Restrictions:

Marketing Restrictions:

R RESTRICTIONS

1.0 When user selects Contract Type from dropdown menu,

1.1 Pre-approved Usage and Geography fields fill out as shown in accompanying spreadsheet.

2.0 Hovering over any field in the Pre-approved Usage section

2.1 will cause a ‘help tip’ to appear.

3.0 Required Pre-approved Usage and Geography fields are dependent upon Contract Type selected, as shown in accompanying spreadsheet.

4.0Dates available for Paid are required if Paid Placement is selected. Dates can be filled in using the format mm-dd-yyyy (which displays in the date field), or by selecting a date from the calendar datepicker. Dates entered in other standard formats should be automatically converted to requested format. End Date auto-populates to 6 months from start date, but can be modified.

5.0Dates available for Unpaid are required if Unpaid Placement is selected. Dates can be filled in using the format mm-dd-yyyy (which displays in the date field), or by selecting a date from the calendar datepicker. Dates entered in other standard formats should be automatically converted to requested format. End Date auto-populates to 2 years from start date, but can be modified.

Market Launch Date is optional. It can be filled in using the format displayed in the ‘Start Date:’ field, or by selecting a date from the calendar datepicker. If filled in, the same date will auto- populate in the Paid/Unpaid start date fields (as applicable), but can be modified.

6.0

7.0 Approvers defaults to Admin (Kerri) at this time. Address book look and functionality is to be consistent across site - use same look and functionality as in library send/share.

5.0

7.0

1.1

1.1

1.11.1

2.0

4.06.0

8.0

Text that is input into the Athlete or Marketing Restrictions fields will appear in an ‘alert/agreement’ modal when assets are downloaded. Content and tone of modal is under review for consistency.8.0

User Flows, Wireframes, Annotations, Axure Prototypes

Shown is a series of progressive fidelity visuals used to connect stories, determine global navigation and treatment for dialogues and panels in the NIKE Revitalized web-based planning and management tool.User flows (left) resulted from a design studio (I got to plan and lead!) to work through navigation solutions.

Page 4: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

4

Dialogues and Fly-outs to Manage Assets

Sketch concepts and progressive fidelity wires showing iterations for primary users functions like managing digital assets and requesting usage permission. The project required balancing user need for contex-tually-building forms and tech requirement to limit number of server calls.

Page 5: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

5

ACTIONS SITES LIBRARY

Library Search

ASSET TYPE –Photography 1

CATEGORY –

Womens Training 1

CONTENT TYPE –

Apparel 1

Function +

Geography –

Global 1

Season –Spring 1

Year –2014 1

ACTIONS SITES LIBRARY

Library Search Download Preview Share Link Send File Print Create Collection

ASSET TYPE –Photography 1

CATEGORY –

Womens Training 1

CONTENT TYPE –

Apparel 1

Function +

Geography –

Global 1

Season –Spring 1

Year –2014 1

ACTIONS SITES LIBRARY

Download Preview Share Link Send File Print Create Collection

ASSET TYPE –Photography 1

CATEGORY –

Womens Training 1

CONTENT TYPE –

Apparel 1

Function +

Geography –

Global 1

Season –Spring 1

Year –2014 1

TAGS USAGE PERMISSIONS

Library Search

Women and sports

ACTIONS SITES LIBRARY

Download Preview Share Link Send File Print Create Collection

ASSET TYPE –Photography 1

CATEGORY –

Womens Training 1

CONTENT TYPE –

Apparel 1

Function +

Geography –

Global 1

Season –Spring 1

Year –2014 1

TAGS USAGE PERMISSIONS

ASSET TYPE –Photography 1

CATEGORY –

Womens Training 1

CONTENT TYPE –

Apparel 1

Function +

Geography –

Global 1

Season –Spring 1

Year –2014 1

SITES LIBRARY

Search

ACTIONS

Download

Preview

Share Link

Send File

Print

Create Collection

Women and sports

FILTERS

– ASSET TYPE

Photography 1026

– CATEGORY Womens Training 126

– CONTENT TYPE Apparel 72

+ FUNCTION

– GEOGRAPHY Global 54

– SEASON Spring 121

– YEAR 2014 767

REVITALIZED Welcome Sally Smith

SECOND TIER Section A Section B Section C Site Page 1 Site Page 2 Site Page 3

HOME EVENTS | DELIVERABLES LIBRARY

ACTIONS

Select All

Select None

Share

FPO:

FPO: Nav heading names and Actions

MANAGE ASSETS

TAGS USAGE

SAVE & CLOSE SAVE & CONTINUE

Search

ACTIONS –

Preview

Download

Share

FILTERS –

ASSET TYPE –

Photography (1026)

CATEGORY –

Womens Training (426)

CONTENT TYPE –Shoes (1742)

Apparel (72)

FUNCTION +GEOGRAPHY –Global (54)

SEASON –

Spring (121)

YEAR –2014 (767)

REVITALIZED HELP David RossingillMAIN NAV 1 MAIN NAV 2 MAIN NAV 3

SECONDARY NAV 1SECONDARY NAV 1 SECONDARY NAV 1 SECONDARY NAV 1

Search

ACTIONS –

Preview

Download

Share

FILTERS –

ASSET TYPE –

Photography (1026)

CATEGORY –

Womens Training (426)

CONTENT TYPE –Shoes (1742)

Apparel (72)

FUNCTION +GEOGRAPHY –Global (54)

SEASON –

Spring (121)

YEAR –2014 (767)

HELP David Rossingill

SITE LIBRARYSITE CALENDAR

TEAM WORLDREVITALIZED

GLOBAL CONSUMER KNOWLEDGE

Search

ACTIONS –

Preview

Download

Share

FILTERS –

ASSET TYPE –

Photography (1026)

CATEGORY –

Womens Training (426)

CONTENT TYPE –Shoes (1742)

Apparel (72)

FUNCTION +GEOGRAPHY –Global (54)

SEASON –

Spring (121)

YEAR –2014 (767)

HELP David Rossingill

SITE LIBRARYSITE CALENDARTEAM DASHBOARD

TEAM WORLDREVITALIZED

GLOBAL CONSUMER KNOWLEDGE

REVITALIZEDSTYLE GUIDE03.18.2016

GLOBAL BRAND MARKETING | OPERATIONS MANAGEMENT & TECHNOLOGY 3

REVITALIZED

TYPOGRAPHY andICONOGRAPHYSome good copy here about keeping with NIKE brand identity while includ-ing enough variation to emphasize details in digital modals and dialogs.

H1 FRAME TITLE

H2 DIALOG, MODAL, FLY-OUTS and ALERT KEY INFO

H3 PRIMARY NAVIGATION, ACCORDIAN HEADING LABELS and BUTTON TEXT H4 FILTER / ACTION NAMES, Display Text (Priority) and User Name (Initial Caps)

H5 MODAL AND DIALOG SUBHEADS (UPPER CASE)

Body Sorting and Relevance, Search Text

Body Sorting and Relevance

TradeGothic | Nike Bld Cdn (15 pt) 20 px 1.25 em

TradeGothic | Nike Bld Cdn (12 pt) 16 px 1.0 em

Futura ND for Nike XBld (18 pt) 24 px 1.5 em

Helvetica Condensed** (11 pt) 15 px .94 em

TradeGothic | NikeBld Cdn (10.5 pt) 14 px .875 em

Helvetica Regular (10 pt) 13 px .81 em

Futura ND for Nike TradeGothic | Nike Helvetica Condensed Helvetica Regular Helvetica Light

Helvetica Regular (9 pt) 12 px .75 em

GLOBAL BRAND MARKETING | OPERATIONS MANAGEMENT & TECHNOLOGY 4

REVITALIZED

CHECKS/RADIOS and SWITCHES

SizesSmall = 12 px.Large = 22 pxLinked .psd at 72 px each for retina displayInactive: #CECECEActive: #6B6B6B

MATERIAL ICONS

Use Material as web font or svg #6B6B6B.Icons grouped in .PSD (right) can be easily converted into sprite sheet.SizesSmall = 12 px.Large = 22 pxLinked .psd at 72 px each for retina display

Best download resources: https://materialdesignicons.com/ (Best for downloads; includes css)

http://zavoloklom.github.io/material-de-sign-iconic-font/cheatsheet.html

https://design.google.com/icons/ or https://google.github.io/material-design-icons/#icon-font-for-the-web

ICONOGRAPHYKeytar squid cred, iPhone VHS vinyl man braid. Bitters farm-to-ta-ble kinfolk, listicle try-hard tousled tattooed PBR&B meggings. Irony farm-to-table XOXO, kinfolk vice jean shorts offal godard 90’s echo park post-ironic brunch pickled.

Street art gluten-free hoodie actu-ally, hashtag fixie disrupt chambray cardigan gentrify truffaut. Hashtag cronut kombucha, polaroid cardigan everyday carry neutra letterpress direct trade pug craft beer. Actually cornhole echo park paleo selvage microdosing you probably haven’t heard of them. Farm-to-table vegan asymmetrical, butcher yuccie before they sold out viral distillery gentrify blue bottle tofu XOXO four loko hammock.

IPhone banjo pug, salvia master

GLOBAL BRAND MARKETING | OPERATIONS MANAGEMENT & TECHNOLOGY 5

REVITALIZED

COLOR PALETTEThe REVITALIZED palette compliments NIKE.com and adheres to Global brand guidelines. The palette is a subtle range of greys with supporting accent colors.

Charcoal#3B3B3B59, 59, 59

Web Black#1B1B1B27, 27, 27

Pewter#6B6B6B

107,107,107

Cloud#CECECE

206, 206, 206

Green#3CB10260, 177, 2

Nike Orange#FA5400

250, 84, 0

Sea#4F92E0

79, 146, 224

Urban#B6B6B6

182, 182, 182

Hint#E5E5E5

229, 229, 229

Background White#F9FAFA

249, 250, 250

GLOBAL BRAND MARKETING | OPERATIONS MANAGEMENT & TECHNOLOGY 6

REVITALIZED

ACTION andFILTER PANELSShown are two alternatives for Typographic treatment of far Left Action and Filter Panel.

Action icons at small size = 12 px

ACTIONS –

Preview

Download

Share

FILTERS –

ASSET TYPE –

Photography (1026)

CATEGORY –

Womens Training (426)

CONTENT TYPE –Shoes (1742)

Apparel (72)

FUNCTION +GEOGRAPHY –Global (54)

SEASON –

Spring (121)

YEAR –2014 (767)

ACTIONS –

Preview

Download

Share

FILTERS –

ASSET TYPE –

Photography (1026)

CATEGORY –

Womens Training (426)

CONTENT TYPE –Shoes (1742)

Apparel (72)

FUNCTION +GEOGRAPHY –Global (54)

SEASON –

Spring (121)

YEAR –2014 (767)

Heading: H3 #6B6B6B

Subheading: H5 #B6B6B6

Body: Body (Helv Lt. 10/18)

#3B3B3B

Heading: H3 #6B6B6B

Subheading: H5 #B6B6B6

Body: Body (Helv Cdn 10/18)

#3B3B3B

Option 1 Option 2

Revitalized Style Guide and Navigation Iteration

The Revitalized Style Guide and Specs includes a responsive grid I designed that had to accommodate three different code bases, so unrecognizable to the end user. In addition to NIKE’s Global Brand Market-ing teams, related agencies and partner vendors will be frequent Revitalized visitors.

Progressive navigation iterations of Nike’s digital asset management system, Revitalized.

Page 6: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

6

Design tools: Pen/Paper Sketches, OmniGraffle,

Adobe Creative Suite, Balsamiq, Keynote

Wonder Campers: Effortless planning for those who inspire NextGen campers

OpportunityTo research and create a web micro-site, that will attract next generation camp-ers, extending REI’s successful Member loyalty program to growing segment of Hispanic and other minority campers. Micro-site scope includes UX prototype based on user research for flow/features including: campground search, re-lated activity search, interactive and sharable checklist. Must interface with and uphold brand guidelines of REI.”

Outcome Update: WonderCampers development is underway using Angular and the US.gov API.

Wonder Campers is a REI micro-site supporting the thousands of volunteers who plan camping and outdoor events for inner city youth. The site includes planning tools to Discover, Book, Plan and Share adventures. The concept also extends REI’s successful loyalty program, allowing Members to ‘donate’ their REI dividends toward gear and supplies for aspiring campers in need.

1 2 7trips to REIweeksperson

Page 7: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

7

8BC34A 1B5E20 F0F4C3

F0F4c3 575757

Open Sans_Regular 14 px (21 px line sp)

Open Sans_Bold 14 px (21 px line sp)

h3Roboto_Bold 20 px (24 ine sp)

h4Roboto_Regular 16 px (24 ine sp)

WonderCampersStyle TileMaterial Guidelines

h3

h4Define and DiscoverOrganizational research, Domain research, Comparative/competitive analysis, Design brief, Heu-

ristics analysis, Screening and User survey, User test consent, plans, In-depth user interviews.

UX research methods and tools revealed a clear direction. Campers overall are prepared people and have other means to self-organize. Challenges revealed included: responsibility for others’ kids including allergies, emergencies, and gear|equipment preparedness.This gave me the opportunity to pivot and reimagine a microsite that could ad-dress needs of a growing and promising audience: camp volunteers for Sierra Club, Big Brothers and other groups. In addition to purchase activities, the site includes a CMS integration allowing volunteers to coordinate with guardians for permission slips, emergency contacts and more: Tents? Boots? And manage communication with a dozen parents, many who have never camped.

Ideate, Design, Test, Iterate:Affinity mapping, Concept mapping, User persona, User flows, Storyboards, Sitemap, Scenarios,

Wireframes and wireflows, Prototyping, Remote usability testing, Case study.

Techniques like concept mapping, card sort, storyboarding, user scenarios, and flows informed better sitemaps and tighter prototypes. Since this was a solo project, I developed a ‘checkpoints poster’ for both inspiration and to stay fo-cused on the user perspective. In-person testing led to further prototype edits. Balsamiq was appropriate for low fidelity prototyping and rapid iterations.

Page 8: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

8

Design tools: Pen/Paper, Sketches in Paper 53, OmniGraffle,

Adobe Creative Suite, Axure, Keynote.

Taking Instagram to PrInstagram: The easiest way to share printed photos and photo gifts.

OpportunityGive Instagram users a simple way to share a physical printed versions of their digital memories. As Instagram’s first in-App product, there is high potential for risk and reward. Key factors: simplicity and an informative, but non-interruptive flow. And enough added value for users to abandon printing patterns with more established services. Outcome User trust and appreciated conveniences.

“Instagram Photo Printing App” was lost on users. So PrInstagram was born.User response to PrInstagram was very positive. Users trusted the feature implicitly because of Instagram name. They appreciated the convenience of an in-App flow, that didn’t disrupt photo posting.

Merchandise that connects digital experiences with IRW, in real world, ways to share those experiences were most popular with testers, especially the ability to snail mail a postcard from a digital photo.

3 2 237Instagram postsweekspeople

Page 9: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

9

. . . If adding a pic to my

photo stream takes 5

steps, then I want it to be

that easy to print.”

Define and DiscoverOrganizational research, Domain research, Comparative/competitive analysis, Design brief,

Heuristics analysis, Screening and User survey, User test consent, plans, In-depth user interviews.

An online survey system (Constant Contact) proved valuable to screen and gath-er background information and probe about printed photograph and photo-sharing behavior. This helped identify baseline data about Instagram usage to confirm testers paralleled domain research gathered. In-depth interviews led to affinity diagram honing in on barriers, sentiments and routine around printed photos and photo merchandise.

Ideate, Design, Test, IterateAffinity mapping, Concept mapping, User persona, User flows, Storyboards, Sitemap, Scenarios,

Wireframes and wireflows, Prototyping, Remote usability testing, Case study.

Persona and User scenario helped clarify how Instagram could best leverage opportunities in-App without disrupting user flow. ”Sure I use my phone to take pics, and order everything from dinner to movie tickets. But to order printed merchandise, I want the editing features and ordering process to be simple and straightforward.

Page 10: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

10

Design tools: Pen/Paper, Sketches in Paper 53, OmniGraffle,

Adobe Illustrator, InDesign, PhotoShop, Axure, Keynote

Wei to Cook: Simple as 1,2,3.

Opportunity Elemental cooking. Easy as Gather, Prep, Savor.

Our team was invited to help make Asian cooking more approachable and en-joyed by more people. Wei Kitchen’s infused oil and vinegar products are great flavor enhancers/time savers. They needed a clear, concise way to convey that via their website. Outcome A well-curated, lifestyle-focused, interactive website that showcases the company’s products

Echoing user’s desire for informative steps, but “make it look easy”, every meal is simplified into 3 steps: Gather, Prep and Savor. This matrix informed everything from site navigation to recipe categories.The end-to-end UX project became stronger with each iteration and usability test. We orchestrated a final website that delivers on validated, user-driven desires that dovetail with the business needs and measurable metrics for the client.

3 3 38Asian meals,

consumed for researchweekspeople

Page 11: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

11

Define and DiscoverOrganizational research, Domain research, Research on Cooking Motivations (primary and

secondary), Heuristics analysis, Screening and Detailed User survey, User test consent and plans,

In-depth user interviews

Wei Products are made with time- and labor-intensive techniques. They ‘do the heavy lifting’ and make healthy, simple Asian meals possible in a fraction of the time. Our client’s products are ‘first to market’, certified organic and of excep-tional quality. In-person, task-based usability tests followed up by exit interviews helped gauge baseline time-on-site, navigational flow and ‘sticky’ concepts or impressions post visit.Domain research focused on ‘cooking styles and motivations.’ This provided valuable insight to both recipe selection and the entry point for the client’s product. Respondents answered both surface and deep dive questions, which helped round out motivators and better understand the customer journey of planning, shopping, prepping, cooking, serving and eating. Nine in-depth inter-views gave us hours of transcribed discussions about cooking habits, recipe searches, ideal scenarios, favorite resources and cook’s desires.

Ideate, Design, Test, IterateAffinity mapping, Concept mapping, User personas, Design studios, Sitemaps, User flows, Wire-

frames, Multiple iterations working with Adobe smart objects, Lo-fo|Hi-fi Prototyping in Axure

With user preferences clear, we did a series of activities to first think big (gener-ate, create, ideate), then synthesize (refine, winnow, prioritize). Flows addressed where (to recipes) and what (clarify purpose of the site) and how (simple steps and options) and delivered on many user desires and answered why’s. Once distilled, the user’s desire for easy as 1,2,3 gave clear organizational struc-ture to the site and the only 3 steps to any meal: Gather, Prep, Savor.

49 9 5usability testsin-depth interviewsrespondants

Page 12: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

12

Test, Iterate, ReTest

Several navigation-focused, low-fi usability tests, Five recorded usability tests (three remote and

two in-person), Exit interviews

Wei Kitchen has begun an excellent job of curating quality content. But it was lost on users going to retrieve a recipe and exiting. Aiming to cross-populate content, we tested several dynamic search/select tools that would work across multiple platforms. Site hints of coming features like a Taste of Travel Blog and Asian Cook Technique and Tips were well received. Although out of scope for this UX project, we designed a bottle hang tag to help direct grocer point-of-sale consumers to the Wei Kitchen website.

Recommendations and Next Steps: Wei Kitchen plans to move their web hosting from

Squarespace to implement more fluid and dynamic navigation as recommended.

Don’t be shy. Make your product visible through cross links and photo placement. People are interested in the story behind your products.

Make the entire web experience approachable = Gather, Prep, Savor.

Users desire simple recipes, so keep story and narrative linked but out of recipe steps and instructions.

Use retail POS to tempt grocery shoppers with recipe eye candy.

Page 13: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

13

Classic Exhibits: Exhibits and Retail Environments

Classic Exhibits is an exhibit/ retail display manufacturer that sells

to a distributor network of 400+ throughout North America and

maintains corporate alliances in Germany and the U.K.

I led the brand strategy and design for all distributor marketing and training communications including web and digital distributor intranets, public-facing websites for two companies and all event and promotional large format graphics. As the marketing partner for Classic Exhhibits and Classic Modul, I and my team created hundreds of digital assets, ranging from weekly e-mail broadcasts to 30’ x 40’ exhibit designs for national trade shows. Contributed to new product design based on user research.

SuccessesIn the first year, Classic Exhibits, increased sales by 41% and nearly doubled ‘active’ distributors. Through-out the eight year relationship, I helped implement design changes based on user research that consist-ently increased sales and market share.

8 41% 280active

distributorssales increase

first yearyears

“Sara is hands-on every step of the way. She

knows when a whim is just a whim, and will

help guide you back to a solid concept that

will further your long-term goals.

We never considered working with anyone

else. Never. Sara understood us and shaped

who we eventually came to be.”

Mel White,

VP of Marketing and Business Development

Page 14: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

14

JustChoice Lending: Do Better Lending Discovery, Comparative/competitive analysis, In-depth interviews,

User flows, Sitemaps and Wireframes for a multi-gateway Drupal

CMS and a communications/collaboration network.

OpportunityTest and develop brand assets, including a commercial lending website to launch mortgage products. This socially-responsible lender required a website that met Federally-compliant standards for mortgage lenders and was accepted by users. Research included re-sponses to values statements re: socially responsible products as well as detail usability testing.

SuccessesLaunched JustChoice Lending (four integrated Drupal CMS websites and > 30 brick and mortar locations.Overcame challenges to develop the technical infra-structure in a complex and highly regulated indus-try. Reached target goals and success indicators six months early. Nationally recognized for performance and as an exemplary social lender by NeighborWorks® America.

4 6018months from idea

to launchstakeholder

lendersstates

Do Goodfor Yourself

Do Betterfor Your Community

At JustChoice Lending, our focus is you—and helping you make the best decision for your mortgage, your family and your future. It’s that simple.

We keep it simple with clear and straightfor-ward terms and competitive interest rates. We can help you pre-qualify and take advan-tage of special programs to help you get the best deal—sometimes even 100% financing.

We’re confident that JustChoice Lending can help you do better. At JustChoice, our primary goal isn’t our profit. Our goal is to help you and your community prosper. Rather helpinginvestors get rich, we’re able to reinvest earnings into affordable housing programs throughout the region. We have more than 20 years experience in helping people buy affordable homes. Take a brochure to learn more.

Rates

and terms that compete

with the most respected national

lenders. Up to 100% financing. Low closing

costs. Prompt turnaround for pre-approval and loan

closings. Local loan originators you can trust. And

JustChoice Lending is the only mortgage backed by a

reputable institution with more than 20 years

experience in connecting families with financing.

JustChoice Lending—build a better future for you and for your community.

Just Choice. Home loans that build a better future.

Page 15: UX designer strategist andsarahemmer.com/assets/sh_images/SaraHemmerWorkPortfolio.pdf2 Design tools: Whiteboard, Magnet sheets, OmniGraffle, Axure RP, Adobe Creative Cloud NIKE - Global

15

Berea College: 150 years of tuition-free education to promising students.

Comparative analysis, Heuristic analysis, Stakeholder and User

research, Affinity mapping, Pattern language evaluation, A/B test-

ing, Design and implementation of Brand/style guidelines.

Opportunity Berea College’s reputation was much stronger than its visual identity; in 150 years, it didn’t have a logo or consistent brand assets. I led the campus collabora-tive design process for all related College properties including print, web, retail and wayfinding.

SuccessesInstitution wide buy-in. Built foundation for a cohe-sive brand across all College assets including two for profit enterprises and successful $150 million Capital Campaign, and commitment to green renovations and focus on environmental responsibility.

8 150 150million $ raised

in capital campaignyear

Anniversaryyears

Gracious Hospitality

Unmistakably Berea