Director of UX & Product Design
What We Built
Gliffy Project is a visual communication tool for teams:
It closes the gap between vision and execution by putting visual documentation squarely at the center of the product development process, so that all members of a team can always work in full context of the big picture plans that describe their complex projects.
• Led ‘zero to one’ product design process—Defined and drove entirely new product development for Gliffy, from initial blank whiteboard to launched product
• Facilitated design workshops and sprints—Building alignment and direction through highly collaborative, rapid problem-solving around product strategy, directional evaluation, turning research into actionable product direction, etc
• Defined product strategy—Partnered with senior leadership to explore and define: what should we build & why? How can we best set ourselves up for business success? What are our highest ROI items?
• Led user & competitive research and problem discovery—Defined & conducted interviews, surveys, & direct observation with goal of defining our problem space, user pain points, & prototype validation
• Managed design team & process—Hiring, leadership, mentorship & coaching, quality of work, timing & prioritization, tools & workflows, goals & OKRs
Product Design Strategy
Gliffy was looking to grow our core business and increase value to customers by adding a new product to our existing product lineup through these goals:
Create a new Gliffy product that achieves these business goals:
• Continue our focus on software teams—specifically in product development
• High usage frequency & breadth—ideally daily use across core team functions
• Expand upon Gliffy’s visual “superpower”
• Strengthen Gliffy’s relationship & presence in the Atlassian Marketplace
• Mandatory multiplayer / inherently viral—teams use the product together, and adoption snowballs through natural usage
Through customer, non-customer, and competitive research, we identified the following patterns of pain points that product development teams consistently face:
1- Scattered documentation and communication
Information is scattered across email, IM chats, meetings, wikis, and work tickets
It’s difficult to keep track of what’s current on projects, work to be done, overall status, etc.
2- Ticketing systems are text-based while people & products are inherently visual
It’s difficult and time-consuming to understand how written tickets relate to visual designs, user flows, software & information architectures, & complex systems
3- Complex projects need a single source of truth
There is no single, up-to-date destination for teams to see what needs to get done and why, the current state of their projects,
In order to set some broad boundaries for the design team to get creative within, we defined some clear—and sometimes controversial—design pillars. This gave the team guardrails to have fun and explore within without
Consumer-grade enterprise product—The stigma is that enterprise products are stuffy, dated, bloated, inefficient, and fugly—products with little regard for user needs, polish, or delight. From the start we recognized and embraced that enterprise user expectations are high, and the bar for quality, efficiency, and craftsmanship is only getting higher.
Enable 80:20 Jira functionality—The point here is to enhance Jira, not replace it. Jira is a massive, deeply complex tool that enables teams of any size to run agile development any way they like. It’s widely used, and not only would it take forever to rebuild all the functionality that it provides—it would be a massive waste of time. Our goal is to enable the 20% of tasks that 80% of Jira users do day-to-day to be as efficient, visual, and fun as possible.
Mandatory multiplayer—With our main goal around increasing overall breadth and frequency of Gliffy product use, this was a driving pillar behind almost every design decision we made. This is a product designed to grow between people, teams, and even organizations. Product integrations and team mechanics like live collaboration and organic invites are built to create deep value for teams working together inside of Gliffy Project.
High-Level Direction & Validation
With a clearly defined, high-value problem to solve, we began to go wide on how we might relieve some of the pain that product development teams feel around cross-functional communication, scattered documentation, and complex text-based tracking tools.
Some pieces came easy, while others took seemingly endless rounds of exploration, prototyping, user-testing and validation to get right.
It was important for us to understand the benefits and deficiencies with as little initial investment as possible. As a rule, these validations were done with as little upfront effort as we could manage while still giving clear form to the core idea and getting an honest read on its strengths and weaknesses.
Once a hypothesis was formed and its strongest potential direction agreed upon by the team, it was given rough shape and shared with current users, beta-testers, and / or research subjects depending on which phase of the project we were in.
This cycle of Build > Test > Iterate > Repeat allowed the team to try out and test a ton of different directions, and weigh their pros and cons and trade-offs both internally and externally. It became clear what was working and what wasn’t, what made sense for users and what didn’t, and where the product’s real value lay for teams.
As a small team creating a complex product from scratch, efficiency was critical for us to maintain forward momentum. It became important that we clearly articulate the granular interactions, UI elements, and components that enable the experience in a way that doesn’t require a lot of overhead for initial communication or future iteration.
Sketch’s shared symbol libraries provided a powerful way for us to systematize our UI design, without needing to go back and re-work elements when direction changed. Some of the specific benefits of this approach were:
Component-based design—Clearly communicate how disparate UI elements combine to form complex components, states, responsiveness, etc
Consistency—Share elements and components with all designers so the team is always working from the same foundation
Quality control—Enable the team to make conscious decisions on when and why to add new components versus re-using existing ones
Iteration—Update the parent component and cascade its changes across all instances in all drawings
Implementation—Clearly-articulated design elements enabled our dev team to mirror our Sketch components one-to-one, as designed, leading to implementation efficiencies across the entire team
Available in Atlassian
Our team uses Gliffy Project to build Gliffy Project. It’s helped us clearly communicate big picture vision alongside granular tasks, leading to more efficient development cycles, less wasted time and effort re-doing work by getting things right the first time, and happier cross-functional teams.
Gliffy Project is launched and available for free trial and purchase in the Atlassian Marketplace. 🙌