OVERVIEW
Autodesk’s Human Interface Guidelines (HIG) will be a new living design system to help all product teams design, write, and build better experiences within and across all products. The purpose of HIG is to develop a comprehensive set of design, content, and interaction patterns with reusable code components for all cloud, mobile, and desktop products, to have a common voice and visual language – one that is uniquely Autodesk in style, functionality, and quality.
MY ROLE
Over the summer of 2017, I designed the Upload Experience for HIG, with the goal of providing a framework that’s both flexible and consistent across products. I worked alongside a Research Intern, and a Content Strategy Intern, with continuous guidance from our three managers for Design, Research, and Content Strategy.
Autodesk makes software for the architecture, engineering, construction, manufacturing, media, and entertainment industries. Owing to my architectural background, previous experience working with Autodesk tools, and the time spent at construction sites, I could understand the technicalities and constraints of the tools, and also empathize with the use case contexts.
Being the only architect in the team, and in the XD team at large, I was the in-house customer voice during the entire design process.
An important part of my role was to bring my team mates up-to-speed with the product, and to provide perspective from a user's point of view.
THE CHALLENGE
DESIGN THE FIRST 'EXPERIENCE' FOR HIG
HIG follows an Atomic Design System style, categorizing user interface elements in to 4 levels - Basics, Components, Layouts, and Experiences. The task assigned to our team of 3 interns was to develop the guidelines for designing the first ‘Experience’ for HIG: Upload Experience in an Autodesk product.
An ‘Experience’ typically involves moving through several steps or screens to accomplish a specific task such as sign-in, and sharing.
Creating design guidelines for an experience was new for the team, so we received guidance based on the design process that the team previously used for building individual components such as 'buttons' and 'form elements'.
Multiple interaction patterns used in few related products
The upload experience looks and feels very different across Autodesk products with multiple interaction patterns such as modals, in screen drag-and-drop, progress indicators, and a variety of entry points.
Our challenge was to create a unified design pattern, that’s intuitive and consistent - both across similar products and within a product family.
DESIGN PROCESS
FOLLOW AND VALIDATE
The XD team followed a well-defined collaborative process to develop HIG.
Since, we were working on the first experience to be added to HIG, the brief was to not only follow the existing design process, but also to contribute in validating the effectiveness of this process for developing further experiences.
DISCOVERY
FINDING MEANING IN CHAOS
The first phase of work included understanding the existing design language, goals of the different product teams, customer pain-points, and technical constraints. We conducted an audit of both internal products and competitors from the perspective of identifying patterns, and best practices.
UNIFIED DEFINITION
This initial research showed us that individual product teams had different understanding, approach, and terminologies for what 'upload' implied in their context.
While all product teams worked in the best interest of customers, the variations across these teams led to an overall overdose of interaction patterns for essentially the same or similar experience.
The audit allowed us to set a unified definition for 'upload' experience for HIG, that the product teams could easily leverage: "Upload is copying a file to a server. Here at Autodesk our customers upload both simple generic files (.jpg, .pdf, etc.) and complex files such as assemblies which consist of parent-child file relationships (Fusion) and plans that require extraction (BIM)."
We could also clear the air around other similar or related experiences such as - Download (opposite), Import, Insert (commonly mistaken for).
SHARED DESIGN GOALS
The discussions with all stakeholders, allowed us to come up with a shared understanding of customer needs and business objectives. For a unified experience to work for multiple products in different contexts it had to be - Seamless, Consistent, Discoverable, Intuitive, and Fast.
These goals guided my design approach, and also became our metrics for testing.
DESIGN PATTERN OVERLAPS
The audit revealed several overlaps among all products, with respect to features, and interaction patterns. We used Mural to organize our findings, and the LUMA technique of Rose, Thorn, Bud to categorize the overlapping elements and patterns as - positives, negatives, and having potential.
Pattern finding and categorization.
DESIGN TAKE 1
MAPPING OVERLAPS
Upon analyzing the existing landscape of the upload experience across a breadth of products, I first identified the significant overlaps in product requirements. I came up with a workflow that could cater to 2 product families, operating in different domains, but with very similar needs for uploading simple generic files (.jpg, .pdf, etc.) and connected files such as assemblies which consist of parent-child file relationship.
Unified workflow for two product families for two common product requirements
DESIGN DEVELOPMENT
FROM PATTERN TO PRODUCT
Once the workflow was validated in our internal review sessions with the XD team, I started working in specific product environments.
To encourage and increase adoption of any unified design guideline, working closely, in confidence with the product teams was absolutely essential.
During this phase, I translated the basic workflow in to specific interaction patterns to figure out the details and generic micro-interactions, as well as to seek validation from product teams.
Interaction pattern applied to a specific product environment for uploading simple files and connected files.
CUSTOMER VALIDATION
BUT WE ARE NOT OUR CUSTOMERS
The previous phase of design evolved through internal critiques and feedback from the product partners, but we were not our customers and of course we did not have all the answers. The XD team ensured that any new guideline is rigorously validated by customers before it's added to HIG.
for product design and manufacturing. Fusion team supports more than 50 2d and 3d design file formats including STEP, SKP, Inventor (IAM, IPT), Filmbox (FBX), IGS and more.
I partnered with our Research Intern to chalk out pertinent grey areas in the experience flow that needed feedback from a design perspective. This exercise helped in both recruiting relevant customers, and in designing the research scenarios and questions.
We conducted 7 live user research sessions for which I acted as a note-taker. In our team de-briefs, we again used the LUMA technique of Rose (positives), Bud (potential for improvement), Thorn (negatives) to categorize and analyze the user testing results.
Our Research Intern presented an executive summary of the finding to the HIG team and our product partners.
Analyzing results from the research sessions, and developing action items
DESIGN TAKE 2: ITERATIONS
RESEARCH DRIVEN ITERATIONS
During the customer validation sessions, we found that most issues were clustered around the progressive disclosure of adding connected file types. I redesigned the flow by simplifying the first part of upload, and worked closely with the Content Strategy Intern to ensure that our notifications system has more clarity.
Customer quotes and pain-points
DESIGN DRIVEN ITERATIONS
As we were conducting our research sessions, the HIG was continuously being updated by new components, some of which were part of my proposed interaction pattern. Therefore, the second phase of design also evolved based on updated guidelines for design elements and spacing requirements.
Updated guidelines for modals and spacing
CONTENT DRIVEN ITERATIONS
The entire design process was completed with careful assistance from our Content Stratgy Intern. I revised the design as and when she provided feedback to ensure that content and design were up-to-date with the unified guidelines.
FINAL PRODUCT
DOCUMENTED DESIGN GUIDELINES
Although we were following the structure set by the HIG team, in documenting the guidelines for an experience, we created workflow diagrams highlighting the meaning and best practices for each elements. In doing so, we developed a template that could be used for documenting future experiences for HIG.
ANATOMY
The first step of documentation was to break down the elements used in the workflow into sub-categories of HIG - Basics, Components, and Layouts.
Breaking down the 'Experience' in to elements of HIG
REQUIREMENTS CHECKLIST
I created a step-by-step workflow for all use-cases of the experience, annotating the meaning and usage guidelines for each element.
Usage guidelines for upload workflow
EDGE CASE SCENARIOS
Time constraints of the internship, did not allow us to conduct user testing of the edge case scenarios. However, as a design exercise with my Manager, I created workflows for situations of error cases such as uploading with missing parent files (for connected file types), uploading broken/corrupt files, and for a different use case of uploading with a client installed.
Usage guidelines for edge case
CONTENT GUIDELINES
Our content strategy intern laid out the rules with respect to Capitalization, Labels, Punctuation, and Instructional text. We also developed guidelines for typography treatment for file names and folder names.
IMPACT
ROADMAP FOR DEVELOPING EXPERIENCES
1. First experience documented within Autodesk’s HIG that served as a guideline for developing and documenting future experience patterns.
2. Showcased at the companies internal design conference to the CTO and 1000+ employees
3. This workflow will be used across a range of Autodesk products with upload feature.
REFLECTIONS
MY TAKEAWAYS
ADAPT TO CHANGE
Working in a big company within a cross functional team meant that our project goals, tasks, guidelines, and deadlines changed rapidly. This gave me opportunities to adapt continuously and emerge as a stronger and better worker.
COMMUNICATION IS KEY
We worked as a team of 3 interns, but each of us had our own manager to report to. This led to challenges in managing individual expectations, while ensuring that we had a shared understanding of the collective goals. Effective communication meant preparing in advance for meetings to bring value for the team, considering availability and urgency, and respecting the individual goals and timelines.
DESIGN THINKING TECHNIQUES
Autodesk works closely with the LUMA Institute and employs the LUMA based Human-Centered Design thinking techniques for effective problem solving. Over the summer, I got several opportunities to learn and apply several LUMA techniques such as - Experience Diagramming, Problem Tree Analysis, Abstraction Laddering, Rose-Thorn-Bud.
PRIORITIZATION
We had only 3 months to deliver, with a very challenging roadmap that included both time constraints and technical constraints. Thanks to my amazing manager Aaron Munter, I could effectively prioritize, and work my way to deliver quality product in accordance with the need of the hour, and overall project goals.
