Modeling Commons

Using AI to accelerate, and improve the redesign of the educational model sharing platform used to highlight NetLogo creations.

NetLogo is the creation of Uri Wilensky, the 2025 Yidan Prize winner, a programming language to create, develop, and visualize agent based models, by anybody about anything.

Studio Project Collaboration With

NetLogo

Team

Samantha Borri, Palka Dhirawani

Category

Digital Product Design - UI/UX - AI Development

Skills / Tools

Product Design - Figma - Relume

Time Frame

2 months

Challenge

Challenge

Challenge

How do you modernize a website, when you don't have a lot of digital product design experience? Well for us, it was all about trusting design methodologies and using AI to become resourceful and iterate with levels of fidelity beyond our own capabilities.

Key Considerations

Key Considerations

Key Considerations

  • Desires/needs of key stakeholders: Understanding the similarities and differences between researchers, teachers and students was important to ensure the platform provided a good experience for all of its current and desired users.

  • Must-have features for sharing/collaborating on models: Logs of changes, comments, branches and additional information on the models for people to understand as well as jump in and collaborate were imperative for the platform to align itself with the values of the overall organization.

  • Inclusivity and personalization: There were various features designed to foster, as well as limit, social interactions due to it being a platform where anyone can join.

Outcome

Outcome

Outcome

At the end of our time at NetLogo we were able to create a series of main screens, ready for engineering handoff to the engineering team, ready for development, whenever possible. The main screens included:

  • Landing page with Log In and Sign Up flows

  • Model upload, view, and edit pages

  • User dashboard page with personalized feeds based on user activity

What made this project special?

Collaborating with a team that was so passionate about what they had created was truly a special experience. A common theme amongst anybody we interviewed was their appreciation for NetLogo, and what it can do to help students and researchers alike, so helping create a platform for people to share their creations was something I appreciated.

Before

✨ After ✨

Methodology

Methodology

Methodology

To better understand our users and the key flows this modern iteration of the website should have, we used a variety of tools from our design toolbox such as:

  • User Interviews with scientific researchers, teachers, members of our own team, and students, as well as students. We even had the chance to talk to Reuven Lerner who created Modeling Commons in 2010.

  • Co-Creation, the design team created an initial list of user stories that were then expanded alongside the core team to better understand, and prioritize the key paths and features the site needed to have.

AI Development

AI Development

AI Development

With only one seasoned digital designer on the team, AI helped us iterate and ideate with resources and fidelities we couldn't have achieved otherwise.

By leveraging tools such as Replit, Lovable, Figma Make and Relume, we were able to quickly try styles, component configurations and pivot to desired flows agreed upon by the whole team.

One of the best tools throughout this process was Relume, which helped us develop a Design System, with a multitude of screens ready to plug-and-play into our designs and flows, making what could have been a process that takes several months, take several weeks instead.

What Worked Well? Benchmarking and Constant Feedback

What Worked Well? Benchmarking and Constant Feedback

What Worked Well? Benchmarking and Constant Feedback

A process that drastically impacted our decisions throughout the process was an initial benchmarking investigation. Understanding what other organizations offered, how they presented information, who they catered for, was illustrative to not only identify the current landscape of other sites that support sharing agent based models but also take inspiration from any and all sites that could be relevant to our new creation.


Since the team was small, we were also able to get constant feedback from the core engineering and leadership team at NetLogo, which was very helpful to refine and iterate as quickly as possible, all while taking into consideration the design requirements we set out to fulfill.

Figma Plug In

Figma Plug In

Figma Plug In

Screens ready for Engineering Handoff

Screens ready for Engineering Handoff

Screens ready for Engineering Handoff

Wanna know more about me?

Let's have a coffee chat,
but I'll have tea cause I don't do coffee :)

Thanks for checking out my portolio!