Design System - Component(s): Carousel

[KaylenaNguyen]

Dependency

• A/B Testing and Usability Testing of Components  #135
• Design System - Component(s): Section Layout, Grid, and Spacing #124
• Design System - Component(s): Header and Footer #119

Overview

We need a template for images to inset into the website carousel so we can make the carousel modular.

Additional Information

This component is a molecular component that includes button and image.

Action Items

• Use data literacy journey as the initial use case
• Determine sections/parts within the image that are needed (i.e. title, description, image)
• Mock-up templates and examples of images
• Test image within mobile and desktop setting
• Get feedback from team and usability testing on images
• Iterate and apply feedback

Design System

• do any audit for workshop cards on the Workshop Page within the mobile and desktop high-fi wireframes
• collect all versions of cards and determine if designs are inconsistent (based on sizing, style, etc) and if we need to standardize them
  • bring to design team to make decisions on standardization
  • if we need more information to make a decision, do a competitor analysis of how other websites are using text field inputs
    • put competitor analysis in figma
• make sure versions of the text fields work in states: for
  • mobile
  • desktop
• detail out component's within the figma
  • class
  • css
  • use
  • context

Resources/Instructions

Carousel in a Figma page of components

[lrchang2]

@KaylenaNguyen
Please add update using this template

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

[KaylenaNguyen]

Progress: Template is finished without a headline or description.
Blockers: I sketched out my original idea, but ended up changing it to something more simple for all users.
Availability: A couple hours.
ETA: Depends on the feedback.
Pictures: https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A16

[KaylenaNguyen]

Progress: There are 3 different designs for the carousel images. I know it was mentioned in the meeting that we could do different layouts for different images so users aren't always looking in the same spot. I also did full page and half page. The only thing left to do is pick out images and decide on headlines, which I thought we could do collectively.
Blockers: Didn't encounter any errors, the only thing stopping me from being 100% finished is what I mentioned above.
Availability: I'll have about 2 hours this week to work on this.
ETA: As long as we can collectively decide on what images we should use and the headlines, I could finish it this week.
Pictures: https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A16

[lrchang2]

trying out a different carousel format where users can see all the slides within the carousel.

next step is to apply text formatting with the image that include headline and body text

[melissamurphy]

trying out a different carousel format where users can see all the slides within the carousel.

next step is to apply text formatting with the image that include headline and body text

Do we have headlines and body text decided for the carousel (if so: where?)?

[KaylenaNguyen]

I applied body texts to the images that I thought fit. Let me know if anyone thinks differently, so we can change it up.
Still no headlines.

Progress: Thank you to whoever created the layouts! Super helpful and very much appreciated. So far we have body texts and CTA's included but no headlines.
Blockers: Headlines!!
Availability: I will have a few hours the rest of this week.
ETA: As long as we can collectively decide on what headlines we should use and if formatting works, I could finish it this week.
Pictures: https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A16

[lrchang2]

new carousel copy is within most updated version of website copy

[lrchang2]

new copy has been applied to both website and mobile version of wireframes.

[lrchang2]

review and edits based on usability test results that will be synthesized in #102

[lrchang2]

based on the testing, team has decided that we need to reformat the carousel to be "above the fold"

[KaylenaNguyen]

carousel has been updated.
based on feedback, text and images have been swapped for zig-zag layout, for easier reading.
buttons have been changed to fit the rest of the page. smaller button for users when viewing on their own screens.
Archana and I went over this on Monday.
Some things to note:

• Heading and text alignment aren't quite aligned. It's definitely a personal preference, but I think the entire team should discuss.
• Should we consider enlarging the images and keeping the heading and text to one side, like we have for most of the other sections?

https://www.figma.com/proto/XFd0p6xFSbciFIdVIOgoMr/Untitled?page-id=0%3A1&node-id=31%3A436&viewport=243%2C48%2C0.41&scaling=contain&starting-point-node-id=31%3A436

[lrchang2]

• margins for pictures increased
• left alignment of headings
• changed padding for buttons based on archana's work

developers need to weigh in on automated flipping through cards in carousel and how it works
we need to look at character count for titles cause of 2 lines for "Open Data Success Story: See What Others Are Doing?" consider making it shorter to fit on one line.

[melissamurphy]

@KaylenaNguyen @lrchang2 Could we get a link in this issue to the carousel wireframes in Figma? I'm not finding it in the Access the Data Hi-Fi Wireframes page https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=2%3A16

[KaylenaNguyen]

@melissamurphy

Yep! Sorry, it's in the Components page.

https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=1313%3A4075

[melissamurphy]

@melissamurphy

Yep! Sorry, it's in the Components page.

https://www.figma.com/file/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?node-id=1313%3A4075

Great, I updated the issue description with it as well! I was looking in hi fi under Figma's Components page ("Local Components")

[melissamurphy]

Mobile Carousel Secondary Research
Smashing Magazine, An Exploration of Carousel Usage on Mobile E-Commerce Websites

• "There is a chance that mobile users interact with carousels more than desktop users."

• "...by auto-advancing carousel items, users who want to click on a slide are being thwarted by the interface." further research and argument against auto-advancing

NNG suggestions on Designing Effective Carousels:
On timing: "Test for the right timing, or at least estimate how long it might take the average user to read the text and process the images. We use 3 words per second as a guideline."

On IA of carousel content: "If you are using a carousel in the hope that people will see a variety of content, know that some people will only see the first frame or none at all. So ensure that important content is also placed mindfully in the IA and on another page of your site. "

@KaylenaNguyen

[lrchang2]

@KaylenaNguyen
Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.

[KaylenaNguyen]

After meeting with Archana, we're still a bit confused on what needs to be added to the questions pertaining the usability testing. We do know that we want to test the entire site again because just testing the carousel will limit what our testers will see. By testing the entire site, we can get a better idea of how they're going through the website and see if they actually go through the carousel. For testing purposes, we'd also like to turn off the auto-forwarding. We think it will give us an advantage by seeing what they do with the carousel and if they click through it.

I also read Melissa's notes and found some of my own as well. What I found was that auto-forwarding is definitely a no-no for mobile.
"Do not auto-forward on mobile devices, because: (1) it slows down the page, and (2) because pages are short, users often scroll quickly, so by the time the carousel changes, the user is likely looking below the fold and won’t see the change anyway."

The UI of the desktop carousel seems to be good. No one else had any feedback to give. I'm happy with the way it is and would like to test it that way unless anyone recommends any changes. As far as the mobile carousel, I haven't started yet, but will get to that shortly.

[KaylenaNguyen]

After meeting with Melissa and Archana, we decided to create two versions of the website. One version is with the carousel, the other without. We'll run an A/B test and gather data that way. Will the carousel even be necessary?
I also added a submenu for "Get Involved" which is now on the nav bar.
It should work with all screens.

For testing purposes, the auto forwarding on the carousel has been turned off.

If there's anything you need while I'm away, or if there's any feedback, please reach out!

With Carousel
https://www.figma.com/proto/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?page-id=2%3A16&node-id=2906%3A8862&viewport=243%2C48%2C0.08&scaling=scale-down-width&starting-point-node-id=2906%3A8862&show-proto-sidebar=1

Without Carousel
https://www.figma.com/proto/nS5IqnutUT2FuPwwJObHaY/Access-the-Data-Main-Figma?page-id=2%3A16&node-id=2906%3A9462&viewport=243%2C48%2C0.08&scaling=scale-down-width&starting-point-node-id=2906%3A9462&show-proto-sidebar=1

[lrchang2]

@KaylenaNguyen are you done with the carousel? if so, please update and close issue

[KaylenaNguyen]

Carousel is about finished. Waiting for layouts and grids to be complete so I can make the changes in sizing.
Color for carousel background will also be changed if Kevin changes the header and footer color, so colors are interchanging. Also looking for one more image for the first slide of the carousel on mobile. What I have now for the desktop doesn't fit right and looks off. I'm looking for an image that I can use on both.

Should be done when Kevin and Randy are finished making those changes.

[lrchang2]

great ok, im going to put this is ice box until kevin and randy finish their issues and you can take this out of it once theyre done and finish it up