Platform UI Refresh

[justinscherer]

Summary

Refactor the Platform UI from the bottom up using Brad Frost's Atomic Design Methodology

The methodology has us start with the most basic, fundamental components of the UI, the atoms, and cascade those designs into more and more complex components(atoms --> molecules --> organisms --> templates) until we arrive at new page templates.

This work is intended to coincide with the frontend javascript framework re-platform into React.

Acceptance criteria

Every piece of work must:

1. be WCAG 2.0. compliant
2. be tested with min. 5 people
3. be critiqued at least once by at least one designer and other staff member (at organism level)
4. be properly responsive and mobile first
5. have a written rationale attached to it
6. align with our existing brand
7. map to a currently existing component in the PL (i.e. the goal is not to create a whole bunch of net new components)

For reference, there is an existing list of UX debt to be addressed in this epic

[justinscherer]

I am going to recommend that we don't bother with critiques until we can see how our atoms and molecules start reacting with one another at the organism phase.

[Erioldoesdesign]

Just amended point 3. to include "by at least one designer and other staff member (at organism level)"

[rjmackay]

1. Is the theory that you work inwards from atoms towards templates?
2. Does this represent a rebuilding of UI components (both design and markup)? or just a review at every level?

[justinscherer]

@rjmackay

"Is the theory that you work inwards from atoms towards templates?"

Yes, the idea is to work from the littelest things to the more complex things, adjusting the foundational, atom elements in the process.

"Does this represent a rebuilding of UI components (both design and markup)? or just a review at every level?"

It represents assessing them and designing them, but not implementation in the PL/Client.

[rjmackay]

Thats useful thanks.

I might be too hopeful here. But if possible, it'd help to have a best guess - with thoughts from @Angamanga and @middle8media - whether the scope of design changes is likely push us towards just updating things in the PL or to rebuilding some/all of them from scratch.
If that answer is "We have no idea yet" then thats useful to know too.

[Angamanga]

@rjmackay @middle8media @justinscherer @Erioldoesdesign
My understanding is that our pattern library is built from atoms to pages but we name it differently, basics and fragments are similar to atoms, modules are similar to molecules, blocks looks like organisms and pages are our layouts. Where we lack is templates. The pattern-lab they refer to looks very much the same as our Pattern Library, only that they use mustache and I cannot figure out if there is a way of exporting the css or if its for design-documentation only?

I think update or rebuild depends on how big the design-changes are. We could for example restructure and use the atoms->pages concept more strictly and rebuild components where necessary.

[justinscherer]

I think let's just wait for us to make some progress on these tickets and we'll have another conversation about impact on React rollout in a couple weeks.

[rowasc]

@justinscherer @Erioldoesdesign do you know what issues from the UI refresh epic will be / should be worked on during cycle 6? (for the design team)

@Angamanga do you have any specific priorities in mind/ things we need for the migration and are blockers?

cc @jrtricafort please jump in if this was discussed already or you know the answer :)

[Erioldoesdesign]

@rowasc @justinscherer We talked about this in the Design implementation - Process sync call just now but just so it's documented here too.

Me and Justin will take a look tomorrow when we sync up to prioritise for the remainder of the week he is OOO. We'll be moving design tickets into cycle 6 as part of that sync up :)

[rowasc]

@Erioldoesdesign excellent thankk you !

[jrtricafort]

@rowasc I don't know the answer. @justinscherer and @Erioldoesdesign can you provide your input here?

[Erioldoesdesign]

@jrtricafort We moved a few design tickets into cycle 6 :) when Justin is back on Monday. There may be more we can tackle but there's a good amount in there for now 👍

[jrtricafort]

Thanks @Erioldoesdesign and @justinscherer !