UI alignment across our key websites

xmatthewx commented 7 years ago

Properties should be better linked with smoother UX. UI should be aligned, but can differ.

xmatthewx commented 7 years ago

One opportunity is to put a link on Site homepage getinvolved section that takes a visitor the pulse help categories. Might require a new help landing page in pulse, similar to our issues landing page.

kristinashu commented 7 years ago

@xmatthewx based on our meeting, I think we should separate this epic into two: Align UI + Link Sites

xmatthewx commented 7 years ago

Sounds good to me.

I'm also questioning the decision to do links after UI. Seems useful (and not too complicated) to build connections pre-MozFest, even if UI still varies. What do you think?

kristinashu commented 7 years ago

For a more seamless and less jarring experience, I think sites should feel more aligned before we make people jump back-and-forth between them. Although technically easy to link the sites, UX-wise it might to tough to pull it off smoothly. But having says that, adding links to the footer could be a small easy one to do.

kristinashu commented 7 years ago

Aaaaand https://www.mozilla.org/en-US/ has changed again...

xmatthewx commented 7 years ago

Wow. At least it's slightly more in line with the internet health page and things on our side. The top nav is growing, has an odd mix of hierarchy.

Dang. Can we replace that Teach the Web link to Learning with a link to the new site?

kristinashu commented 7 years ago

(copied from https://github.com/mozilla/network/issues/751)

Based on the kickoff meeting, we will first focus on UI alignment and cross-linking will come later.

Next steps include:

[x] update doc with moz.org designs
[x] check with moz.org designers on where their design is heading and get input from MoFo designers #766
[x] prioritize order of UI updates listed in the doc
[x] open tickets for each UI element to make the design decisions #770
[x] work with devs to come up with a plan of attack for implementation
[x] check with PMs on timeline and resourcing
[x] open implementation tickets

kristinashu commented 7 years ago

(copied from #770)

These are tickets for the first set of design work that needs to be done. Will wait until these are finished before moving on to opening the other tickets.

Hold off on

Fonts (Switch to Zilla and Zilla Highlight #303)
Footer
Newsletter signup
Forms & Notifications/alerts
Icon style
Color
Banner

kristinashu commented 7 years ago

Added some initial comps to redpen https://redpen.io/p/rx51f171fd150ae1fc

kristinashu commented 7 years ago

@xmatthewx let me know if you have any feedback on the comps https://redpen.io/p/rx51f171fd150ae1fc

xmatthewx commented 7 years ago

Looks fantastic! Really quick, strong work @kristinashu. I really appreciate it. We can have @jessevondoom take a look at redpen and then make a plan with Alan for implementation.

jessevondoom commented 7 years ago

These look amazing. I only had the most minor bits of feedback in redpen. Think we're ready to talk with @alanmoo about implementation.

kristinashu commented 7 years ago

I meet with @alanmoo, @mmmavis and @gvn. Our next steps are:

Open Pulse tickets for Mavis:

[x] Nav updates: gradient divider instead of solid pink, ‘add post’ button similar to Network’s ‘sign up’ CTA, font weight (Blocked by design - TBD: mobile nav for Pulse, sticky like Network?, new new new moco logo guidelines) https://github.com/mozilla/network-pulse/issues/731
[x] Background: white instead of grey https://github.com/mozilla/network-pulse/issues/700
[x] Card updates: titles black instead of pink, no intro text, no Read more link https://github.com/mozilla/network-pulse/issues/720
[ ] Text links: body text links black with underline instead of blue https://github.com/mozilla/network-pulse/issues/842

Open Network tickets for Gavin:

[x] Nav updates: show nav items instead of hamburger, update responsive states https://github.com/mozilla/network/issues/820
[ ] Font updates: remove highlight from banner titles and update all Arvo to Zilla. @taisdesouzalessa is probably best to oversee the Zilla update since she is most familiar with the styles https://github.com/mozilla/network/issues/303
[x] Dividers: update dashed divider to gradient + highlight text https://github.com/mozilla/network/issues/822
[x] Home page features: update Get Involved layout to look more like News layout https://github.com/mozilla/network/issues/823
[ ] Images: update to 16:9 aspect ratio https://github.com/mozilla/foundation.mozilla.org/issues/910

I will open these tickets and include checklist of changes, Sketch file, hover states...

xmatthewx commented 6 years ago

@kristinashu - this is mostly done, right? if there are important remainders, we should probably set up a new project board with Alan.

MozillaFoundation / foundation.mozilla.org