Building the future of Moneyfarm UI
Planning
We began planning the architecture of our new front-end stack some months ago. Our design team had come up with a beautiful, customer-feedback-driven fresh new look for Moneyfarm.com and we saw this as an opportunity to move away from the aging Angular frontend In a few weeks, our collaborative discussions formed a fundamental plan to kickstart development.
As we had agreed to build the new application in React, we chose to follow atomic design, CSS in JS with styled-components and Redux for application state management. To maximize reusability and consistency between our products, a UI component library is also continuously developed and shared across teams.
Grounding
First of all, we established a proof-of-concept for our component library. After the git repository was initialized Babel, React, styled-components and Jest was installed. We left out create-react-app by intention, as the library does not need an application bootstrap.
Next, we set up Babel, by adding @babel/react and @babel/env to the plugins list in the .babelrc file.
As a finishing step, to compile the library, we tell webpack to bundle the project as a UMD. Later on, we will publish the built artifact as an NPM package.
Storybook and react-styleguidist were the finalists to be considered as a wireframe to our styleguide. We chose the latter as react-styleguidist has got all the features and flexibility we dare to desire: An editable component showcase with style guidelines and page building blocks. Our front end dev team is also spoiled by the auto-generated documentation.
We had a lot of discussions while fleshing out the details of our design foundation. Some initial rules and principles were formed in the first few weeks: base metrics, typography and color palette. Most of them landed either as a configuration constant, a rule in our reset.css or became part of one of the themes.
It was fun to get to grips with Docker, Webpack and Yarn, also challenging to customize some of the core functions of react-styleguidist, but we ended up having an importable library and a continuous integration pipeline to deploy the styleguide app and publish the NPM repo; we could move on to the next phase: implementation.
Starting development
After the styleguide and the library were established, we began development with the most basic building blocks; Button, Link, Paragraph and Heading.
These were perfect to get more acquainted with React and styled-components. Whilst in development even the most simple ones gave us some valuable experience that could be turned into further maturation of the library and design principles — a set of standard font sizes, line-heights, font-weights, further refinement of the palette and a custom reset.css were all joining as pillars of the design system.
Fun fact — same components designed for our applications are also serving as building blocks for our custom styleguide.
All of a sudden, our typography came to life! We played around with the components and imported them into prototype apps to see how they behave.
Moving on, with contribution from frontenders, platformers, and the continuous support from our designer, Carol, we have built many more components. We created the Header and the Footer components then came the Logo.
We quickly reached the point where we could not evade the topic anymore: screen responsiveness and layout - so we went back to the trusty whiteboard. After sketches, discussions, and debate, we defined our screen sizes, some basic rules for responsive behavior and metrics for a grid layout.
More to come…
As I write this article, the authentication screens are getting finished. It is really exciting to see all these parts converge into a living application, even more enticing are the new design prototypes! I can’t wait to work on them and see them operate in production!
