How do you expand a product's identity when its identity is what made it successful?
COMPANY
DocuSign
ROLE
UX Strategist/UX Designer/PMM/UX Writer
Main ProblemS
Information Architecture/Content Design/ UX Strategy
YEAR
2024
+35%
+25%
+20%
The Problem
The Goals
Three constraints that shaped every decision.
WHO I WAS DESIGNING FOR
HR teams already knew DocuSign. But, HR is a complex organization with different users and needs across the HR lifecycle. Shifting this perception was the primary design constraint.
The research surfaced a consistent pattern: HR professionals weren't skeptical of DocuSign. They were just confidently but incompletely informed.
They only saw DocuSign as able to solve for certain functions and needs rather than it being complementary for the entire organization. The design problem was two fold. How do you design the page structurally so that value is understood while also disrupting an existing mental model of what the product is.
WHAT I NOTICED
The problem wasn't awareness. It was the shape of the awareness.
The first was a messaging mismatch. The page was answering "what does DocuSign do?" when HR buyers were asking "does DocuSign solve my specific problems across my entire workflow?" Those questions require completely different content — different emphasis, different sequencing, different frame.
The second was an architecture failure. Even if the messaging had been perfect, the hierarchy would have undermined it. Proof buried below the fold doesn't function as proof at the decision moment. A lifecycle story with no visual structure can't break a category association. CTAs with no destination logic create paralysis regardless of how well they're written.
The insight that changed the approach was understanding that the copy-first wireframe process wasn't a writing exercise — it was an IA exercise. Writing out the intended information flow made the structural failures visible in a way that auditing the visual design didn't. The hierarchy problems showed up as messaging problems before they showed up as layout problems.
KEY INSIGHT
The order in which information appears is a messaging decision. The visual weight given to each section is a content decision. They aren't sequential — they're simultaneous. The copy-first wireframe process was the method that held both together.
The Structural Shift
The reframe: don't correct the perception. Expand the frame around it.
The decision to start with copy-first wireframes was the most important process choice. Before any visual decisions were made, the information hierarchy was established in writing — what needed to appear first, what earned the second position, where proof belonged relative to conversion triggers, what each CTA needed to communicate about its destination.
That sequence kept the design team building into the content's logic rather than retrofitting copy into a visual structure that was already set. It also surfaced the hierarchy problem clearly; the moment you write out the intended flow, you can see where the existing structure breaks down. The structural failures showed up as messaging failures first. Fixing the messaging in writing fixed the architecture at the same time.
The lifecycle frame — hire to retire — became the structural spine. As a messaging decision it gave DocuSign a larger identity than eSignature alone. As an IA decision it gave the page a navigable frame that every section could sit within. Features became capabilities within a workflow rather than a flat list. The hierarchy went from a pile of information to a path.
CONDITIONS REDESIGNED
CTA redesign — language clarity and wayfinding logic as one decision.
Replacing "Learn More" with destination-specific language (Start demo, View pricing, Direct signup) was simultaneously a messaging clarity decision and a wayfinding design decision. The words made the destination predictable. The placement made the destination reachable. A CTA that names where it goes but sits in the wrong position in the hierarchy is still a failure. So is one in the right position with vague language.
KEY IMPACT
→ 25% increase in CTA clicks in the hero after giving better guidance for the links.
Redesign of header and cTAs
In the old format, CTAs were vague and the value wasn't that clear for HR professionals. With the new redesign, value was clear and CTAs clearly linked to either direct signups or something that aliigned with our brand as a digital solution for HR teamss,
KEY IMPACT
→ 35% increase in scroll depth on page with more reasons to continue to scroll. Overall user experience became easier to navigate with easy to understand benefit sections.
The lifecycle frame had to be true in the content before it could be present in the hierarchy. Writing it first — establishing what it needed to say and in what order — meant the design could build into a logic that was already correct rather than approximating it visually.
In the mid-fidelity, we realized that the component relationships and messaging needed to be weighted better before visual execution.
messaging shifted from feature-centric to value-centric
The emphasis in the messaging shifted from features and their abilities to help teams to the direct value that these products bring to teams. We shifted messaging to be more human-centric.
Proof placement — where credibility lives in both the content and the layout.
Moving customer validation adjacent to the primary CTA was a messaging decision about what HR buyers needed to see at the moment of consideration, and a design decision about spatial proximity between trust signals and conversion triggers. The content told buyers that peers in their role had validated this. The hierarchy made sure that content arrived at exactly the right moment.
KEY IMPACT
→ 20% CTA conversion increase with better placement of buttons across the user experience of the web page.
CTA ReDESIGN
The best proof in the world doesn't function as proof at the decision moment if the hierarchy places it after the decision has already been made. Messaging quality and placement quality are inseparable — you need both or neither works.
The Tradeoffs
Every decision that served the new frame had a cost to something else.
WHAT WE GAVE UP
The hero lost atmospheric brand space to functional content
Leading with the lifecycle frame meant the hero was doing structural and positioning work rather than emotional work. A deliberate choice — breaking the mental model mattered more than crafting a brand impression at the top.
THe SYSTEM VIEW
OUTCOME
WHAT THIS CONFIRMED
The hierarchy is the message. Where information lives is as much a content decision as what that information says
The biggest shift this project produced was understanding that information architecture and content strategy aren't complementary disciplines that work in sequence — they're the same discipline operating at different resolutions simultaneously. The order in which things appear, the visual weight given to each section, the proximity between proof and intent — these are messaging decisions expressed through layout, and layout decisions expressed through content.
Copy-first wireframes are the process that makes this tangible. Writing the hierarchy before drawing it forces you to be explicit about why things appear in the order they do, which means by the time the visual design happens, the logic is already right rather than being approximated after the fact.
What I'd instrument next: scroll-depth per section and CTA click-through rates by destination. The structural decisions are bets about what buyers need at each moment in the page. Analytics would show which bets were right and which sections are still losing people before the conversion trigger.