INTEL DEVELOPER ZONE

zero theme migration

idz background.png
 

Overview

The Intel Developer Zone (IDZ) provides tools such as APIs, IDEs and SDKs for software developers working on Intel hardware and software. The IDZ website contains all the documentation, code samples, tutorials, and more for developers to use these tools.

The problem

Documentation pages, by their very nature, contain vast amounts of dense content that can be difficult to skim. When developers begin using a new tool they generally want to get started quickly and skim documentation to find solutions to their problems. In order to make the webpages easier to navigate, the web operations team developed a new, user-centered theme, known as the Zero Theme, and began the process of migrating all the tool webpages to this new theme.

New "Zero Theme"

Old Theme

 
 
 
 

My role

As a UI/UX Designer, I created the sitemaps, wireframes, and initial content for the Zero Theme pages for several different developer tools. As part of the web operations team, I collaborated with Intel developers, UX designers and researchers, content writers, project managers, and visual designers.

Requirements gathering

The first step in the migration process was to work with stakeholders (Intel developers) to get a better understanding of the tool and determine the requirements for the webpages. Generally this involved a meeting with the stakeholder, the UX team, the project manager, and content writers. The stakeholder would also fill out a questionnaire with information about the tool, including the target users, primary features, key information, code samples, and other documentation.  

Interaction design and content strategy

Once I had the initial information from the stakeholders, I would begin to organize the content and workflows. Given the requirements of the particular tool, I determined which pages were necessary, and what information would be displayed on each. Most IDZ products required sections for features, documentation, support, and onboarding, but the pages and content varied depending on the complexity of the tool.

Sitemaps

After I determined which sections and pages were needed I created a sitemap to show the overall structure of the site. I then worked with a content writer to set up a Gather Content page with sections for each individual webpage.

 
 

Wireframes and Content

Next I began inputting the initial content from the stakeholders into Gather Content while simultaneously creating mid-fidelity wireframes for each webpage, with clear annotations indicating where each section of content would display.

 
 

Finalizing content

Once the preliminary content and wireframes were completed I turned the content over to the content writer, who would work with stakeholder to enhance and refine the content. When there were changes or additions to the content I would update the wireframes to match.

Handoff

After the content and wireframes were finalized the project was handed off to a visual designer who would work from the wireframes and content to create high-fidelity visual compositions and then to a web developer to implement the updated website.