Microsoft Integration:
Product Redesign

A product redesign that better reflects DocuSign's current branding and design system and aims to create a better user experience and address new use cases.

* This product is currently in the process of being shipped, so some features have been left out for confidentiality reasons and will be added once the product goes live.
Duration
3 months
Role
Product Designer
Skills
PURE Analysis, Brainstorming, Sketch Concepts, Wireframing, Design System, Collaborative Work, Task-Based User Testing, Product Shipping

Overview

When DocuSign's Microsoft integration product was initially shipped, it was made strictly by engineers, so even though it was made to be functional, the feasibility of its use was not taken into consideration, meaning the product experience for its user was not as great as it has the potential to be. Microsoft has recently introduced a new framework to third-party developers to build applications for this product; therefore, as part of their initiative, they're planning to sunset the existing framework DocuSign currently utilizes.

Because of this initiative, DocuSign has no choice but to migrate to the new framework - but this also introduced the perfect opportunity to rethink their integration product from the ground up and consider factors they weren't able to before, including user interface and experience.

The Goal

Redesign DocuSign for Microsoft integration production to create a better user experience and address new use cases.

01  |  Discover

background & user research

In order to learn more about the problem space and the product I'll be redesigning, I met with UX researchers and my project manager to get background research on the product, its users, and the usability analysis done on the current version of the product. I was provided with and reviewed research insights and a product requirement document (PRD) that helped me better understand our target user group, gain more clarity on the design goals and determine which product requirements - functional and non-functional - should be prioritized over others based on user needs.

For the initial product research process, the UX research team conducted a pragmatic usability rating by experts (PURE) analysis to quantify the integration product's ease of use and gain qualitative insights on how to go about fixing any possible usability issues.

evaluation of current design

After reading up on the PURE analysis results, my project manager walked me through the logic flow for the product and how each feature currently works. The product walkthrough gave me a better technical understanding of why the engineering team made the formatting decisions they did based on the company's design system at the time and Microsoft's design constraints for their third-party developers. Then, on my own, I revisited the pages I was shown, compared them to the PURE analysis feedback, and took notes of which pages had the most usability issues that weren't affected by Microsoft's design constraints and what those issues were. From that, I was able to determine the following pages needed to be prioritized for this redesign project to improve the product experience for users:

user characteristics

While no major usability issues were found, from the PURE analysis, PRD review, and looking at the current page designs for the product, I determined the main user pain points that could make navigating through the product hard:

Because a significant percentage of customers use Microsoft for their work we deemed it important to remedy these pain points to give them a better user experience.

design requirements

Having a complete understanding of the users' needs and characteristics by this point, I could establish the requirements and design implications DocuSign's design solution needed to include. From the many design requirements, I focused on three of these requirements for testing and evaluations:

01

Easy to Use with a Consistent Design

The solution must be easy to use and have an aesthetically consistent interface with DocuSign's other products. This will ensure that the product is recognizable/familiar to users, making product navigation faster and not an issue.

02

Entry Points Discoverability

The solution must have various entry points in the Microsoft product for them to access the DocuSign integration. This will ensure our users have a better opportunity to find the DocuSign integration when doing various tasks.

03

Improved Visibility of System Status

The solution must give the user more information about the status of the envelopes they have sent or signed - if the envelope is completely signed, pending (waiting on another person to sign), or expired. This will ensure users feel satisfied, certain, and knowledgeable about the outcome of their actions.

02  |  Ideate

brainstorming

To kick off the ideation phase of my project, I began brainstorming possible design solutions that would successfully meet the design requirements and DocuSign's design system but wouldn't be overwhelming for users to use. In order to come up with some ideas during my brainstorming session, I looked over DocuSign's other products for design inspiration that perform the same or similar actions as the integration and build upon them to fit Microsoft's design constraints. This process was beneficial for me because it allowed me to be creative with my design but still stay grounded and close to DocuSign's and Microsoft's aesthetics in a way that would both enhance design consistency across products and increase familiarity for users so they can rely on recognition rather than recall. After finishing my brainstorming session, I took notes of design features and elements that would work well with the integration product and its pages and made concept sketches for each one:

03  |  Create

main features

Before diving right into wireframe making, I talked with my project manager, team manager, and other product designers about the concept sketches I came up with to get feedback and design critiques on them and make sure I was on the right track. After taking into account the critiques and suggestions I received, I made some changes to my concept sketches and finalized the main features for the product redesign still centered around our users' needs and design requirements.

1. Menu entry points
An updated menu to access the DocuSign integration from different sections of the Microsoft product
2. Post-send and post-sign
Users will get an immediate update on what has happened with the envelope they just sent or signed and what will happen to that envelope when it is completed
3. Administrative settings
Admin users can make DocuSign-specific changes for the product from multiple areas of the Microsoft product for easier discoverability
Users can view all of their envelopes on a status dashboard page with filter tiles
4. Check status

wireframes

I then created wireframes to show the flow logic and content of each feature for the redesign.

flow logic 1  |  post-send and post-sign
After logging into their DocuSign account from the Microsoft product, for users to send or sign an envelope, a new tab will generate, taking them to DocuSign where they can go through the regular process to send or sign an envelope. Once they are done signing or sending an envelope, that DocuSign tab will close and redirect them back to the Microsoft integration page they were initially on. From there, the user will see a screen telling them their envelope was successfully sent or signed and will inform the user what will happen to their envelope once it has been completed by everyone it was sent to. Users will also be given the option to return back to the Microsoft product or send another envelope.
flow logic 2  |  administrative settings
From the Microsoft product's ribbon bar, admin users can access the integration product's settings from the DocuSign dropdown menu and select the "Settings" option. They will then be taken to the Settings page where they can make changes related to the environment, signed documents, document naming convention, and more. There are two buttons located at the bottom of the page where they can save or cancel their changes and a back arrow located in the page header to return to the Microsoft product.
flow logic 3  |  check status
With this feature, users can view the status of all of the DocuSign documents they need to complete, they're waiting for others to complete, that have expired or are expiring soon, and that have been completed. Users can filter through documents by their status using the interactive filter tags located near the top of the page and can view, download, sign, or resend using the appropriate action button corresponding to the document they select.

04  |  Test

design feedback & prototype

Once the wireframes for the main features were complete, I conducted a design critique session with my project manager and four senior product designers to determine if the flow logics were easy to follow and straightforward while still satisfying our user needs and discover any accessibility and usability issues that may have been overlooked or gone unnoticed by myself and from the previous feedback session. After finishing the session, I made a few design changes based on their feedback and created a high-fidelity prototype that would be the first iteration to go through user testing.

DocuSign Menu

The home page serves as a feed filled with posts and events to catch the user up on what they've missed. The posts are sorted based on the hashtags used, events that were created and shared, as well as posts made by people in the user's bubble. They can also engage with other users’ posts by liking and commenting on a post or RSVPing for an event.

Post-Send and Post-Sign Pages

The search screen is where the user can search across the entire app for events and posts by typing in relevant keywords. The user has the option to filter their results to exclusively see events, posts, or activities.

Settings Page

My Bubble page is where the user can connect with people based on location or similarities in interests, lifestyles, and more information shared in their profiles. The user has the opportunity to send and receive requests and keep track of them. Once people have been added to a user’s bubble, the user can send messages to the members.

Check Status Page

The events page lists the events happening around the user's area sorted by relevance. RSVPing moves an event to the “My Events” tab. Each event card includes a brief description of the event along with the details of who is attending the event that they know.

evaluations & final iteration

Once completed, my prototype was ready for user evaluation to assess the overall usability of the design and interface and ensure the product meets the three main design requirements. I teamed up with four UX researchers to create a system usability scale (SUS) testing in UserTesting. From these tests, we gained a lot of insight into the new designs and I was able to take the feedback and do another design iteration before my time interning at DocuSign came to an end.

05  |  Reflection

lessons learned

During my 12-week internship at DocuSign, I had the opportunity to meet, talk, and learn from other interns and a diverse group of amazing people with various roles that make up the Product Experience team. The UX writers taught me the importance of wording and terminology and how much influence they can have on the user groups that interact with products. The researchers taught me about a few research methods they use for background and user research and the importance and use cases for each one. Other product designers taught me the unique design processes they use and helped improve my skills when working with, making, and using design systems to show how convenient and powerful they can be. The engineering team expanded my understanding of pixel usage and localization and helped me understand more of the communication between designers and engineers. My managers taught me more about design file organization, documentation, and task management & prioritization.


While working on my internship project, I learned more about myself professionally that I'll carry with me throughout my career that'd I'd like to share:

🗝

Adaptability is Key

During the user testing phase of my project, I had to make many quick minor iterations as we learned more about how our users interact and use the product. This made me further realize just how important it is not to get married to your ideas and stay open-minded to different ideas as time progresses throughout the design process.

🐝

Collaborate with Others

While I was the only product designer assigned to this project, I wouldn't have been able to do the work I did without the feedback and design critique sessions with researchers, managers, engineers, and other designers. Having unique points of view and experiences present throughout the process gives you a chance to create visions and designs you probably couldn't ideate alone. Instead of too many cooks will ruin the broth, I believe a swarm of bees makes the honey sweeter!

🛞

Don't Reinvent the Wheel

In the design and tech industry, there can be pressure to always be the most innovative person in the room, and this experience taught me that doesn't and shouldn't be the case for everything you work on. I realized I don't have to be a Steve Jobs while redesigning this product, especially when working with a great design system. I learned that products that share similarities in different aspects can enhance the user experience. Overall, you have to remember the end goal is to create the best product experience for our users and customers.

© 2022 by aayahna herbert