Whenever a new developer joins the team, it always seems to be a rough transition. Oftentimes, developers are thrown into the deep end of the pool, and while they’re trying to learn to swim, they have to figure out the best practices and workflows of the team they’ve joined. To make things a little bit easier, I developed a resource portal for new developers that joined the BIG YAM team. This portal served as a sort of onboarding experience, and featured a list of development projects we’ve worked on, team bios, a brief process overview, and our team’s best practices and commonly used tools.
Card-based layout for displaying listsLong-form layout for article content.
Design
Best practices and onboarding materials are, at best, housed in a multitude of rarely seen documentation. At worst, they live inside someone’s head, which isn’t exactly helpful for the long-term. With the resource portal, I decided to include everything on a single website, which meant finding a way to organize and showcase different kinds of content. I broke down the types of content into different sections, which made up the main navigation structure. From there, I created two templates: an article style template for long-form writing on specific topics, and a card-based layout for more visually stimulating lists.
Graphics and iconography were imperative to breathing life into what is essentially documentation. I carefully selected stock photography, which was then treated with a red overlay to maintain a consistent look and tie into our brand colors. Because this was a representation of our company, it was important that I used our brand’s color palette and guidelines.
Development
Because most of the websites we develop are created in WordPress, I created the resource portal in WordPress, as well. This allows new developers to see the kinds of features we build into WordPress, and get more familiar with the platform if they aren’t already.
The design was implemented as a custom theme, with custom post types used for each of the sections of the site to make maintenance and organization simpler. Built with Sass and jQuery, the site is fully responsive so our developers could view the content on-the-go.
The layout for the cards is rearranged to avoid taking up too much space on smaller devices.
Reception
Aside from the onboarding capabilities, the site’s list of useful development resources has sped up our team’s workflow on new projects. The site houses everything from tips on web performance and accessibility, to code samples for Sass and jQuery, which brings a ton of great information right to our developers. Team members are not only encouraged to check out the resources on our list, but also to seek out new information and add it to the site.
