Notifications

Good job! You’re all caught up

Join challenges and check your notification settings if you don’t receive notifications. We’re actively adding new notifications. Read our blog post for more info

Notifications
TOSCA Editor - Web Application Wireframe Challenge (1)
Dismiss notification
Earlier Dismiss All
You have no more notifications

December 18, 2019 Putting the “We” in Website: How the Passion Economy Built the New topcoder.com

You know how it goes. Things change and your brand needs to evolve. At Topcoder, we recently underwent a major brand overhaul. With new data capabilities and the exponential growth and achievements of our company and the incredible talent in our community, it was time for an all-encompassing Topcoder website refresh, rethinking how we treat the brand and how we present that brand to the world.

For the website, that meant new videos, new copy, custom-designed case studies, a simplified web and mobile experience, and more. It would have been easy to make the list of “musts” and hand them off to an agency. And Topcoder purposefully does not have a large internal marketing team. We didn’t want to cut corners or take on unwieldy challenges internally, and we wanted the redesign and new brand launch to happen swiftly. So, how’d we do it?

Through the passion economy of course. We used our own platform and other gig platforms and gig resources to get this big work done. We recruited outside freelancers, integrated them into the Topcoder platform, and used their skills to fill the gaps in our own community. We hired a freelance motion graphics designer and a copywriter referred to us by our content partners at Verblio. We even sourced voiceover talent from voices.com. Here’s more about how passionate and skilled community members and freelancers helped us create an all-new website and brand experience.

Forming a Talented (On-Demand) Team

It was a dynamic process, tapping the on-demand crowd at its best. Website development was completed 100% through the Topcoder community, through a combination of open challenges and tasks using our Talent as a Service platform. For our CMS, we used WordPress. Integration was handled by our go-to WordPress guru and Topcoder copilot, Quesks. QA and crowdtesting was handled entirely through the Topcoder community. In some cases, the QA cycles were hyper-focused on specific aspects of the site, like mobile responsiveness and accessibility.

Early homepage hero concepts. These were partly used for exploration and helping to define what the new brand language could become.

First, we sourced initial concepts and design explorations from the larger Topcoder community of designers. We then worked with those designs internally to build the first version of the new Topcoder brand refresh and the first version of the website UI kit. In parallel with the initial website concepts, we worked with our internal team to rethink the overall website structure: sections needed, mapping the user journey, new features for customers, and how to position the Topcoder brand better than we ever had.

Early explorations around using shapes as a design element. This later evolved into the gradient “blobs” that are in use today.
Concepts around how to treat different kinds of content and layouts

With a new sitemap and structure, along with our new UI kit, we launched a series of challenges to the design community to start executing on our vision. As we were designing, we were also building out and expanding the overall UI kit. What started as a basic guideline quickly turned into very specific rules, specs, and reusable assets. Parallel streams of copywriting, design, development, and video content greatly increased the cadence of getting tangible things that we could react to, refine, and share with the company.

We completed everything in an astonishingly short time—just 6 months from kick-off to launch. What can take most companies over a year, we did in a fraction of that time, thanks to the incredible talent in our crowdsourcing community and a few smart tools.

Tools & Strategies to Minimize Friction and Maximize Results

In order to execute this project with minimum friction and seamless integration of internal and external resources, we tracked every aspect and phase of the site through monday.com. This allowed anyone within Topcoder visibility into where we were and the progress of each item. It also allowed us to easily integrate outside freelancers and Topcoder community members, opening up collaboration while keeping everything in one place.

The site design was created in Sketch. This allowed us to have a single source file type and more importantly, made sure elements were consistent. We created the entire Topcoder UI library in Sketch, as well, and shared it with anyone working on design.

Early homepage hero animation test. Working through timing, flow, and interactivity.

Because we had numerous designers all working on different parts of the site at different times and in different parts of the world, we needed to figure out a way to distribute updates to the UI library, manage different versions of designs, review and provide feedback, share designs with stakeholders in the company, and handoff completed design to developers. We needed to do all of this remotely and seamlessly.

To do this we selected a tool called Abstract which is like Git for designers. It greatly increased our efficiency and solved a lot of the remote and distributed team challenges we faced. Since then, we’ve actually integrated Abstract into Topcoder R&D to build Connect and the Community platform and have started using this same process for select clients and projects.

Team Effort Deserves the Spotlight

In the five or so years that I’ve been at Topcoder, this brand overhaul has been the largest, most fundamental shift in how we talk about and present Topcoder to the world. And we’re just getting started.

It took incredible effort on the part of our Marketing team as well as healthy collaboration with our Offerings, Sales, Community, and Delivery teams as well. Every person from our right-sized marketing team touched the website in some way with our VP of Marketing, Clinton Bonner, leading the charge. Clinton allowed the team to run with the vision, trusted us to make decisions, and gave us the breathing room to execute quickly. That kind of trust is essential.

And of course, we couldn’t have done anything at the speed and quality that we did without the Topcoder Community. A special thanks to DaraK for being my right-hand woman, and Quesks for handling all things development and QA. Without them, a lot of this wouldn’t have been possible.

We really hope you enjoy the new Topcoder.com. I believe it’s a fantastic example of how a team with an ambitious project can bring their vision to life through the on-demand talent available to us all.

We’ll leave you with a fantastic and new Topcoder animated video that really puts the new brand in the limelight. As mentioned, the video was designed and voiced by on-demand talent!


Trevor Gerring

Creative Director



UNLEASH THE GIG ECONOMY. START A PROJECT OR TALK TO SALES
Close

Sign up for the Topcoder Monthly Customer Newsletter

Thank you

Your information has been successfully received

You will be redirected in 10 seconds