The idr from ibm-design

Hi Scott, a few updates for the IDR homepage:

1
Can you please link "Enterprise Design Thinking" in the opening copy? Link: https://ibm.com/design/thinking

2
Please remove "Learn more about the business impact of Design Research and Enterprise Design Thinking in this Forrester report."

3
Can you please capitalize "Sponsor User Program" in the homepage box? Also please update the blurb to be: "Design for real users rather than assumed needs" (it's currently a copy of the "research in practice" box.) Also please update the box linking URL to: https://idr-public.netlify.com/sponsor-user-program/overview

(@air2h2o -- we can talk about whether SUP should be on the homepage)

4
Please cut the "Why we do it" section in white near bottom

5
Please remove the middle medium post "Fun and Accuracy" and replace it with a link + graphic to go to the Forrester Report (previously linked above in # 2) - Cris G might be able to support with graphics.

Research as a team, bullet on mobile

on mobile (iOS 12, safari browser) the bullets second line indent is off. See attached.

Landing page: Replace straight single quote with apostrophe please (... you’re...)

@mjabbink commented on Thu Jun 13 2019

Happens in two places. Both in you’re

Sponsor User Program

@air2h2o commented on Tue May 14 2019

Scott, this should be a light lift from a content perspective. Porting http://idr-prod.w3ibm.mybluemix.net/design/research/resources/sponsor-user-program/ (with a few copy edits) to our external site.

@sstrubberg commented on Tue May 14 2019

I need wires.

@sstrubberg commented on Tue Jun 11 2019

@CrisGonzo ???

Link to sponsor users from Ethics page?

Links that require logging in

The 5 Why's Link on this page requires login. Do we have a POV on requiring that?

I love linking to help people do it themselves, but am concerned about the speed bump that may provide to our readers.

footer too short. See Gatsby footer and height

Review SUP page content

@air2h2o gotta do this

home page copy tweaks

Design research guides teams to uncover insights and inform the experiences we create. It begins with the rigorous study of the people we serve and the ecosystems in which they exist. This is the heart of Enterprise Design Thinking. While in the Loop, design research leads teams to continuously build understanding and empathy through observation, prototyping possible solutions, and reflecting on the feedback from our users themselves.

(updated... replace helps with guides and supporting grammar updates)

Indentation on lists

Black lead space height: Match Gatsby theme height.

@mjabbink commented on Fri Jun 14 2019

check with @alisonjoseph

@alisonjoseph commented on Tue Jul 02 2019

This should automatically fix itself once migrated to the theme

Homepage--Latest articles bleed on mobile

Should SUP be on the homepage?

Chris - should SUP be a box on the homepage? This is an issue to remind us to decide. @air2h2o

Home page: link to EDT

Currently the link leaves IDR to go to EDT. It seems like a new tab or window would be better. Is there an established IDL/Carbon behavior?

Keep Asking Why

Need more content leading into the 5 Whys.

image for medium article

Hey Ryan, I talked to @CrisGonzo about this but can you please make a graphic for the middle article on the IDR homepage? It should refer to the "Total Economic Impact Report" from Forreste, and replace the image of B-mo.

Updates to social links in the footer

Social links don't open in a new tab. Should they?
Please move medium from the left sidebar to the footer
It is TBD whether we'll update Facebook (I've checked with Will). If not, I suggest cutting. Will confirm in next couple days.
update contact email (@air2h2o do we want to do this....)

Sponsor User Program overview page

The cards on the Overview page do not require a description - https://idr-public.netlify.com/sponsor-user-program/overview

An alternative to this would be to scrap the cards altogether and use the arrow + link UX pattern. I'm not sure, though, if that is only used to drop you down the page?

ethics vs. code of conduct

https://idr-public.netlify.com/ethics

Q: Is Ethics the word we want to use, or should we say “Code of Conduct” which is what the text page says

A: Should be Ethics (on the side bar navigation. Header on page should be "Design research ethics" to mirror the structure on the AI Design pages.

lame mock-up... but you get the idea.

body copy bold vs. italics

Where do you come in? footer sections use of bold vs. italics isn't consistent.

home page links

... While in the Loop, design... Add link to Loop

https://www.ibm.com/design/thinking/page/framework/loop

Pro-Tips line indent is broken

The text wrap doesn't work on the pro-tips.

Update the SUP overview deck in new viz lang

Then link to it on the Sponsor User Program "Starting" page, under pro-tip # 1. We might also create an external specific version and link to it in Learn More section at very bottom -

Original text:
"When recruiting Sponsor Users, provide clients program details and requirements to gauge their interest and availability. IBM Design created template presentations to help educate your team and pitch the program to a potential Sponsor User. You can download them in the “Learn more” box below."

Landing page: The line spacing too tight in the headers inside magenta feature cards

@mjabbink commented on Thu Jun 13 2019

An ascender should not ever tough a descender. Should follow the type specs on size and line space relationship.

PrevNext Buttons Fontsize Broke on Chrome iOS

Overview page: Giant cards probably need redesigning.

https://www.urbanoutfitters.com/shop/raised-by-wolves-r-bee-w-dad-baseball-hat?category=mens-hats-beanies&color=023&type=REGULAR

Not sure these are the solution. I’ve asked Ryan Caruthers to investigate.

Research as a team page: Remove space after em dash

@mjabbink commented on Thu Jun 13 2019

https://idr-public.netlify.com/guiding-principles/research-as-a-team

remove space after "em dash"

home page mobile type size

on mobile (iPhone iOS 12, safari browser) the link for EDT is larger than the rest of the paragraph.

section page cards

Home page card size is good, second level down cards are too big.

Left nav: make ALL items in Nav IBM Plex typeface

@mjabbink commented on Thu Jun 13 2019

Looks like a few items in the list are not Plex

Guiding principles
Research in practice

Accordion functionality for SU FAQ?

Is it possible to use an accordion functionality or similar to hide/reveal the FAQ and answers? Example: https://idr-public.netlify.com/sponsor-user-program/starting

card content strategy: remove

The content in this card needs rethinking. Not how to use content in this card. The label should be "Account registration required"

summary / second line text

mimic AI Design pages vs. existing IDR style.

Homepage-First Header Busted on Mobile

Landing page copy

Phil's re-write is nice and pithy. @eleanorbartosh and I made a few tweaks.

copy should be:

Our Practice (header)

Design research helps teams uncover insights to inform the experiences we create. It begins with the rigorous study of the people we serve and the ecosystems in which they exist. This is the heart of Enterprise Design Thinking. While in the Loop, design research leads teams to continuously build understanding and empathy through observation, prototyping possible solutions, and reflecting on the feedback from our users themselves.
Learn more about the business impact of Design Research and Enterprise Design Thinking in this Forrester report."

Update sidebar "W3 Design Research" link

Remove medium and move down to footer (referenced in #31)
Using a similar style to the righthand menu (see screenshot below), update the lefthand nav's "W3 Design Research" text to be:

IBM Internal Resources**
(line)

Training Modules
Agreements
Software
Recruitment and Services
(this refers to the content that's linked to from here: http://idr-prod.w3ibm.mybluemix.net/design/research/resources/ but I guess those pages will change??)

**If "IBM Design Research Internal Resources" fits on one line or looks good on two, can we do that instead?

accordions: ALL— Need to be width of body copy. Use the specs in Brand Center

@alisonjoseph and Vince Picone. The BC one was built around 16px type versus the Carbon spec. Also the width is not extending like in Gatsby and BC. Gatsby Accordion needs to be updated to follow BC specs. The Carbon one is not wide enough and also using 14px type. The BC one is what dotcom would use and is better for websites vs. product. (side note: the Carbon accordion is fine in 14px but needs to be wider to follow the body copy width which also needs to be wider in Carbon. Once migrated all will be solved with adjusted accordion.

Current
https://idr-public.netlify.com/sponsor-user-program/starting

expected
https://www.ibm.com/brand/help/faq

Line height issue with bullets

The spacing between the first and second lines of a bullet on the Sponsor User Program is taller than in the following lines. Also we think this font should be the same general body copy size. It seems smaller.

https://idr-public.netlify.com/sponsor-user-program/planning

Testing Jam: week of July 15

Organize a set of testers from DPO to review content, links, browsers, functionality, etc. @sstrubberg - Ricardo and Rafa from my team have successfully done this several times for EDT launches. They may be able to help us organize.

Icons

@sstrubberg commented on Wed Apr 03 2019

<link
      rel="apple-touch-icon"
      sizes="48x48"
      href="/icons/icon-48x48.png?v=e731b0006103a274fca7fd6f5fd1120da6c0f6f2"
    />
    <link
      rel="apple-touch-icon"
      sizes="72x72"
      href="/icons/icon-72x72.png?v=e731b0006103a274fca7fd6f5fd1120da6c0f6f2"
    />
    <link
      rel="apple-touch-icon"
      sizes="96x96"
      href="/icons/icon-96x96.png?v=e731b0006103a274fca7fd6f5fd1120da6c0f6f2"
    />
    <link
      rel="apple-touch-icon"
      sizes="144x144"
      href="/icons/icon-144x144.png?v=e731b0006103a274fca7fd6f5fd1120da6c0f6f2"
    />
    <link
      rel="apple-touch-icon"
      sizes="192x192"
      href="/icons/icon-192x192.png?v=e731b0006103a274fca7fd6f5fd1120da6c0f6f2"
    />
    <link
      rel="apple-touch-icon"
      sizes="256x256"
      href="/icons/icon-256x256.png?v=e731b0006103a274fca7fd6f5fd1120da6c0f6f2"
    />
    <link
      rel="apple-touch-icon"
      sizes="384x384"
      href="/icons/icon-384x384.png?v=e731b0006103a274fca7fd6f5fd1120da6c0f6f2"
    />
    <link
      rel="apple-touch-icon"
      sizes="512x512"
      href="/icons/icon-512x512.png?v=e731b0006103a274fca7fd6f5fd1120da6c0f6f2"
    />

Need a boat load of icons.

And a favicon

Find the story link (second link)

Please link "You can read IBM's guidance on data visualization here." accordingly

Gather docs and links for Scott

@air2h2o we have to gather documents and links for Scott. This is an issue to capture that and remind us. Maybe we can document them all here? @sstrubberg do you have a preference for a delivery mechanism?

Find the story link

"See how a team changed the course of a project by centering realities of their users."

check titles and sub-titles for Sentence case (vs. Word Case)

Double check headlines and subheaders for Sentence case (as is the [Carbon Guidance])(https://www.carbondesignsystem.com/guidelines/content/guidance#capitalization):

e.g.
Guiding principles
Overview
Research as a team
Stay curious
Make to learn

Bullets vs. Numbers on Sponsor User Pages

On our SU Program pages, we use a mix of bullets (for suggested steps) and numbers (for pro-tips). This differentiation in styling is a hold over from the original site. While reviewing today, we began to question this. Why are they different? Should they be the same? Do bullets vs. numbers mean something intentional? How are we handling this on other pages? @CrisGonzo, @mike, @ryan?

https://idr-public.netlify.com/sponsor-user-program/planning

footer: Drop link to next line.

@mjabbink commented on Thu Jun 13 2019

Have Questions? Email us at:
[email protected]

Landing page: Feature cards— Adjust gradient and type size

@mjabbink commented on Thu Jun 13 2019

The magenta should have a touch oaf black in it as it transitions to magenta. See Watson site "About" page

https://www.ibm.com/watson/about

Also check type size I think it needs to be a touch smaller (also see #47 for line spacing issue)

current (no gradient)

expected (with gradient but with magenta)

home page navigation behavior

I assume this is a Carbon behavior,

From the home page: when i click on Guiding Principles, i would expect the home screen to jump to the Guiding Principles overview, not just open the menu and show the 4 pages.

If i click on the carrot i would expect it to open, versus jump to the page.

Has this UX pattern been tested at all?

Guiding principles: card order

NEW order: Stay Curious, Research as a team, Make to Learn

(swap team with curious)

This order is more logical. Curiosity being the most basic principle, research is a whole team, and making as a part of research

ibm-design / idr Goto Github PK

idr's People

Contributors

Stargazers

Watchers

Forkers

idr's Issues

Recommend Projects

Recommend Topics

Recommend Org