Project Jupyter is a suite of tools for interactive computing built by and for a worldwide community. All of the tools are free and open source, so anyone can take the code base and customize it to meet their needs.
The existing website was not articulating what Project Jupyter is, explaining how new users can get started, or providing the necessary resources for existing users. Most of Jupyter’s tools and documentation lived on external websites, and there was no clear pathway for joining the community and becoming a contributor.
We were asked to do extensive user research to determine the functional, social, and emotional needs of users, and how to design a website that married those needs with the needs of the business: increasing adoption of Jupyter tools, recruiting more contributors, and promoting the values of open source.
What I did: Semi-structured interviews with users, non-users, contributors, and business stakeholders; data analysis and affinity diagramming; user archetypes and jobs to be done; competitive analysis; and heuristic evaluation and cognitive walkthrough of current website.
After synthesizing our research, we struggled to figure out how to prioritize the needs of so many competing user groups: potential users, current users, contributors, donors, and the general public. Jupyter wanted a website that could be understood by developers, CTOs, and sixth graders, and that became a real challenge.
What I did: Led the design of a new site map and information architecture, produced hand-drawn wireframes, and created low-fidelity prototypes in Figma, continually iterating the copy and design based on feedback from user testing and input from community members.
Our final website design better showcases Jupyter’s technology, community, and open source values. It provides a clear pathway for users to explore tools and join the community, and houses all of the technology and documentation in one place, providing the one-stop-shop experience the previous website was lacking.
We also provided the community with a style guide and design system, so they can use the templates we created and build out the rest of the website themselves, as well as a set of editorial guidelines to help them maintain a consistent tone and voice when writing new content.
What I did: Wrote all final copy, provided the creative direction for the site’s illustrations, wrote the editorial guidelines, and designed the final high-fidelity mockups, including the page layouts, colors, images, and hierarchy of content.