Scrimba is an online platform to learn to code from real teachers. But unlike the many other competitors, their secret sauce is that they’ve developed a unique technology that lets teachers record their screencasts so students can stop at any point and jump directly into editing the code. In this way it’s similar to being taught with a tutor right next to you. Pretty neat!

After a couple of years of organic grassroots growth the founders approached me. Being mindful that they are still early stage, with limited funds to invest in “branding” and a small team to manage the 100,000+ students that frequent the site, I was tasked to reimagine the visual design and develop a fast and agile rebrand and design system in just eight weeks.

I’m going to take you through each of the stages which I hope can help you increase efficiency and output when planning your next web project.

Industry audit

Before beginning to brainstorm visual ideas I often find it crucial to take a step back and conduct an industry audit. This starts with listing their top competitors and reviewing the respective landing pages. Often the founders/founding team are so “close” to their industry and are moving so fast to innovate that taking some days to zoom out to a “birds eye” view from a newcomers perspective can really help focus, get everyone on the same page and identify routes to differentiate and go deeper.

I use a Chrome extension called Full Page Screen Capture

With the screenshots side by side you will already start to see clear similarities and differences. I will then dig into key areas which include Content, Color, Imagery, Iconography, Typography and Copywriting.

What to look for:

Content. Review the content and layout choices and draw up basic wireframes. This further emphasises each site’s underlying structure and rhythm. Note key sections and list them in order. e.g. Reviews/testimonials, pricing, features, special offers, FAQ, video intros. This exercise helps to surface what the industry feels is important to convey. Now ask yourself, are we “missing” anything? For sure the incumbents have done a tonne more user research with vastly larger resources and so consider their choices when informing your own content and communications strategy.

Color. What are key colors used across each site? Note down colors of calls-to-action, buttons, backgrounds, navigation etc. Create swatches of commonly used colors for each site. This knowledge will help to develop your own brand swatch.

Imagery. What visuals are used? Is there an emphasis on photography or illustration? Are there specific styles within these categories such as hand-drawn or vector? Do they use eye catching GIFs? Are they using stock sourced assets or is it likely custom made? Are people shown? If so note down their style and environment. This often gives an indicator of the company’s target audience. How does your brand wish to compare?

Iconography. Are icons used? If so, where? Are they used for navigation or decoration? What library are they from? Are they using fancy new things like animated Lotti SVGs?

Typography. What font choices are used? Is there dynamic use of large and small fonts to give personality and assist the reader experience? To find font choices you can inspect the page in developer mode or use plugins like WhatFont to quickly pull out styles.

Copywriting. Text takes up perhaps the majority of a site so don’t leave copywriting consideration to the last minute. Is the site text heavy and dense? What is the brand tone? Chatty or formal? Do they talk about feelings and evoke emotion or is it practical and dry? For weekly inspiration check out https://www.heynishi.com for some pretty, pretty, prettttaaaay good…copywriting (and their 6 rules) When organising copy I like to use the A.I.D.A principles to funnel users effectively into a sale — Attention, Interest, Desire and Action.

Mapping Results

With all of this data shared in a Figma file, you’ll start to build up a map of where the brand could lie on a competitor matrix. As a startup, you’re looking to upset the incumbents, so you’ll also want to look outside the box. For this I like to conduct audits of adjacent tech firms outside your domain to gauge wider trends. In this case we chose well known B2C firms, marketplaces and SaaS. We went ahead and repeated the process of screenshooting, analysis and color profiling.

Sharing this with the team can unlock things they perhaps felt or knew subconsciously but hasn’t explicitly been presented with or openly discussed. This kicked off short workshops and “homework” where the brand was further distilled using frameworks such as the “3 hour brand sprint” from Google.

Scrimba is: friendly, fun, innovative and inclusive!

Agree on brand values

This groundwork all helps to build “buy in” from decision makers so that my continued visual development process can flow autonomously and further feedback is kept as objective as possible. Only then do I begin exploration to visualise styles and ideas suited to the markers we had put down such as “playful illustration” and “organic decoration”. Scrimba is friendly, fun, innovative and inclusive!

Data + vision

The team had a tonne of insight as both quantitative from analytics and qualitative through customer surveys and interviews. So after getting debriefed I dug into Hotjar and Google Analytics to better understand who the current audience was, their behaviour, goals, frustrations and feedback. However I can’t stress enough, “don’t get drunk on data!”. It’s important to balance interpretations of data with experience and vision — back in the day, no one asked for a car, they did however ask for a faster horse.

Several key insights were that only 20% of the visitors were estimated as being female, only 10% were browsing from mobile devices and the top three visiting countries were USA, India and China. Cohorts were established as engineering students, and professional engineers looking to re-skill in new languages and frameworks.

We all agreed that in order to encourage a broader demographic to love the platform the redesign should represent a diverse range of characters, mindful to preference more androgynous styles than gender stereotypes.

A design system

We worked in one and two week sprints on core sections of the site starting with the course page and homepage. As new modules and components were defined and styled I began establishing a design system file in Figma for consistency and efficiency that could link and update components as the design was expanded and iterated on across the site and online profile.

When deadlines are short and budgets are tight I look to open source resources like Figma’s plugin community as well as Producthunt.com. If you’re stuck for where to look you can also type queries into twitter to see what the design community offers up. For example; “I need a friendly squishy icon font” I think you’ll be pleasantly surprised by the curation there.

Color, typography, styles, buttons, alignment and grid, were all boards added to the Figma Design System file. Components from these can then be shared across all Figma docs in the Scrimba brand project folder.

Wireframing low-fi & hi-fi

I work using two main types of wireframes. Let’s call them “quick and dirty” and “high fidelity”. Quick and dirty are often used in earlier stages and aim to get a basic agreement on layout, structure and volume of content before design starts. High fidelity wirefames can include components of a style guide (if one exists) — rounded corners, grid, typography, buttons and correct dimensions of components such as videos and images ready for further styling and layout experimentation.

Going live (before it's all ready)

Now let’s look at the some of the outcomes. Starting with the homepage. We pushed this live first knowing there would still be old designs for other parts of the site.

The hero section any homepage is a critical component when it comes to new visitors. Sure you can serve up multiple versions based on the user’s location or a designated cohort, but in this project we were running lean and sticking to one (logged in users would later be directed to more of a dashboard-esque experience where they have all their resources and courses to hand).

UX copy

You can A-B test all day long, or you could take a long hard look at your UX copy. We went through many revisions of the hero copy and it’s by no means final but we all agreed that it should refrain from generic boasting like “the best” or using throw-away terms like “innovative” and “interactive”. We wanted to put the tech after the value for the user, namely to “fast-track their career”. This is stated “above the fold” with two clear USPs listed just beneath, the tone is kept personable, light and friendly.

Be bold, break conventions

In the coding school universe courses are dominated by the logos and colors of the respective languages and so tend to all adopt a similar look. I suggested we take a more abstract approach to the course cover designs by using simple organic shapes to create unique arrangements based loosely on the course theme. I then created color groupings by framework to assist a user’s subliminal pattern recognition and aid their navigation of the site.

It was important that new visitors could quickly find a course for them, so instead of simply arranging all the courses in a long grid as the former homepage we grouped them under filterable categories in a carousel so that when we review the page analytics we can better understand user intent.

We encouraged carousel scrolling by extending content off of the page edges emphasising that there is more to see, and fading those cards on the outer edges with a gradient mask. Balancing a clean minimal UI with intended site use is delicate and the aim is to try to remove explicit UI such as scroll arrows when we see evidence of the secondary functions being adopted like swipe for trackpad and mobile.

Using layouts more common in editorials than e-commerce lets Scrimba introduce their curatorial voice to what had been a purely functional approach.

Working around “blockers”

Photography has a huge influence on a design. One issue I faced is that the photographs of teachers were provided by the teachers themselves, something they normally used on their social channels. This created inconsistencies in image quality and style when presented in the context of the Scrimba brand. Rather than stopping the process for new photos to be shot I used gradients and color filters to create a sense of brand consistency.

Just like Airbnb the intention is to replace these user generated photos with art-directed shots by a Scrimba photographer. For the art direction I used Unsplash.com to vet shots that fit the proposed style; casual attire, smiling, outdoor, natural lighting, waist up, and bokeh effect or blurred backgrounds.

Closing the design > developer feedback loop

From Figma to code I know that there is always a balance between shipping on time and nailing the details. The product must function, be technically lightweight and secure, sure but it doesn’t stop there. A pet peeve I’ve had as a designer is that leaving feedback using tools like Github or Pivotal Tracker is laborious and painful as you have to first describe the context before you begin describing the improvement. Thankfully I came across this tool called Pastel that lets you pin comments directly onto pages making it fun and fast to leave and review feedback.

List and launch 🚀

Refinements that weren’t key for V1.0 launch such as page and element transitions and UI animations I either mocked up some interactive examples using Figma’s smart animate feature, or listed links to visual examples I found across the web. These were then assigned an importance number based on impact and complexity and dropped into a Trello board so the team could continue on making the V1 launch date.

What next?

We implemented V1.0 redesign across the homepage and course pages over eight weeks and have begun to express a unique brand personality in a very competitive space. Remaining sections and the all new user dashboard will be rolled out next as with continued polish.

Taking into account that people generally don't like change feedback from the community has been positive and many of the voices we heard from were female; a massive underserved market segment. There’s lots more planned and the design system framework and groundwork to establish the brand principals will allow the team to continue to build on and evolve as the company scales.

Originally published on Medium – My entire agile process to redesign scrimba.com

My name is Daniel Butler, I’m a tech entrepreneur with a specialism in digital branding and design. Connect with me on Twitter or Linkedin. Details of my projects can be found at DNLBTLR.com ✌️