Design tweaks to homepage

[mekarpeles]

Description, Patron Story

• What is the design change?

exploring new colors, removing beige carousel background, more clear headers

For Joshua to fill out:

• Why is this design change necessary?
• Who is it for?
• Constraints or considerations?

Relevant Designs

e.g.

Feedback Questions

Josh: Provide a list of feedback questions you want answered by the community; e.g. Is the design...

• thoughts/reactions/feelings
• usability, intuitive v. confusing
• usefulness, necessary/useful/effective at achieving the task
• visual design & aesthetics
• consistency (with website & design system)
• discoverability
• accessibility

Decisions

Stakeholders

[Achorn]

Description, Patron Story

What is the design change?

• Minimized the amount of color on the page.
• Lightened the beige carousel background for visual hierarchy.
• More clear headers.
• Used the open library blue for inactive buttons but different value for visual accessibility.
• Bolded button text for readability.
• Added padding to sign-in button.
• Resized logo for readability

Why is this design change necessary?

• To create a layout that is easier to read and traverse.
• Better accesibility

Who is it for?

• All Users of Open Library

Constraints or considerations?

• The current goal is to adjust how the colors are being used on our pages.
• Examples: What is and isn't clickable? What is more or less important?

Relevant Designs

Current Design

Redesign

Feedback Questions

• Do these colors better exemplify open library?
• What stands out to you on the redesign?
• What is and isn't helpful.

thoughts/reactions/feelings usability, intuitive v. confusing usefulness, necessary/useful/effective at achieving the task visual design & aesthetics consistency (with website & design system) discoverability accessibility Decisions

[pawelborkar]

Hi @mekarpeles, I would love to implement these changes. Once the design changes gets approved, Could you please assign it to me?

Thanks

[parmishh]

Hi @mekarpeles I would love to work and collaborate with others on this issue.

[ayush4345]

hello @mekarpeles i would like to work on this, as this align with my skill and interest. can you assign me this issue ?

[mekarpeles]

@pawelborkar @ayush4345 @parmishh -- this issue is a labeled as Needs Design and Needs Design Feedback which means if you'd like to help, you may do so by offering design feedback! There is no development to contribute yet on for this issue.

[ayush4345]

@pawelborkar @ayush4345 @parmishh -- this issue is a labeled as Needs Design and Needs Design Feedback which means if you'd like to help, you may do so by offering design feedback! There is no development to contribute yet on for this issue.

Ok, thanks for the clarification

[liaozhuzhu]

I strongly agree with this push for new tweaks to "modernize" the home page (and eventually all pages).

From the main index google doc for OL, in order to be "the Internet’s best Open Book Catalog" that also means keeping up with modern UI/UX design choices. From a user of the site and new contributor viewpoint (idk how much say I have in this) these are my opinions:

1. I agree the beige color is offsetting and could be revamped with stronger contrasting colors alongside buttons, titles, text, etc. This ofc would be hard to change since we'd have to change the entire site's default color scheme. However, I think it's for the better.
2. Removing "books" from "Trending" and "Classic" sections to remain consistent with the rest of the page section titles
3. The carousel under "Welcome to Open Library" could be refactored to where we only show one at a time. Maybe every 3-5 seconds it automatically slides to the next (the user can still paginate if they want to via arrows). Each "card" as I'll call them will take up the full width instead of fitting 3, we'll only fit 1 large one. It'll have the logo/svg on the left, and on the right larger text associated with it: "Read free library books online" for example. I haven't tried this but it could be more appealing and inviting to audiences.
4. I really like the improved section titles in the redesign rather than just making them underlined, blue, and slightly larger. The current section titles almost look like default html elements and could be improved.
5. Each section has a super light beige background which I feel isn't needed and could possibly be omitted.
6. I like adding ">" next to each section title, but maybe an svg/icon for ">>" would be better?
7. I almost wonder if we need "Welcome to Open Library" when we have the open library logo right above in the navbar. I played around with this and am 50/50 on it.

The bottom of the home page is out of place and here are a few of my opinions there:

1. "Browse by Subject" section should be moved to the top right above trending books, also adding a trending section on the "Browse by Subject" carousel represented by a fire emoji.
2. either move the "Around the Library" section into the /about page or revamp it like i said above with the "Welcome to Open Library" carousel where it only shows one statistic at a time with larger graphs and text associated next to it, then automatically moves to the next every x seconds
3. The "About the Project Section" along with the "Latest Blog Posts" needs to be more organized, right now it feels as though they are supposed to be together, but aren't quite. I suggest moving Blog posts into its own section that have thumbnail images and titles linking to each post. This will especially help out on mobile view where they start to scrunch up side by side.

Sorry for so much text, I have a strong goal of modernizing the site since when I first started using the site last year my very first initial thought was "is this site even still updated, it looks pretty old". I'd love to hear everyone's opinions 🙏