My Entire Agile Process to Redesign Scrimba.com
There’s a lot of ground to cover so let’s get to it! 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. Scrimba.com homepage before the redesign 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. 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 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. 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? » Read More
Like to keep reading?
This article first appeared on medium.com. If you'd like to keep reading, follow the white rabbit.