Web & Interaction
Interactions & Code
When users first landed on the Foundation Documentation page, our website had a low rate of converting users to download the framework. Our objective was to improve the content and language on the main documentation page to provide clearer installment instructions on the SCSS and CSS download pages.
One of the first components we added to the documentation page was to direct users to the correct download page. Secondly, we embedded CodePen demos to the website to allow users to view live demos of the framework’s components and to increase our presence in the CodePen community.
In long pages of text and documentation, we found that users had a difficult time consuming the information. We sought to stylize unordered lists to allow users to quickly understand the information presented to them. I also created small illustrations to enhance Foundation's visual design across its site.
Overall, by improving the Foundation documentation, we were able to simplify many components of the site while also adding vital information to ease the process of onboarding for users. After the launch of the new Foundation docs the team saw a significant decrease in Foundation support tickets and an increased conversion rate of downloads.
Credits: Rafi Benkual, Ibie Maria, Ryan Riddle & ZURB Foundation Team.