Redesigning react-finland.fi
A couple of weeks ago Juho Vepsäläinen, one of the organizers of React Finland conference that will happen later this year in Helsinki, reached out to me and asked if I could help them with a redesign for https://react-finland.fi. Although they already had a website with good overall information architecture and content, they never invested time into visual design.
As an experiment, we agreed to spend two days and see what’s possible to improve with such a limiting constraint. We defined a set of goals we wanted to achieve during this process. Establishing a stronger brand and gaining more credibility for the conference as well as making website more accessible on mobile devices were among of those. The result is a completely redesigned website and a new brand. We also decided to document the design process.
The Process
To shorten the feedback loop, I proposed to sit together in my office and spend time going through the existing website to identify possible issues and areas where we could improve. The result was a list of actionable items. As we progressed, we marked items as completed. This process gave both of us an excellent overview and kept us focused on what’s important.
Design Research
Although some of the issues like “Make logo to navigate back home” were easy to fix, some were defined in more vague terms. For example, “More Finland in the teaser?” or “Polish typography” could mean different things to different people. Using some common associations like “Aurora”, “north”, “forest” etc. that come in mind when thinking of Finland, I created a mood board out of images and patterns that helped me to communicate and evaluate my ideas with Juho.
After some search for a suitable typeface to use, we’ve got lucky to find Finland Toolbox — a free set of graphic elements that can be used by designers. The toolbox also included a classy typeface Finlandica which we decided to use to give the website a unique Finnish look & feel.
New logo
As I started sketching first ideas in Figma, I quickly realized that I’d need to update the logo. The original logo was a simple iteration on the original React.js logo, which, in turn, is an “Atoms for Peace” symbol. Additionally, it happens only to have a multi-colored version which would be a problem when used on darker non-monotone backgrounds.
The new logo is ultimately a simplification of the original React logo with the atom replaced with the Finnish flag. Simplifying the logo allowed me to quickly create a monotone version which supposed to be used on complex backgrounds.
The Grid
A grid is a framework that helps structure the content on the page, so I tend to start my design exploration with it. Grid sets the relationships between the page and its content but also between different components. React Finland has a centered 6-column grid that is simple yet powerful enough to create well-balanced compositions. Lots of white space and clean typography is used to structure elements on the page and illustrations from the Finland Toolbox are being used to relax it a bit.
The Implementation
I love designing with code, so after the general direction was set and we both agreed on it, I jumped on the code editor. The website had already been set up using a custom static site generator written by Juho Vepsäläinen. Under the hood, it is built using Webpack and React, so I’ve got Hot Module Reloading for styles and React code out of the box. To me, this is one of the vast benefits of this stack: seeing the result in the browser instantly without the need to reload anything improves productivity by order of magnitude.
Styles were written in “vanilla” CSS (i.e., no BEM, CSS-in-JS, etc.) using Less as a preprocessor. This is a good-enough setup if you’re building a website and not working on web-applications and there is no need to complicate things by introducing CSS-in-JS or similar techniques. Ultimately, I switched to Sass (with SCSS syntax) since I was missing nested media queries in Less, but it almost worked out without the switch.
The new website uses modern CSS grid to implement the layout and some other cool CSS3 features like transitions to make it even more delightful.
I’ve prepared the screencast of the two-day process squeezed in 4 minutes.
Good design = money
Usually, it’s quite hard to measure the ROI of design. This time, though, I could get some insights since React Finland is very open about their sales and expenses. After the new design went live, they instantly saw a spike in ticket sales. This could have been just a coincidence, of course, but I like to believe it is not :)
There are lots of IT conferences happening around the world, and it’s becoming harder and harder to stand out and remain the one that will be remembered. Strong brand in general, and the website, in particular, are two very important mediums to communicate your values and connect with your audience, be it attendees or potential sponsors. When done right, it helps to sell tickets, too.
PS: I’ll be giving a workshop “Styleguide-driven Development” at React Finland. If you’re into design systems, component libraries and React, there are still tickets available.
