How Smartly Formed a New Task Force to Transform the App User Experience

In one of our earlier posts we shared how we refreshed the Smartly app opening view as part of our user interface (UI) renewal. However, simply updating the cover isn’t enough to improve the experience, so we also needed to bring the rest of our application in line with the fresh new design.

The Smartly product development organization consists of nearly 20 teams that deal with owning and maintaining some part of our app’s user interface. At first, we planned to task these teams with their own part of the migration efforts and just follow the whole. But we quickly realized that coordinating and communicating with this large number of people would be quite challenging. Hence we decided to go with an alternative approach.

‍

Forming the Task Force

We decided to assemble a task force of frontend engineers from multiple teams. However, doing so would have resulted in a decreased workforce in the original teams. Considering this, we made sure to add value and turn this into a win-win situation. 

We aimed for a number of positive outcomes. On one hand, we wanted each new task force participant to gain new experience and knowledge about the renewed design system by working with different parts of the application. We wanted their work to be highly visible and meaningful for the whole company, with a clear scope. We also planned for them to be working alongside other talented frontend engineers.

On the other hand, we wanted each manager to get their part of the application scope migrated to the new look. They could practically outsource one big task from their worklist to someone else who would be accountable for the results. On top of that, we obviously wanted to ensure that managers would get their borrowed team members back, so each team could operate 100% again – but with new knowledge gained through the task force work. 

We anticipated that this would increase the odds of hitting the migration objective in the product development organization, and let everybody outside the project team pursue other goals. This way, coordination and communication would also be more efficient. 

‍

Implementation

In a nutshell, the work was about replacing old user interface components with new ones in our frontend. The first big problem was that the frontend was shattered into multiple micro frontends that lived in several different code repositories. We wanted to have everything in one single monorepo, so first we migrated the separate pieces together. Technically, this wasn’t a very complex problem, and it also resulted in better teamwork. We also completed a migration that wasn’t a priority for anyone and thus had dragged along for a long while.

Then we started to address the main objective: renewing the UI. We adopted a novel analytics tool to follow the migration. The tool helped us reveal the most used components, and understand how we were progressing. 

Swapping components manually one by one would be a tedious, time-consuming and error-prone task. That’s why we decided to create a library of codemods. Codemods are scripts that can be executed in the source code folders and automatically transform pieces of code. Not a silver bullet for every problem, but in our case comparable to using a powerful chainsaw instead of a handsaw. 

Working on the first views and packages took longer because we were writing and extending the codemods. But once they were done, we could use them across the application and provide them to engineers outside the task force. This sped up the migration even more.

For quality assurance and consistency in the look and feel, we worked with one view at a time, replacing all components there. This way we could also demonstrate the progress to our internal stakeholders. We had bi-weekly review meetings where the results were shared transparently. These meetings also served as a feedback channel and offered moments for steering the work to a new direction. Based on the feedback, we adjusted the order of page migrations a few times to align with company priorities.

‍

Results

As the project was getting close to the finish line, capturing the learnings was essential. From a product development organizational point of view, we succeeded with our UI renewal. Compared to the previous state when only the opening page was refreshed, now the entire app is so much more renewed that the remaining old parts stand out. The other parts of the organization also successfully reached their other set goals when they could concentrate on them 100%.

Participants of the task force were able to significantly increase their knowledge about our frontend. In the past, they had mostly seen their team’s code but now they are exposed to multiple different coding styles and solutions. Now they all know what good looks like and can share the learnings with their native teams. They also gained a ton of knowledge about our new design system.

The project was also successful from a performance point of view. In addition to the task force participants performing better than in the past, members of the original teams also improved. When the person with the most knowledge is absent, others can fill the gap and go beyond their previous limits.

We can’t wait to share more product development success stories in the near future as well!

We are actively looking for new team members to help build out our vision. Check out our open positions!

‍