Problem Space

Replit is an online IDE to help users of different coding backgrounds host projects. It has a community page, where users find projects for inspiration and learning purposes. For this project, I designed a set of new components to help users filter through projects (Repls) on the community page, considering the needs and interests of students and professionals.

Research

Identifying pain points

To understand the problem space, I did a bit of journey mapping to understand areas where design could help users select and filter through projects. From this, I noticed that:

1. There are no options for users to select the tags that they are interested in — the tags seem to be auto generated, from the most popular tags that other users are selecting.

2. The metrics (Hot, Top, New), are not the most effective metrics to filter through projects.

Current UI Systems

Journey Mapping

From the pain points identified, I came to the conclusion that there could be four new components added to the page to help the process of selecting a project: Onboarding, Tagging, Filtering, and Saving.

These new components can help the user identify earlier in the user journey the type of projects that they would like to see, and also more easily navigate to Repls they are interested in.

Journey Mapping

Prototyping

Feature 01 : Onboarding

The first new component that the user encounters in the flow is an onboarding process. By selecting the language, complexity, and types of projects that they would like to see early in the user journey, projects can be more immediately recommended to users.

Demonstration of Onboarding process

Feature 02 : Tags

The second component that the user encounters is the tags that they can select. The tags are recommended to the users based off of their interests from the onboarding process and recent activity, but users can add/delete tags depending on their changing interests.

Demonstration of Tagging feature

Feature 03: Filtering

When users have a clear idea of the type of project they want, they can use the filtering feature to more specifically filter projects with the language, complexity, time, and collaborators searches.

Demonstration of Filter feature

Feature 04: Saving

From interviews, I noticed that many people bookmark important websites to refer back to later when searching for answers. Similarly, I wanted to incorporate a feature where users could save interesting Repls they can refer to later.

Demonstration of Saving Feature

Mockups

Student Community Page Mockup

Professional Community Page Mockup

Final Thoughts

From this project, I learned how to utilize user journey diagrams to pinpoint areas where design solutions can improve the user experience. By carefully considering the benefits and drawbacks of different features, I improved on how to weigh and compare which design decisions are better than others. For an interaction such as searching, adding steps early on in the user journey can greatly improve the experience of future user actions.