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.
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 quickly 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.
As a UI/UX Designer, I created the sitemaps, wireframes, and initial content strategy 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.
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.
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.
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.
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.
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.