ReplyToSome Redesign - Helping a Start-Up Achieve Its Business Goals through Design
WINDOWS DESKTOP application
Overview
Objective - Redesign a B2B product that focuses on preventing lawyers from accidentally sending emails to the wrong person.
Client - Winnieware LLC's flagship product: ReplyToSome.
My role - As the only designer on the team, I was responsible for all the UX, UI, and visual work associated with the redesign, and for designing the company’s sales and marketing materials.
Challenge - As an add-in product of Microsoft Outlook, ReplyToSome has limitations. The designer must solve complicated problems under strict constraints and also respect users' existing habits.
Final product showcase - The most recent version after major redesign was released in April, 2018.
Brief background story:
Winnieware Co-Founder, Peter Norman, formerly a senior attorney, had suffered from frustrations with email. He decided to create an Outlook add-in called ReplyToSome to solve common problems lawyers faced when they were emailing sensitive information to different parties. While his concept for the solution was innovative and met a real need among firms, the design of the original product was holding it back. I joined the team and led the process of reimaging the product from a design perspective.
This project was a turning point in my career – it made me realize the complexity of UX/UI design and lead me to fall in love with its unique challenges, from the need to combine business goals and product design, to the fast pace of product launching and iteration.
Email mistakes: a human problem in need of a design solution.
1. Law firms’ email crises
Email mistakes can affect law firms’ bottom lines: the legal insurer ALAS reported that in 2014, it had reserved over $60 million for claims relating to harmful emails. Stories about lawyers accidentally disclosing confidential information to opposing parties appear consistently, even in the face of rapidly changing tech. These mistakes cause the real harm to the unlucky lawyer’ career, their law firm’s reputation, and its clients’ interests.
Understanding a huge problem -
the problem of email errors
your confidential email ends up on page 1 Disaster strikes -
2. Don’t blame humans, blame technology
Most lawyers at large law firms use Microsoft Outlook to manage their emails. But like many popular email programs, Outlook doesn’t do a good job meeting the needs of lawyers handling fast-moving, multi-party, sensitive transactions. The reply-all or autofill features create opportunities for costly mistakes. Outlook features for creating and managing distribution lists (contact group) are difficult to find and use. And Outlook can't highlight information about outside parties to emails or changes to conversation threads that lawyers might need to see.
Lawyers would send out dozens or more emails to varying parties who needed to receive different information.
3. Existing tools cause alert fatigue.
When Winnieware was founded in 2014, there were some products available on the market that would show warnings when the users were replying to all or to outside parties. However, these pop-up warnings mostly generated false alarms and users would learn to ignore them.
The background story of ReplyToSome - what was already goodand what needed to be improved.
Winnieware’sCEO, Peter Norman, a former seniorattorney who had suffered from frustrations with email, had the insight that hecould reduce the risk of email errors through a better user interface. Whilethey lacked formal design backgrounds, Peter and his partners created anOutlook add-in called ReplyToSometo minimize the risk of common types of errors. He summarized ReplyToSome 1.0’sprimary approach to preventing emailmistakes as following: "IncreaseVisibility and Immediate Feedback":
1. ReplyToSome’ sinterface lists all of the recipients in rows, sorted by their domain names so that lawyers have a more organized viewof recipients when dealing email with multiple parties.
2. The domains are color-coded according to whether theyare insiders or outsiders - by default insiders are people from theuser’s organization, and outsiders areeveryone else, but users can customize the settings.
3. The autocomplete bar in ReplyToSome is a superioralternative to Outlook’s existing auto-fill function. Unlike Outlook, it showsmatches anywhere in the name or domain, not just those that start with the same letters. The matching addresses themselves are color-coded so that users canmore easily distinguish between different contacts with similar names.
However, ReplyToSome 1.0 didn’t go through any user experience research or user testing process and had not benefited from the participation of a professional designer. As a result, ReplyToSome 1.0 was not easy to learn or use. Therefore the company wanted to redesign ReplyToSome1.0, and was open undertaking the entire UX design process and potentially changing significant features of the product. This is the point when I, as the designer, came to the story.
Process and timeline of the redesign
I joined the ReplyToSome team in June 2016 and led two rounds of redesign. The first round could be described as “triage” – identifying major design flaws, developing improvements, and then testing them. The result was ReplyToSome 2.0, which Winnieware released in November 2016. The second round implemented a comprehensive design process that comprised research, testing, and iterative development to turn the product’s design into a competitive business advantage. This process led to the release of ReplyToSome 2.3 in April 2018.
Internal critic & first round of re-design
When I first joined the team, my assignment was to conduct a review of the existing product. I started by playing with the product from the perspective of a new user. I found that the product's solution to preventing email mistakes to be very innovative compared to other competitors on the market, and it did help lawyers handle complex emails with multiple recipients. However, at first glance, I found numerous UX problems:
1. As an Outlook add-in, the width of the product’s interface took up half of the screen, leaving too little room for the body of the email. Also, the interface displayed the same information, such as names and email domains, in separate table columns – redundancies that cluttered the screen unnecessarily.
2. The interface design is very unprofessional. The team had not thought through font, color, and hierarchy.
3. The user task flow wasn’t efficient: we could eliminate unnecessary steps without reducing functionality.
4. Some operations lacked visual indication and feedback, such that the user would not know if an attempted action was successful.
5. Actions taken in ReplyToSome 1.0 were not automatically synced with Outlook but required users to “Set” the changes and “Close” the ReplyToSome interface before sending the email. This process could itself lead to mistakes and undermine the product’s goals.
At the same time, lawyers are the busiest group of people in the world. If they think that software is not easy to use, they will never take the time to read the instructions or switch from their current habits. The learning curve of the product must be as short as possible. Therefore, in addition to correcting the usability problem, it is necessary to simplify the product further to make the user experience more fluent and make this add-in product as seamless as possible.
From the results of myinternal evaluation, I created a series of design mock-ups and process chartsthat would address the critical problems we found. The redesign called forautomatic syncing of changes made in ReplyToSome to Outlook (and vice versa),eliminating redundant information, making the interface slimmer, simplifyingprocesses, and improving the overall look and feel. I worked with the developerto implement these changes. The beta version of this redesign was ready fortesting in September 2016.
Below are some of my UX design process and ideation:
Icon ideation:
Release of ReplyToSome 2.0 and Start of Phase 2 of Redesign
After addressing the issues identified during user testing, Winnieware formally launched ReplyToSome 2.0 in November 2016. The redesigned product soon received recognition as one of TechnoLawyer’s top 25 products of 2016. The product also won its first paying customers. However, I recognized that to make the product’s design a real competitive advantage, we need to do more. In June 2017, we started phase two of the redesign process, beginning by gathering structured feedback from target customers.
Usability testing - recruiting users outside of a local cafe
After we finished the beta version of ReplyToSome 2.0, we set up a usability testing spot in a cafe across the street from the University of Pennsylvania. With the help of Winnieware’s mascot- the founder’s dog Winnie, we successfully recruited more than ten users to test our product. Testers received a free gelato from the cafe. The user testing helped us identify and address instances where users had trouble finding and using features and led us to integrate a “Getting Started” guide into the application.
.JPG)
Usability testing - recruit six lawyers
While the CEO himself is an experienced lawyer himself, the founding team had never gathered a group of practicing lawyers to participate in any user testing. Finding lawyers to test the product involved particular challenges: while Winnieware could recruit college students for the price of a gelato, it had less luck with lawyers who bill hundreds of dollars per hour and work 60+ hours per week. But the input and buy-in of lawyers were crucial to the product’s success. Law firms often invited us to demo the product in front of their lawyers, and the lawyers could push their firms to buy if they thought the product would improve their daily work. I convinced the team to recruit six lawyers to participate in our usability testing. We learned a lot from their input.
One interesting finding is that the lawyers have some unique habits of using the software. For example, lawyers are very sensitive to text. Their reading speed is well above average. Regarding interface design, they tend to see all the information at once - in one individual screen rather than going through a series images and text that intended to break larger chunks into smaller steps.
After the testing, the team transcribed the notes we took onto a whiteboard, went through a comprehensive discussion and identified problems with the existing design, and then brainstormed solutions.
Major problems identified during usability testing
The four major themes that repeatedly arose during testing were:
1. The user flow was not fluent or intuitive.
ReplyToSome 2.0’s user flow represented an improvement over the original version, but it still needed to be designed more intuitively, with fewer steps and logic that better matches users’ mental models. Everyday user tasks in need of improvement included “quickly composing a new email,” “quickly replying to only part of the recipients," etc.
2. The application is lacking indication and feedback.
While automatic syncing between Outlook and ReplyToSome was a significant improvement, it also confused some users, as they sometimes failed to recognize when their action had made a change in Outlook or ReplyToSome. For example, ReplyToSome 2.0 did not give adequate feedback when the user made changes to a list of addresses on an email.
3. ReplyToSome 2.0 did not conform to Outlook’s design standards.
As an add-in product, ReplyToSome 2.0 should extend and improve the features of Outlook without requiring that users change their existing habits, learn a new design logic, or switch back and forth between incompatible methods of accomplishing similar tasks. Add-ins should follow Outlook’s existing design standards as far as possible. More research on Microsoft’s design standards would be required to ensure that ReplyToSome would work intuitively for existing users of Outlook.
4. The user interface didn’t consistently meet the software industry's standards.
While we had made improvements to the most apparent visual design flaws in the original product, these improvements had not always been consistently applied. The interface still lacked hierarchy and elements of the design language, such as hover status for button and menu items, were not uniformly and systematically applied.
The Path from ReplyToSome 1.0 to ReplyToSome 2.3
ReplyToSome 2.3
ReplyToSome 1.0
ReplyToSome 2.3 inherits problem-solving principles from ReplyToSome 1.0 - increasing visibility and immediate feedback - which help lawyers avoid losing focus and making mistakes.
In the redesign, we push the founding vision for the product to maturity by improving the fluency of the user workflow, reducing the number of steps in common operations, reducing any possible confusion by adding necessary visual feedback and increasing the application’s visual consistency. The new design effectively eased demands on users’ working memory and helped users spot potential mistakes before they become irreversible.
Making Common Email Tasks Simpler and Safer
1. Reply to just some addresses
- In an email you’re reading, select the addresses you want to include in the reply.
- Right-click on a selected address.
- Select “Reply copying Selected” to send a reply back to the sender with selected addresses in Cc or select “Forward to Selected” to send a forward only to the selected addresses.
2. Avoid autocomplete errors
- Click on ReplyToSome’s autocomplete bar.
- Start typing an address. You can type a first or last name, email address, or domain.
- Results are color-coded: green for insiders, red for outsiders.
- Use the up/down arrows or your mouse to select your address and press enter or click. The address will be added to your email.
- ReplyToSome automatically scrolls to the row where the new address was entered and highlights the new entry.
3. Create a new contact group
- Click the Groups icon on the left navigation bar to open the groups area.
- Click the “Create New Contact Group”.
- Add addresses using drag/drop, copy/paste, or the new group dialog’s autocomplete bar.
- Give the new group a name.
- Click Save.
4. Use Groups in an email
- When you are writing an email, click the Groups icon.
- Double-click on the list’s name or click the caret to its left to view members of the group.
- Select a group or members of the group.
- Drag and drop the selection into the “recipients” area of the ReplyToSome user interface.
- ReplyToSome will automatically add the selected group or addresses to the email.
5. Check for errors when sending
- Click on the “Settings”.
- Select “SendCheck Settings”.
- Check the box to the left of the options you want to enable.
- Whenever you send an email, ReplyToSome will check the email for problems. If any are found, you will be asked to confirm if you want to send the email.
Handoff to the developer
Below are some mock-ups for ReplyToSome 2.3 used to communicate design decisions to the developer. In addition to these step-by-step instructions, I used Zeplin to demo the dimensions and the colors.
Click image to enlarge.
-min.jpg)
