TripleTen
TripleTen is a family of beginner-friendly online coding bootcamps. It helps people with diverse backgrounds learn a new profession and build a sustainable career in tech. TripleTen was launched in 2020 by employees of Yandex Practicum — the largest Russian online learning platform — and shortly after became an independent startup operating in the US, Latin America, and Southeast Asia.
I joined TripleTen as one of the first designers when it had just started building its full-fledged product team. Over the three years, I worked on the core learning platform, maintained the design system, crafted the overall design process within the company, and was responsible for most of the product interface.
Homepage redesign
TripleTen's homepage plays a major role in the student experience. It's where they start their learning, track their progress, revisit past material, check payment status, and more. In fact, 30% of all user sessions include the homepage.
That's why TripleTen's homepage has become a place for regular experiments, new feature updates, and other types of changes that require a scalable design. When I joined the company, our homepage was neither user-friendly nor flexible. It took almost two years to fix this, resulting in the complete rebuilding of the homepage.
How it started
TripleTen inherited its homepage from Yandex Practicum, along with the rest of the platform. Initially, the homepage was dead simple: a large card displaying the current lesson, and a few more blocks to monitor overall progress and navigate between the program's modules.
There were many issues with this page. For example, a quarter of the space was occupied by a black column listing enrolled programs. This was completely unnecessary, as most of our students only enroll in one program at a time, so switching between them is rarely required.
Spin-off: the (not so) little redesign that couldn't
At Yandex Practicum, we have always wanted to build advanced learning productivity tools, such as a study calendar, planner, streaks, favorites, etc. However, implementing these features was challenging due to a high amount of technical and design debt. In addition, our focus on growth at that time meant that these features were always deprioritized.
In response to this, the Homepage 2.0 project was born. This was a radical re-imagining of the entire homepage, which was mostly initiated by the design team. It was quite conceptual and included many features that didn't exist at the time.
You can already guess that this project never made it to the production stage. Despite this, I never regretted the amount of work I put in, as it taught me two invaluable lessons:
- It's usually best to introduce big changes to a product incrementally. This makes it easier for users to adapt and simpler for developers to implement.
- Having a deep understanding of the product is essential to make disruptive changes. If I were to look at this project now, I'd quickly realize that many of the designed features can't be implemented without investing a lot of time to eliminate legacy from the information architecture and unify the learning process across different programs.
More than that, for me, as a newbie, redesigning a large part of the product was the perfect chance to learn about the product, its information architecture, and its limitations.
Increasing complexity of navigation with the number of tools
When our team realized that the Homepage 2.0 project was not feasible, our team changed their approach to make such changes incrementally. For example, we quickly hid the black panel with all enrolled programs — a relatively minor change, yet it improved the overall hierarchy.
After that, we began to enhance our platform by introducing various learning productivity tools. We added a search, which had been the top-requested feature for years, as well as a study calendar and a skillset progress widget. The goal of these features was to improve the student experience and increase retention. However, due to the simple structure of the homepage — a plain feed of sequential blocks — it quickly became a total mess. Now, the overall navigation needed to be redesigned.
Coming up with a new homepage prototype
The idea of a new redesign again came from designers. To me, it was clear that the product had reached a critical point: adding more features to the homepage would complicate navigation and do more harm than good. This is exactly what happened. In late 2022, we released the skillset progress widget, but a few months later, our researcher discovered that many of our students had never really noticed it.
Working on the new homepage, I collaborated with our UX researcher to make it as user-informed as we could. At the start, we spoke to our students to gather data on how they use certain features and what is most important to them.
Board with one of the respondent's homepage expectations
In the new prototype, I proposed splitting all blocks of the current homepage into multiple sub-pages. The new main “Home” page would become a dashboard with main actions, important information about progress, and urgent notifications. The huge calendar block would become a separate page, as would the skillset.
This change has made navigation clear again and has added some space for new updates: onboarding and progress-related features can be added to the main page, planning mechanics would appear on the calendar page, all about career can be combined with the skillset, and any other can be added to the sidebar.
When the prototype was ready, we conducted usability testing, which helped to identify small issues with the new “Return to learning” block, though most students had no trouble completing our tasks.
Shaping TripleTen’s visual design language
However, creating the first prototype was just the first step in taking the new homepage to production. This process took months, and during that time the design team started to work on a new visual design language.
Different parts of our product were designed by different teams and designers over a long period, in a rapidly growing company without a systematic design approach. As a result, our interface at the time was a perfect example of Conway's law.
When TripleTen became an independent startup, we could finally afford to systematize the look of our product across different parts. We already had a strong communication style, so our team used it as a starting point to create a unified visual foundation for communication and product design.
We updated the product font and colors and applied them to the main blocks of the old homepage. It only took a short time to develop, but it greatly refreshed the look and feel of the homepage (and fixed some inconsistencies in progress representation, btw). This allowed users to transition to the new homepage with minimal disturbance.
Happy end
Not long after, we started to work with student activation and our onboarding mechanics. The new homepage redesign turned out to be essential for this. And, after a month of close collaboration with the development team, we shipped the new homepage.
The new homepage was designed with scalability in mind, allowing for new features and updates. After release, we added a start date widget, an onboarding checklist, Discord integration, and a settings page.
