2020-07-13: MFE Product Design session with UX Designer Ciaran Duffy & special focus on Design Systems

Thank you @ssmusoke for mentioning the history with Bootstrap. I had seen some of the comments around the recent work to incorporate Bootstrap to achieve some goals for responsiveness but your comment prompted me to go back through all the threads from 2018-2020 about Bootstrap w.r.t. the RefApp. Very helpful background and a good lesson-learned for me to keep looking for previous conversations in Talk. I agree with your concerns and it feels like a good time to re-evaluate whether we want to continue with the Storybook styleguide that was set up a year ago or move forward with an established 3rd party guide. This is just meant to restart the conversation and help us get together about considerations. I’ve been concerned already about the need for clearer designs and UI structure (as you summarized so well) and how it feels like this has been slowing the squad down so it seemed like a good topic especially as we engage more with Ciaran. We’ve been referencing the storybook styleguide but in my humble observation so far it’s not complete enough to get everyone on the same page and move quickly. Nor does it claim to do that - it sounds like the idea had been for the storybook styleguide to be a quick trial, and for us to see if we’d want to continue building it, or switch to a 3rd party.

One of the points that you mentioned quite a bit back in 2018 was the need for “Responsive functionality out of the box to support web and smartphone form factors”. :+1: :+1: :+1: This seems mission-critical for a 3.0 Frontend - I keep hearing requests for greater mobile/tablet responsiveness both from talk posts and from squad conversations (like PIH’s recent COVID experience), given how many sites’ frontline users are asking for touch-friendly interfaces and the increasing need for tablets over computers in the pandemic response.

The fact that we’ve already started using Bootstrap in the RefApp, and that there are already approaches that would help us handle React and Angular, is quite promising. If we decided we liked Google’s Material UI better there do seem to be ways of combining both (e.g. overrides to Bootstrap or this free project) - but I’m getting ahead of myself.

For those who, like me, hadn’t been fully aware of our Bootstrap history - There was a GSoC-2019 project on this topic: Bootstrap as a foundation for Reference Application UI Project (thread of updates from 2019 here. It sounds like there were a number of upgrades done where ultimately Bootstrap was used to improve mobile responsiveness but we still kept the old RefApp style guide. Is that a fair summary @ssmusoke?

(Tagging you @mogoodrich as well as I see you have the most and the most recent commits to the UI Commons repo, as well as a recent history of interest in Material vs Bootstrap (and some challenges w/ the 2.10 bootstrap-related changes), so will likely have some thoughts