- Brand
- Development
- Identity
- Strategy
- Web
- Experience
- Design
- Development
- Market
- Search
- Content
- Social
Re-Imagining The Open Source User Experience
Overview
Building community within emerging technologies.
The {code} team, first launched as the open source division of EMC, began branding work with Fullstack in 2016 when EMC & Dell Computers agreed to merge as the newly formed DellEMC. Starting in 2018, {code} rebranded once again, to encompass all open source under Dell Technologies. The {code} initiative had reached success as future Dell Technologies customers interacted through the {code} community and its platforms. As an open source division, it's flagship website was put together over time, as one off projects. With 2017's rebrand, the website needed to be redesigned and rebuilt as one cohesive property.
Discovery
The goal: build something cohesive, simple, and on-brand.
We looked to the {code} teams' passionate group of open source enthusiasts and its robust community of developers to understand how they explore open source online. The purpose of the project then became clear: bring everything together and make it intuitive, yet consistent.
Strategy
Focused on projects, community, team & social.
A UX redesign can be complex. There are a lot of variables and unknowns that can lead to potential failure down the road. If we wanted to succeed, we had to be specific with what areas we would focus on. We knew that to build for an open future, it meant not only reimagining how things flow, but also weaving transparency into the sites fabric.
Strategy
Crafting a simple, open world experience.
To ensure the presentation and arrangement of all elements on the site would be as simple & open as possible, a clear navigation and layout system was needed to simplify the browsing experience and direct users towards what they needed.
Navigation Design System
Primary
Level
Secondary
Level
Page Design System
Overview Page Template
Individual Page Template
Overview Page Examples
Individual Page Examples
Design
Telling stories, with pictures.
We worked with the {code} team to elevate its already unique illustrations, continuing the use of its biggest advocate across the site. Rex, also known as REX-Ray ({code}'s main open source project) was used throughout the site as an organic illustrative character.
Home Variant 1
Header "The {code} Vision"
Home Variant 2
Header "Perception vs. Reality"
Community
Header "Global & Open"
Webinars
Header "Learning Together"
About
Header "Every Piece is Unique"
Brand
Header "Branding Responsibly"
Events
Header "Shared Calendar"
Newsletter Archive
Header "Looking Back"
Adapted to Individual Events
Headers
Adapted to Mobile
Headers
Strategy
Bringing the site to life, with automation.
Even for a site as simple as {code}, managing all this content can be overwhelming and tedious. We developed custom solutions across the site to help automate and streamline content that frequently needed updating, allowing the site to work on its own.
Auto Import, Display, & Sync Open Source Projects
We developed a custom plugin to integrate Github with Wordpress, allowing project import, project landing pages, and project stats synchronizing in real-time. With cross-filtering, sorting, tags, and search, the result is an open way to navigate and find open source projects.
Auto Generated Newsletter Archive, Including Sort & Filter
We integrated Mailchimp across the site not only for newsletter sign-ups and campaigns, but also to help with looking back. We built a custom, auto-generated newsletter archive page complete with sorting & filtering so the {code} team would never have to manually update it again.
Live Blog Feed & Specific Topic, Project, and Author Feeds
We integrated Wordpress to display a live feed of recent posts from the {code} blog, and show dynamic feeds on the project & team member pages. Across the site, a feed of posts related to that project display on project pages, and author specific feeds display on team member pages, allowing users to keep up with trends for that project, topic, or person.
Auto Request to Join & Live Counts of Online & Total Users
We integrated Slack to allow users to request to join {code}'s slack community automatically. It is seamlessly integrated so users can lean & sign up all one place. Other features include live counts of slack users online & total community members automatically updated across the site.
Auto Import, Display, and Sync Community Members
We developed a custom plugin to integrate Mobilize.io to Wordpress, allowing the {code} team to easily import their community members, display them by group across the site, and automatically create landing pages for each member that is stored on Mobilize.io.
Search
Nudging the site to #1.
With the new site came an all new name, domain, and most importantly, new business goals. "{code} by DellEMC" became the {code} team", "codedellemc.com" became "thecodeteam.com", and the team purpose went from "Open Source at DellEMC" to "Open Source at Dell Technologies". We built the website and content with {code}'s search engine goals in mind. After launch, we focused on ranking for specific terms and increasing organic traffic.
Results
#CodeOpen
With this new platform, {code} could focus more on what made the team successful: transparency, inclusivity, adaptability, collaboration, and community.
Projects could be executed with complete transparency & openness, helping users easily find projects, learn about them and contribute. With automation across the site, the team could center on adaptability with emerging technologies, collaborating with more users on their own open source projects.The {code} Community and its programs now have a way to showcase the individuals who lead and provide advancements in many areas of the open source community.
Altogether, this approach is the result of talented digital experts, passionate open source engineers, advocates & executives, coming together to build for an open future. {code} now has the ability to reach & collaborate with more people than ever before.
Josh Bernstein /
VP, Technology