Workfront - Design System

Workfront is a modern work management platform designed to connect people to work and accelerate organizational success across the enterprise. Our mission is to make businesses work better. 

During Summer 2018, I was given the opportunity to work at Workfront in Lehi, UT as a UX Design Intern. During my time at Workfront, I was able to integrate knowledge and theory learned in the classroom in a professional environment.

ACCOMPLISHMENTS

• Built a rich text editor, drag and drop pattern, and an updated date picker for the design system

• Learned how to build microinteractions

• Learned how to use Principle, an animation tool

During my first month at Workfront, I worked with a senior UX designer on building and defining new components for the design system. I helped build 3 components: rich text editor, an updated version of the date picker, and drag & drop.

DRAG AND DROP

TABLES

I explored other drag & drop components.

The components are defined as: 

• Trigger: what initiates the interaction

• Rules: defines what happens after trigger is performed

• Feedback: the signal to the user that their action has been acknowledged

• Loop: determines the length of the microinteraction or if it repeats

Then, I defined the components of the drag & drop interaction.

I made a story of how the interaction worked all together after defining the components. 

1. Hover over object, a “grabbing” hand and a knurling icon will appear as a visual cue to let the user know they can take action

2. When clicked and dragged, the object will pop out and go into a new state (“current state”), users will see a “previous state” for the original position

3. A drop line will only appear if the object reaches the midpoint - showing feedback on where the item will be dropped

4. Users can release the mouse and the object will be moved

5. Drag and drop interaction is complete

Then, I made two different iterations of how the drop line interaction would work.

Now that I know more about how microinteractions worked, I explored some more.

I iterated on 3 versions of the current states and received feedback from the UX designers.

The drag handle indicates that the row is draggable. Displaying a drop line indicates the specific position of where the object will be dropped. Having a "previous state" reminds the user where the original position of the element was while it is being dragged. 

I created the microinteraction on Principle, and then I went around and asked for feedback. Some people stated that the words shifting around was choppy.

After receiving feedback, I created another version of the microinteraction.

FINAL

RESIZING

DOCUMENTS

I created several iterations and went around the team for feedback. 

WHAT I LEARNED AT MY INTERNSHIP

• The rotation program at Workfront exposed me to different areas of the product and allowed me to gain a better understanding about Workfront and how it functions. I was able to contribute to multiple projects in a cross-functional environment (UX/PM/engineering).

• Get feedback often. Collaborate with everyone in team. Have brainstorm sessions with PMs, engineers, and UX. Test and validate your designs.

• I was able experience what it was like to work in a company that truly values design and to be treated as a full time UX designer.

• I was able to present my design work to teams and managers for review, and I learned to iterate on feedback.

I wrote more about my learnings here. Feel free to check it out.

I’ve also written a short article about design systems here.

OVERALL CHALLENGES

• Understanding how an agile environment works

• In school, you're told what you should be doing, but at a real job, you lead your own design process

IF I HAD MORE TIME...

• Create a version for an overflow toolbar for the rich text editor

• Work more on the drag and drop component - there are more use cases I did not define such as bulk selecting rows

• Error states