MailChimp UX team: Improvements and iterations [the final part of the book]

[ Tl; dr ]

[ 1st part of the book ]
[ 2nd part of the book ]
[ 3rd part of the book ]
[ 4th part of the book ]
[ 5th part of the book ]
[ 6th part of the book ]
[ 7th part of the book ]
')

Iteration and balance between quantity and quality of functions

Jason beard

Recently, one company sent a check with the payment of the promised compensation to my old address - and not for the first time. “These are their problems, and they must do this!” Screamed my wife, unhappy with what was happening. Although I was also upset, but I could not help but sympathize with the team that was supposed to resolve this issue.

When users stumble upon a bug, or when some features of the application confuse them and take away their time, their trust in your product decreases. In addition, as a result, the load on the support service increases. You can imagine the holes in the bucket: large ones reduce trust quickly, and many small ones - slowly and gradually. One way or another, when trust is undermined, it will not be returned.

Even despite the fact that we are constantly investing all our strength in our application, MailChimp is not immune from bugs. And I am ready to admit that in our “bucket” there were both big and small “holes”.

Look for "holes", protect your "bucket"

When every day you work on one thing, you can simply overlook the weak points. And sometimes seemingly harmless omission can lead to undesirable consequences. That is why our UX-team relies on interviews, surveys, analytics and other research methods in order to find defects in the application. In addition, we try to pay attention to each of the feedback channels that our users can use to express their opinion or dissatisfaction.

We review social networks such as Twitter and Facebook, comments on blog posts, and our support team tags all messages and emails to help us discover common problems. And as Aaron Walter, our UX-director, wrote, we learned about the reasons for the sharpest decline in trust when we surveyed users who left us.

Prioritize and correct mistakes

It is easy to get feedback, but looking at and choosing what to react to is not so easy. If we took into account every comment, tweet, letter, message online or by fax (in fact, we certainly do not receive feedback via fax), we would have so many tasks that the team could not physically cope with all. Many companies simply hire more people to fix every bug, but this approach has its limits, in which case problems with usability may arise. Not each of the proposals we received should be implemented, as they may be contradictory or will help only a few users. Instead, our research team carefully monitors feedback and reports only the most common and interesting requests.

If you look at our log files 5 weeks after the release, you will see a lot of comments with the words "fixed", "debugged", "improved", "configured" and "modified." It is in these areas comes the most requests. Some bugs, textual errors or data output problems affecting the progress of work are also eliminated between release stages.

Turn your weaknesses into strengths

MailChimp attracts a lot of attention when we have new, unusual opportunities, so it's easier to focus on them than gradually improving something. However, often a new feature is only a rethinking of a certain part of the application, which has not been updated for a long time. Our team loves working on such tasks, from UX researchers to our amazing development team. The introduction of new functions gives us great pleasure, even if they are just a rethinking of the old ones.

Take time to improve.

Sometimes it is necessary to reduce the pace, put aside new ideas and do corrections and improvements. Reducing ticket queues is not a paramount task, and no one will write about this on our blog, but radical changes and smooth improvements are equally important for us. At least once a year, we launch a version of the product that was only refined and improved over the previous one. For us, the most successful period for such a release is the time to leave. At the same time, we are making a plan of what opportunities will appear for the next release.

Think locally ... and globally

When we search for bugs and improve, we just may not notice and see the whole picture: how our changes affect the experience of using MailChimp in general. Work on new large-scale projects allows us to see the big picture, but sometimes we miss small details, we cannot predict how people will cope with them, or discover for themselves what we have not noticed before. The most important thing is that we continue to pay attention to all this, so our “bucket” is getting bigger and better - there are fewer and fewer “holes” in it.

How we made MailChimp more accessible

Mardav Vala

We are fortunate that our customers give us valuable feedback not only about what works well in MailChimp, but also about what works poorly. I will give an example. Not so long ago, a client named Justin Romak , who could not see, informed us that he was having problems with special features on control panels and in subscriber lists.

“Email marketing is extremely important for both my business and customers that I interact with every day,” Justin told us. “Since I’m blind and dependent on voice-over technology on the screen, it’s not always easy for me to find the option I need and which is fully accessible.” However, the MailChimp team has done quite well in this. ”

To our happiness, Justin addressed a similar question before and offered his help in improving MailChimp. He was not lazy and sent us a few videos showing problem areas in the application. After reviewing these entries and reading several articles [ 1 , 2 , 3 ], we realized that we can significantly improve the special features of the application if we focus on 2 goals: creating and providing context for elements using the functions and properties of the WAI-ARIA standard or attribute title in HTML, and control to ensure that all the markup is semantically correct. (At that time, these techniques were not used when making subscriber lists in MailChimp, where we used the layout of div-blocks).

Improved control panel

Even before receiving messages from Justin, we started working on improving the special features of the MailChimp control panel. These minor but effective improvements added the necessary context to the elements of the panel used by the screen speakers for articulating the text.

All items on the MailChimp panel are displayed using "rack" patterns consisting of semantically correct list items, including a checkbox, a header with a link to additional information, and a drop-down list with a list of tasks. In addition, some control panels contain a subscriber counter, as well as a clickability indicator counter.

At that time, the additional information on the campaign type and list name on the panel did not sufficiently clarify the purpose of these elements. The campaign type “Normal” and the name of the “Test 1” list were not entirely clear. To solve the problem, we used the aria-label attribute to add a campaign description and list information. Thanks to this, the narrator was able to voice the text after the words “campaign type” or “list name”. We also added the aria-label attribute to the icons on the dashboard so that the current status of the campaign is voiced.

Despite the fact that the subscriber counter and clickability indicators are semantically correctly recorded, the screen announcer voiced the numbers and the corresponding signatures separately, so the information was difficult to perceive. To avoid this, we hid the subscriber and clickability information from the on-screen speaker, and then added the information back as aria-label attributes to the parent container. Now the announcer pronounces the numbers and signatures to them together.

Improving the list of subscribers

While working on improving accessibility, we noticed that we also need to redo the list of subscribers. Now it is presented in the form of a semantically literate data table. As shown in this example , our list of subscribers can be scrolled horizontally, while only one column to the left is fixed. Initially, we used the th, thead, and tbody tags in conjunction with this pinned column, but because of this, VoiceOver voiced 2 names for each column. VoiceOver users had to work with the table fully shifted to the left. To solve the problem, we now use only elements with the td tag in the table and assign the role columnheader to the column headers. The Yahoo! video helped us make such changes. on the introduction of tables with special features.

Moreover, we applied the title attribute to the checkboxes on the subscriber profile page, which allowed the on-screen announcer to pronounce the subscriber's email address when there is a check box on it. We also set up a customer activity rating list for special features using ARIA roles and signatures (take a look at the CodePen subscriber list).

Total

Providing semantic consistency and adding descriptions to the elements are fairly simple techniques that can make the work of your application along with the screen speaker pleasant for the user. In the case of JavaScript, it is recommended to use one of the available frameworks. We use Dojo and all UI widgets with built-in accessibility features from its UI library.

After all corrections, we asked Justin's opinion and received his positive response: “Nothing bothers and does not look strange. Everything is read as expected. I like!"

Eliminate customer churn using Google Analytics

Allison Urban

As a web analyst, I work a lot with visual data. One of my favorite tools is Next Page Paths in Google Analytics. This small report indicates where users are going after viewing a particular page. If we talk about UX, then this is one of the fastest ways to determine when users stop moving through the conversion funnel.

I will give an example with an account activation funnel. After a user has registered, he needs to be checked for correct captcha input before logging into his account. The sequence of actions that we expected to see in Google Analytics looked like this: registration> successful registration> receipt of confirmation> login.mailchimp.com.

However, we found that 32% of users after successful registration are trying to go directly to login.mailchimp.com, bypassing the receipt of confirmation. If it were possible to log into your account without captcha-checking, there would be no problems, but this check is obligatory. It turns out that before it was possible to go to your account before completing the captcha-check, but our developers have banned this transition in order to ensure security.

So why did someone keep trying to get into their account themselves instead of following the instructions to confirm their receipt? Just because users were attracted by the bright "Login" button. After we removed it from the registration completion page, the percentage of users who went directly to the confirmation page increased from 63% to 79%. Our support team began to receive 25% less requests for account activation, and as a result we began to receive less such questions than ever.
Not bad for a few minutes spent exploring.

We learn from our mistakes

Tyrik Christian

In golf it is very difficult to get into the hole the first time. Even over the years practicing how to improve their swing, golfers still face obstacles independent of them: wind, relief, uneven surface. Golfers take this all into account. That is why they do not get hung up every time on the hit after the first blow: they are doing everything possible to deliver the ball as close as possible to the hole.

Designers are faced with similar difficulties, looking at a blank page. Working on sketches, business processes, vocabulary and style at the same time is simply impossible. Instead, we break down each task and gradually move forward to meet the needs of our users. We do not try to succeed in everything at once. We use an iterative approach.

In 2013, the MailChimp UX team began a massive redesign of its web application. Mobile web application traffic was growing at a rapid pace, and user research showed that people wanted to access MailChimp from several devices and at different times, no matter where they were. Interviews with customers and an in-depth study of the impact of mobile devices on modern culture helped us draw up a development plan for MailChimp. In order to tell our team a story about user experience that we would like to recreate, we wrote the script, hired actors and recorded a short video about the use cases and workflows of our future application. The video showed not a new interface, but only methods of working with it.

From this point on, our goals became clear, and one could proceed to design. We developed ideas for screens of all sizes - from phone to computer - and therefore we decided to create a library of patterns already described by my colleagues in this book. In the course of the work, we were busy rather than developing one brilliant idea, but gradually implementing several different ideas until we came to a better solution.

Working with the MailChimp application, users get a brief overview of the main data of their account from several control panels. During the redesign, we experimented with tables and pictures to find a way to better present this data. After several weeks of experiments, we decided that we had some interesting ideas, but we were not sure that suitable solutions would follow. The tables were clear but boring. The pictures looked good - they “revived” the lists and reports and made it easy to work with campaigns - but they took up a lot of space, and because of them the information was not too compact. They were beautiful, but impractical.

We took a step back and looked at how the information was presented on the control panels. Everything was quite good: each line was easy to read. Actions were predictable, and the content could be easily viewed. We knew that this pattern can be improved only with the help of a number of improvements, without reworking the design completely.

Then we made sketches of each "slats" in the Reports, Campaigns, Lists and Answering Machine panels. We began with the design of the text of the headers and metadata, and gradually added elements such as buttons, checkboxes and status indicators. After several iterations with the sketches, we could proceed to work with Photoshop. It was easy to create the initial version of the blocks, since for each element we had established certain patterns. The Campaign page turned out to be the most problematic: we wanted to make the state indicator visually attractive, but it was necessary to take into account such factors as the content structure and the choice of colors. In the end, after a series of iterations, we decided that we would use the icons to display the status of each campaign using the corresponding colors.

After their creation and minor amendments, we almost did not fix anything since the redesign. In fact, the elements were so well chosen that we implemented them on other pages throughout the application, including the Templates and File Manager panels. Since the content on these pages is not much different, it made sense to use a single style for the entire application. Of course, not everything was perfect. After the first release, we received feedback from our users. We listened to them and reacted to their comments.

For example, before the redesign, the reports panel displayed the total number of views and clicks; after redesign, clickability indicators for each campaign were displayed on the report panel. Having learned the opinion of users, we compromised and began to display the total number of views and clicks at the user's request. Creating and improving “slats” is just one of the options for applying an iterative approach in our redesign. The same process was used when working on other elements of the pattern library, as well as in all business processes and on each page of the MailChimp application.

Today, before making changes to the application, we carefully analyze the feedback from our customers, which sent us on this path. Sometimes we hear words of gratitude, sometimes - complaints. Anyway, we learn something new after the changes made and respond to feedback. As a result, such a dialogue between the user and the team improves efficiency and, I hope, brings pleasure to users.

Improvement through redesign

Tyrik Christian

In November 2012, I was asked to look at MailChimp as an adaptive application. Due to the fact that there are few such large-scale adaptive applications like MailChimp, I didn’t have so many sources of inspiration. I collected things from my desk and moved from the UX-team office to another room along with DesignLab, a team of marketers and a few bulletin boards. Already here our creative director Ron Lewis instructed me to start researching and creating a design without any restrictions.

This was my first adaptive project. MailChimp is a massive application, and I was the only UI designer on the team. How was I going to deal with all this?

For starters, I needed to do one study. I reread Ethan Marcott's “Adaptive Web Design”, looked at the collection of Brad Frost's “adaptive design” patterns, and studied examples of flexible meshes in adaptive layout and the adaptive sites themselves. In addition, I attached inspirational design solutions to our office wall: examples of colorful illustrations, fonts and patterns.

At the end of this study, I realized that it would be easier to start the process by redesigning the MailChimp pattern library — a system of elements, rules, and relationships used in developing and designing an application.

Varieties of the main elements of the pattern library

Typography Templates

As soon as we agreed on a small set of patterns, I started designing the application navigation — this would help create a framework for its [application] subsequent development. Our goal was to create a fairly flexible navigation that would work on any device, to a certain extent, support co-branding capabilities and, first of all, solve search issues so that users can access the information they need at any time.

After several attempts to introduce horizontal navigation, I realized that it is not suitable for all devices. In the end, I chose vertical navigation, which was suitable for any screen size, since a normal column with navigation on a large display could be minimized to the “menu” button on a small screen. When I realized this, I tried a few more options, we agreed on the chosen direction with the team, and this navigation option was transferred to the developers so that you can get a working prototype.

Examples of horizontal navigation at an early stage of the redesign process

Vertical Navigation Design Options

Then I began to learn different ways to display content in MailChimp. After working with the pattern library, I thought about how to rebuild the grid and different modules for different screen sizes. The first thing that occurred to me was to create two design options for pages with control panels: in the form of blocks and a list. The first option would be suitable for new users, attracting their attention, and the second one could be used by experienced users to access a simple and informative table.

An example of displaying information in the form of a list and in the form of blocks in the campaign control panel

Tile templates for a block format for displaying information on campaign control panels, list panels and reports

I experimented with tiles for a few weeks while the rest of the team created prototypes of the pattern library. We wanted to make the lists more “alive”, but for this it was necessary to add avatars of subscribers, to the introduction of which we were not yet ready. We thought about displaying information for each of the client’s campaigns, but it would have made sense only if each letter was radically different from the rest, which in fact is not always the case. When displaying information in a list format, the adaptive tables were not too colorful and were hardly suitable for small screens.

After several weeks of experimentation and discussion, we decided to change course. Federico and I discussed the previous design, and came to a common opinion. We liked the idea of a practical table, and we decided to make it possible to sort the content, quickly browse and scroll both vertically and horizontally. As soon as we understood this, it became clear that we need lists, stylized in the form of tables, or “Reiki” (Fed told about them earlier). Soon we implemented these ideas in the form of sketches, design and prototype.

Sketchy Federico

Created sketches and design were transferred to colleagues to create a prototype

After the prototypes of the lists, reports, campaigns and the answering machine were created, I began to design several pages of the site. Compared to the design of the pattern library, this task was much easier than I thought: the hardest work was done, and I only had to develop small elements for several pages. We went through countless iterations before getting the finished design of the new MailChimp. We immediately discarded ideas that seemed original, but did not meet the needs of users. At times it is not easy to leave the ideas in which you put so much effort and move on, but this is only part of the creative process. Large-scale collaborative projects like this are taught to be modest.

Redesign MailChimp gave us invaluable experience that made us review our creative processes and think about how to improve them. We learned how to work more effectively with other teams and how to see a complete picture of the user experience. New MailChimp is now running, but there is something to work on. What I love about application development is that they can always be made even better.

Sources

From the Mailchimp team:

Books:

[Materials on project management and development of startups in our blog on Megamozg.ru ]

Source: https://habr.com/ru/post/259201/

All Articles