Redesign of Transifex: How the Team Made It Happen

Redesign of Transifex: How the Team Made It Happen
Table of contents
Dimitris Glezos
June 16, 2016
4 min read

Redesigns are hard. Not only does a product redesign need to reflect the company’s values and vision, it also has to address the needs of customers and users.

When we began our redesign process, our team didn’t start with conceptualization or moving pixels around. Instead, we started by identifying the pain points faced by our users. Thanks to our Customer Success team, we were able to get a lot of helpful insights, and we quickly saw that visually and functionally, our product was cluttered and preventing users from realizing the maximum value of Transifex.

Changing How We Worked

To make the redesign possible, our Designers and Developers had to work more closely than ever before. So we changed how we worked. For two months, we put a pause to our standard scrum agile sprints, and moved our team of designers and developers into a single “Design War Room.” The goal was to block off any distractions and work closely together as we got our heads around navigational, functional, and visual issues.

Restructuring the Information Architecture

Through our research, we identified two sets of issues with our previous design:

  1. Structural issues such as broken navigation and lack of hierarchy.
  2. Visual issues such as outdated visual language and color scheme

Once we had a clear understanding of the problems we were trying to solve, we then started to brainstorm and rethink the Information Architecture in terms of navigation, layout, and positioning. We were inspired by Google and Material Design to create a more tangible interface – one with shadows and z-depth levels instead of being just flat. The result was a 4-level stack of layers that allows for a unified experience across the product as seen in the figure below.

Levels of information Architecture
Figure 1 – Information Architecture of Transifex

Defining where each layer went was a challenge. We had to figure out each path a user has to take when trying to achieve a certain goal, and along with that, identify the main actions offered in each page of the product. We iterated on the IA a lot in order to accomplish an efficient way of navigating through the pages.

The New Information Architecture

At the first level of the stack is the base. From here, users are informed about the page’s name and info, as well as the actions that can be performed. Call-to-action buttons are positioned in a way that makes them accessible and easy to understand.

Users can also move seamlessly through the product with breadcrumbs that offer a more coherent way of navigation. The base level really helped clean up our previous UI, which had info areas everywhere and too many CTAs. We really wanted to make sure the user wouldn’t feel lost when moving from page to page.

The second level of the IA stack is where the content of each page is displayed. Generally, this area occupies the most real estate on the screen since it contains tables, list items, links, and all sorts of interactions in order for a user to achieve a goal. While brainstorming about the IA of this level, we gravitated towards our original implementation of the product so that users don’t get overwhelmed. Also, we used a lot of white space in order to make it easy for the eye as well as promote a feeling of calmness.

The third level is the sidebar navigation. We received a lot of customer feedback that the old way of moving from the Dashboard to a project’s subpage was ambiguous and sometimes confusing. With the new sidebar, a user can navigate to a project and its subpages in an efficient and easy way. Combined with the actions from the base level of the IA stack, we were beginning to make a system that really worked and was easy to handle.

The fourth and last level of the stack is the top bar navigation. We didn’t make a lot of changes there since users had already established habits from the old version and the risk of user backlash was lurking. We decided to keep things as they were and only apply the new styles and colors.

Transifex dashboard
Figure 2 – Dashboard

One of the most important aspects of the redesign was teamwork, flexibility, and incentive. When you make the decision to do such a huge project, your plans are going to change based on the feedback you collect from your teammates and PMs. You should also think twice before making big changes since you have already built a pool of customers and users. That’s why with a great product comes great responsibility. And in our case, Transifex is a great product that puts the users and customers right in the center of every decision, whether it’s a feature or a bug.

Dimitris Glezos
FacebookgithubGoogle+Fill 88Twitter