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

From journey mapping, I noticed that:

1. There are no options for users to select the tags that they are interested in.
2. The metrics (Hot, Top, New), are not the most effective metrics to filter through projects.

Current UI Systems

Journey Mapping

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.

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.

Select Needs

Select Interests

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.

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.

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.

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.