BACKSTORY
Kidocode is a hybrid technology and entrepreneurship school catering to young minds aged 6-18. Founded with a vision to nurture the next generation of tech innovators and entrepreneurs, Kidocode offers both online and on-campus educational experiences.
As the company grew and evolved, it became clear that their original design assets no longer accurately represented who they had become. Kidocode's progressive approach to education and their expanding reach called for a visual identity that could keep pace with their innovative spirit.
The challenge was twofold: create a fresh, modern look that captured Kidocode's forward-thinking vision, while ensuring the new branding remained approachable and familiar to their existing community of students, parents, and educators. The overarching need was to increase student engagement and create a more cohesive brand experience that truly reflected Kidocode's mission to empower young learners.
Break down, then recompile.
Although a small startup, Kidocode tends to dream big when it comes to revolutionizing K-12 education. Over the years, multiple projects, ideas, and teams had done incredible work throughout the company. Unfortunately, with the COVID-19 pandemic shrinking our team, work had become overwhelmingly unorganized. Many projects were simply not being accounted for, lacking follow-through, or being abandoned outright. More importantly, our team discovered that many things in motion were happening in isolation and were not being integrated as part of a larger plan.
"Kidocode needed to create a visual identity system that would capture their progressive approach to education..."
Establishing the company's brand, was a necessity to direct our efforts towards a common goal. Answering the question of "who we are" and "why we're doing this" became my top priority as the newly appointed Head of Design.
MY ROLE
At Kidocode, I led a small multidisciplinary team of 3 – 4 members (including me) that handle product design, brand, marketing, and business development.
Head of Design, 2020 – Present (Contract)
Product Designer, 2018 – 2020
PROBLEM
Prettifying to achieve clarity
The problem
Kidocode's previous visual identity was all over the place. Our various combinations of typography, logo usage, color palette, iconography and art style were getting out of hand and no longer fit the direction of the company.
Our learning platform UI had never been updated since the founding of the company. It was quite stale and generic looking and was essentially just using unstyled Bootstrap components which did not reflect our mission to increase learning engagement for our students.
An important consideration for evolving our visual style was to retain a sense of familiarity while enabling a more unified and meaningful brand direction moving forward. Being a contextually early-stage startup, our founders didn't want to lose any of the brand recognition they had worked hard to create over the initial years of the company
"We needed to retain a sense of familiarity while enabling a more unified and meaningful brand direction moving forward"
GOALS
Goals for our website:
1. Improve trial class signups
2. Showcase our community and product
3. Make who we are and what we offer more visible
4. Make "our why" very clear
Goals for our learning platform:
1. Update our platform UI to adopt the new visual language
2. Improve onboarding, navigation and learning UX
3. Improve learning engagement metrics
4. Make "our why" very clear
PROCESS
Debugging the organization
Designing a brand is about reflecting what your company does, how it works and why its valuable. If the way your organization works is problematic, you have to start there to get to a brand you're proud to be associated with.
To tackle the organizational bugs, I led seven (7) series of meetings between the design team, department heads, and other relevant stakeholders. Each aimed at resolving a specific component of the Kidocode offering.
Image: Team
1. Philosophy
We discovered our guiding philosophies and a common theme among them along with six (6) key principles to our educational approach
2. Curriculum
We consolidated a bunch of isolated documents into a single spreadsheet (that led to a proper database) with all the curricular information.
3. Product
We created clarity between the digital and physical components of our offering and repackaged them to enable more efficient communication between our sales team and customers.
4. Educators & Team
We gathered valuable information from every team member and organized bi-weekly inter-department meetings to highlight each team member's strengths, successes, and interests. This had a massive effect on improving team morale and recognition internally and externally.
5. Community
We compiled all the community-related efforts made over the years, including testimonials, events, and partnerships to showcase our impact within the community and build a deep sense of trust with our customers.
6. Programs
We renamed and reorganized our curriculum into meaningful programs our customers could understand and purchase with more conviction.
7. Data
We identified three (3) categories of critical data streams that required greater visibility and created a unified dashboard for our entire team.
Creating the bigger picture
A key final result from the previously held meetings was to put it all together in a visually meaningful diagram called the "Ecosystem Map" (shown below) that served as a single source of truth for everyone within the team. The diagram made it simple to identify and organize our entire company's efforts to see which projects fit into the larger picture. It's one of the few documents that our entire team still looks at and uses consistently to this day.
Image: Ecosystem Map
New logo exploration
Through our meetings, history, and external research I realized the significance of the "pixel" as one of the core concepts in our visual style. The "pixel" and "screen" serve as key identifiers of the digital transformation the world has gone through.
In modern times, so much of our daily life and our personality is developed through the sharing of pixels through screens. Combining these concepts allowed me to simplify our brand's essence which is "to be an educational ecosystem that develops impactful personalities for the digital era". Something most current global education systems don't do particularly well. Below is a snippet of the more interesting conceptual explorations that happened before arriving at the final concept.
Note: An important consideration for evolving our visual style was to retain a sense of familiarity while enabling a more unified and meaningful brand direction moving forward. Being a contextually early-stage startup, our founders didn't want to lose any of the brand recognition they had worked hard to create over the initial years of the company.
Image: Logo Exploration
Final Logo
Image: Final brandmark
Image: Final wordmark
The brandmark combines the concept of the screen + RGB pixels + a smiling personality. It represents the personification of our being through digital media. The balance of harsh lines and curved corners became an important theme throughout our design language to showcase the unification of technological + humanistic traits.
Opting for an unconventional typography system
Being a type nerd of sorts, I was faced with the dilemma of selecting a single typeface or multiple typefaces for our brand. I felt like there wasn't a single typeface that would both characterize our brand well enough to leave a lasting impression and serve as a workhorse typeface.
After exploring a variety of combinations, we very intentionally selected a combination of four (4) different typefaces that would help us formulate our type system for every unique and specific use case.Primary typefaces:Space Grotesk
Our display typeface for very large headings
Tenon
Our workhorse typeface for small headings and body text. Inter was selected as a substitute Google fonts workhorse typeface for when Tenon is not availableSecondary typefaces:JetBrains Mono
Our monospaced typeface for code-related applications
SF Pixelate
Our stylistic typeface to augment only the first capitalized character of display headings set in Space Grotesk
Image: Typography guidelines
Organizing color
Being a colorful brand, Kidocode was struggling with its overuse and abuse of color throughout its design language. My goal was:
1. To establish a clear hierarchy, naming conventions, and usage patterns that could encompass the entirety of Kidocode's needs, which included brand colors, UI colors, and an illustration palette.
2. To ensure that there were sufficient color combinations to provide variation and visual interest for a color-hungry brand.
Image: Color usage guidelines
Developing an icon system
Icons are a big part of any company's UI. They help provide a sense of visual direction and recognizability to the user's visual senses. Kidocode hadn't quite established any set of icons, and was like most startups, using whatever was freely available to them. Beyond just creating icons, my main goal was to establish the rules of creating them. So that anytime we needed an icon, we knew how to create one.
Image: Icon System
Being a colorful company, we needed separate guidelines for system icons vs. product icons vs. platform-specific icons to ensure that there were no misunderstandings in the methods used to craft icons with very different traits.
Image: Icon Guide
Our system icons, draw from the same concepts used in constructing our brandmark. We utilize exterior forms that follow the “screen” concept and have curved corners. Interior forms (those that are contained within the bounds of the main exterior form), follow the “pixel” concept and do not have curved corners and endings.
Our product icons, on the other hand, have a bit more personality and have flat colorful shapes as interior forms that do not have outlines. We chose this to provide an outlet for interesting abstract geometric forms to be used as part of our design language.
Image: Platform Icons
We introduced platform-specific icons as an additional icon system that would allow us to develop icons that required more character and detail for specific uses in our online learning platform. These icons cater to platform-specific resources (XP, coins, etc.) related to our system's gamification mechanics.
Crafting a meaningful art style
Kidocode needed a distinct art/illustration style. One that would allow it to create interesting visual layouts and compositions that work together without too much fuss. Here are the key components of it that we identified:
Image: Art style
Core components:
The RGB blocks [1]
Signify the pixel as the transmitter of information
Warm and cool noisy RGB gradients [2]
To provide visual texture and balance to compositions that would be too dull and flat otherwise
Additional components
Application windows [3]
To reaffirm the message of computing and technology as a core component of our brand
Waves of circuitry [4]
To visually remind people that underneath pixels lies a complexity of science, electronics, and engineering that we as a society tend to look past, but should instead pay homage to as the backbone of the digital world
Building steadily and surely
Redesigning and building the website
With all our brand elements set up, I started working on the website redesign. My first step was to create a set of goals for the website, based on research and feedback we had obtained from customers and stakeholders.
To speed up the design delivery, I focused on mapping out our site's information architecture to establish the appropriate information flow
Image: Website content blocking
Once that was approved, I created high-fidelity mockups of our pages and began working with my team to bring these designs into Webflow. The final result is something we're all proud of at Kidocode. To see years of work and effort come together and be presented in an impactful way through our website.
Image: Website hifi mockups
Applying our brand's new visuals to our learning platform
Kidocode's updated learning platform, is constantly evolving. We understood that the overall direction of the platform was to be an OS-like interface that would enable students to learn, play, build and interact with one another.
IMPACT
Our new logo
The wordmark complements the brandmark by utilizing a modern approachable geometric sans-serif for the “kido” characters, and in contrast, utilizes a custom pixel type style for the “code” characters. Once again, this is to show the merging of the human personality with computers.
Image: Old vs new logo comparison
Standout typography
The updated typography system allowed us to have a great mixture of modern Grotesk typefaces with a unique pixelated font signature stemming from SF Pixelate characters and some distinctive characters in the Space Grotesk family. Here's a clear example of how the our new type system used in combination, produced much better hierarchy in a hero section of our website.
Image: Old vs. new hero section
A unified visual language across our website
Image: New Learning Paths Section
Image: New team section
Revamped learning platform
With our website done, we set out to apply our new visual identity across our learning platform. Here are some of the key areas we sought to improve, and how we affected our engagement metrics.
Better course navigation
We revamped our course navigation structure to be more informative and easy to navigate. Giving students a clearer picture of the tasks they had completed. With a more compelling layout and information hierarchy, we noticed a +31% increase in average session length.
While at first glance course navigation may appear unrelated to session length, our moderated user testing revealed that better course navigation did effectively motivate students to continue learning, simply by having better clarity of what % of tasks remained and how many points they would earn from completing those tasks.
Image: Learning Platform: Improved Navigation
Improved onboarding and UX
By introducing and onboarding flow, to replace many of the manual & physical aspects of our trial class sessions, we managed to reduce the overall time/costs by ~50%. This proved to be a critical achievement as part of our goal to streamline our operations due to the impact of the COVID-19 pandemic on our business.
Image: Learning Platform: New Onboarding Flow
From multiple feedback sessions with students, we received a lot of request for dark mode from our older students. With the introduction of dark mode, we saw an average of +17% increase in student logins after 5PM, indicating increased engagement simply from considering the UX of students that prefer to get their work done later in the day.
Image: Learning Platform: Improved UX with Dark Mode
Quality engagement
We also revamped our task structure to provide better statuses, hints availability and task specific chat. This resulted in a ~62% reduction in task revisions and resubmissions. Once again, this proved to be a critical improvement for our business model scalability which allowed more tasks to be answered correctly, verified automatically and require less manual intervention from our trainer staff.
Image: Learning Platform: Clearer task statuses, hints availability, and task specific chat
From our feedback gathering from our parent community, we added task specific reports, lesson summaries, and leaderboards to help students, trainers and parents more easily visualize student progress. We saw a ~58% reduction in parent complaints and discussion time, just from adding these features.
Image: Learning Platform: Clearer task statuses, hints availability, and task specific chat
"We managed to increase average session length, reduce trial class time & costs, reduce student task revisions, and reduce parent complaints & discussion time..."
Our updated navigation, improved onboarding, UX, and engagement quality has really proved that investing into brand can really help steer the direction of a company to its desired path. Our new look isn't just for show, but has meaningfully directed the "why" of our business towards a more compelling offering for student learning and engagement.
REFLECTIONS
Reflections and final thoughts
Being a relatively small startup has its advantages and disadvantages. One major disadvantage is that a lot of what gets designed rarely gets built. Taking this into consideration, our design culture needed to reform itself into one that's a little unconventional, but that works for a startup of our nature.
We've learned to spend less time trying to ship something revolutionary and "perfect" and spend more time thinking about what incremental improvements can be made. Having not established this culture before, many of our previous concepts and designs simply never got built. Ever.
Nonetheless, a valuable reminder to anyone reading this; is that all your crazy ideas/attempts collectively influence the final output, even though individually, they may not be realistic or sensible at a given time. The lesson here is: Take things one step at a time. Dream big, and then build step-by-step towards that dream, one pixel at a time.
More case studies
