My entire agile process to redesign scrimba.com

There’s a lot of ground to cover so let’s get to it!

Daniel Butler
Jun 8 · 11 min read

Scrimba.com 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.

A screenshot of the old Scrimba homepage using a grid of courses and standardized colors of coding languages and frameworks
A screenshot of the old Scrimba homepage using a grid of courses and standardized colors of coding languages and frameworks
Scrimba.com homepage before the redesign

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.

Screenshots of the direct competitor homepages
Screenshots of the direct competitor homepages
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 swatches of direct competitors
Color swatches of direct competitors
Color swatches for each competitor

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.

A collage of visual styles taken from various competitor websites
A collage of visual styles taken from various competitor websites

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. 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?

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.

Color swatches from other tech company websites
Color swatches from other tech company websites
These tech companies use more muted and pastel palettes
Comparison of tech site colors with competitor colors
Comparison of tech site colors with competitor colors
Color swatches of competitors VS other tech sites

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!

Personality sliders
Personality sliders
Personality sliders

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!

Some rough design treatments from photography, color, illustration and styles
Some rough design treatments from photography, color, illustration and styles
Early “quick and dirty” design treatments

Data

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.

illustration choice from Pablo Stanley’s Peeps
illustration choice from Pablo Stanley’s Peeps
Open-source illustration library by artist Pablo Stanley configured into our own “Peeps”.

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.

Illustrated characters laid out in a design
Illustrated characters laid out in a design
Some Scrimba characters crossing cultures, age and style

Driving the train whilst laying the tracks

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.

Color palette
Color palette
Color palette
Chosen fonts and font heirachy
Chosen fonts and font heirachy
We opted for a 6 column grid and 8px vertical scale, but also allowed for 4px increments
Organic blob shapes to be used to create depth and texture on the page
Organic blob shapes to be used to create depth and texture on the page
I used a Figma plugin called Blobs to generate these organic shapes
Icon font Pika
Icon font Pika
Squishy icon font set Pika 500 from Dutchicon

Wireframing

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.

Outcomes

Now let’s look at the some of the design outcomes. Starting with the hero section of the homepage.

Modular design of the hero section
Modular design of the hero section
The salesy modular hero option

One of the directions was to be more “salesy” with deal modules similar to crafts marketplace Etsy.com. However the team felt as Scrimba is still young and relatively unknown by many so the hero should be used mostly for brand messaging.

Chosen design of the hero homepage.
Chosen design of the hero homepage.

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).

Voice and language design

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.

I suggested copy that was light, personable and sometimes a little quirky

Breaking 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.

Old course covers using standard logos of coding languages and their colors
Old course covers using standard logos of coding languages and their colors
Old course covers
New course covers using organic shapes and pastel color palette
New course covers using organic shapes and pastel color palette
New course covers

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.

Carousel design of courses
Carousel design of courses
Pick your next skill from the carousel

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.

We had fun with the grid. Using layouts more common in editorials than e-commerce lets Scrimba introduce their curatorial voice to what had been a purely functional play.

editorial layout of courses
editorial layout of courses

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.

video covers using photography and image treatments to unify under the brand
video covers using photography and image treatments to unify under the brand
Video covers

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.

Tutor carousel
Tutor carousel
Interactive elements lift and rotate when user’s hover
Tutor profile
Tutor profile
Public profile of a teacher
User dashboard homepage
User dashboard homepage
For logged-in users their homepage is a dashboard using a modular layout. I included future proposals for gamification
Dropdown menus
Dropdown menus
Adding whitespace, typography and border styles from the design system to transform “boring” menus

Implement, refine, repeat

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.

Pastel app for leaving contextual feedback
Pastel app for leaving contextual feedback
A shot from Pastel showing a recently pinned comment for review

Those 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.

Public user profile
Public user profile
Public profile of a user
Section of old Scrimba course page. Experimenting with color combinations.
3 examples of course page designs using variations of color on key components
3 examples of course page designs using variations of color on key components
“Sticky” CTAs like BUY NOW follow users as they scroll the page reducing friction to convert

What next?

We implemented the 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. Feedback from the community overall has been positive and many of the voices we heard from were female; a massive underserved market segment. An area we do need to adjust for is legibility, as in some circumstances the combination of pastels with white text has been a challenge. 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.

company avatar for social
company avatar for social

Thanks for reading! It takes hours of research and attention to create content like this article. Please give it some claps to motivate me to keep writing (tap away on the 👏 button). And feel free to drop a comment below.

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 ✌️

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store