Investigating Usability In The Disguise Designer Keyframing System

Investigating Usability In The Disguise Designer Keyframing System

Elevator Case Study

For the time sensitive amongst us.

image
image
image
image
image
image

Project Deep Dive

Read about this project in greater detail
Disguise Designer Interface Overview
Disguise Designer Interface Overview

About Key-framing

Key-framing of parameters over time to create animation is a well understood paradigm within the video world. Moving away from a traditional singular timeline format and using a dual timeline paradigm Designer's legacy had left its current design difficult to use and a major pain point for its users.

Deliverables

Research
Discovery
Observation
Qualitative Analysis
Competitor Analysis
Prioritisation
Presentation

Research

Discovery

Upon joining Disguise I was made aware of the keyframing problem space and took it as an opportunity to apply UX research methodology with the hope of gaining support in the development team and making improvements to the experience.

Working‌ ‌with‌ a ‌Mit‌ ‌Patel‌ (Developer) ‌we‌ ‌looked‌ ‌at‌ ‌the‌ ‌British‌ ‌Design‌ ‌Council’s‌ ‌Double‌ ‌Diamond‌ ‌framework‌ ‌to‌ ‌help‌ ‌us‌ ‌define‌ ‌how‌ ‌we‌ ‌would‌ ‌approach‌ ‌the‌ ‌project.‌ ‌The‌ ‌Double‌ ‌Diamond‌’s ‌first‌ ‌stage‌ ‌was‌ ‌about‌ ‌discovery;‌ ‌defining‌ ‌your‌ ‌research‌ ‌methods‌ ‌and‌ ‌conducting‌ ‌them.‌ ‌

Double Diamond Diagram
image

To‌ ‌define‌ ‌our‌ ‌research‌ ‌goal‌ ‌we‌ ‌gathered‌ ‌existing‌ ‌known‌ ‌issues‌ ‌in‌ the development team's ‌Jira‌ backlog ‌and‌ ‌extracted‌ ‌them‌ ‌to‌ ‌post-it‌ ‌notes‌ ‌using‌ ‌a‌ ‌‌Stormboard‌ ‌‌(a‌ ‌virtual‌ ‌whiteboard‌ ‌tool;‌ ‌allowing‌ ‌us‌ ‌to‌ ‌collaborate‌ ‌online).‌

Keyframe Visibility Stormboard
image

Of‌ ‌the‌ ‌existing‌ ‌known‌ ‌issues‌ ‌we‌ ‌found‌ ‌these‌ ‌common‌ ‌user‌ ‌needs.‌ ‌

  • A‌ ‌way‌ ‌to‌ ‌‌visualise‌ ‌‌keyframes‌ ‌on‌ ‌the‌ ‌timeline.‌ ‌
  • An‌ ‌improved‌ ‌method‌ ‌to‌ ‌‌navigate‌‌ ‌between‌ ‌keyframes‌ ‌across‌ ‌layers‌ ‌on‌ ‌the‌ ‌timeline.‌ ‌
  • Improved‌ ‌way‌ ‌to‌ ‌‌edit‌ ‌‌keyframes‌ ‌across‌ ‌multiple‌ ‌layers.‌ ‌
  • A‌ ‌discoverable‌ ‌way‌ ‌to‌ ‌‌select‌ ‌multiple‌‌ ‌keyframes‌ ‌to‌ ‌edit.‌ ‌
  • A‌ ‌way‌ ‌to‌‌remember‌‌ ‌where‌ ‌you‌ ‌were‌ ‌and‌ ‌what‌ ‌was‌ ‌edited.‌ ‌

From‌ ‌this‌ ‌initial‌ ‌discovery‌ ‌we‌ ‌were‌ ‌able‌ ‌to‌ ‌write‌ ‌the‌ ‌following‌ ‌research‌ ‌statement‌ ‌to‌ ‌focus‌ ‌the design of user‌ ‌research tasks.‌ ‌

💡
Observe‌ ‌users‌ ‌to‌ ‌gain‌ ‌insight‌ ‌into‌ ‌the‌ ‌potential‌ ‌issues‌ ‌surrounding,‌ ‌‌Visualisation‌,‌ ‌Navigation‌,‌ ‌‌Editing‌‌ ‌and‌ ‌‌Creating‌‌ ‌keyframes‌ ‌across‌ ‌multiple‌ ‌layers‌ ‌on‌ ‌the‌ ‌timeline‌ ‌in‌ ‌order‌ ‌to‌ ‌deliver‌ ‌solutions‌ ‌that‌ ‌work.‌

Observation

User Tasks

Using‌ visualisation, navigation, editing and creating of keyframes as our keyfocus I investigated operating keyframing actions in the software and created‌ ‌a‌ ‌sequence‌ ‌of‌ ‌tasks‌ ‌for‌ ‌users‌ ‌to‌ ‌perform‌ ‌that would expose more detail about the types of problems experienced. I outlined observation workshop guidelines and created materials to record findings accurately.

Observing Users

I‌ ‌selected‌ internal‌ ‌members‌ ‌of‌ ‌training‌ ‌and‌ ‌support team‌s as ‌all come from a previous background of using the software in a professional environment and could ‌be‌ ‌considered‌ ‌expert‌ ‌users‌ ‌of‌ ‌the‌ ‌software‌ and in‌ ‌light‌ ‌of‌ ‌an‌ ‌external‌ ‌network‌ of users ‌(at‌ ‌the‌ ‌time‌) ‌served‌ ‌as‌ ‌a‌ ‌good‌ ‌analog.‌ ‌

Each‌ ‌observation‌ ‌was‌ ‌recorded and followed‌ ‌up‌ ‌by‌ ‌a‌ ‌short‌ ‌interview‌ ‌where‌ ‌the‌ ‌user‌ ‌could‌ ‌explain‌ ‌any‌ ‌additional‌ ‌insight‌ ‌in‌ ‌greater‌ ‌depth.‌ ‌Nielsen&Norman group research states that 5 user tests will find upward of 80% of usability issues, I followed this guidance and was surprised by the shear volume of data generated.

Competitor Analysis

I‌ ‌also‌ ‌conducted‌ ‌a‌ ‌competitor‌ ‌analysis‌ ‌to‌ ‌examine‌ ‌how‌ ‌other‌ ‌software‌ ‌approaches‌ ‌

keyframing;‌ ‌with‌ ‌the‌ ‌hope‌ ‌of‌ ‌exposing‌ ‌similarities‌ ‌and‌ ‌unique‌ ‌opportunities‌ ‌that‌ ‌could‌ later ‌

contribute‌ ‌to‌ ‌design‌ ‌solutions.‌ ‌

Analysis

The‌ ‌second‌ ‌part‌ ‌of‌ ‌the‌ ‌double‌ ‌diamond‌ ‌is‌ ‌about‌ ‌defining‌ ‌your‌ ‌research‌ ‌into‌ ‌something‌ ‌that‌ ‌

can‌ ‌be‌ ‌used‌ ‌to‌ ‌drive‌ ‌ideation.‌

Double Diamond Define
image

I‌ ‌transcribed‌ ‌&‌ ‌extracted‌ ‌pain‌ ‌points‌ ‌(quotes‌ ‌and‌ ‌observations)‌ ‌from‌ ‌the‌ ‌raw‌ video ‌to‌ ‌a‌ ‌table.‌ ‌

Transcription‌ ‌into‌ ‌a‌ ‌table‌ ‌allows‌ ‌it‌ ‌to‌ ‌be‌ ‌shareable‌ ‌and‌ ‌also‌ ‌allows‌ ‌for‌ ‌codification‌ ‌(tagging,‌ ‌

commenting‌ ‌and‌ ‌theming‌ ‌of‌ ‌content)‌ ‌for‌ ‌gaining‌ ‌greater‌ ‌insight‌ ‌on‌ qualitative‌ ‌data.‌

I ‌then‌ ‌took‌ ‌these‌ ‌themes‌ ‌and‌ ‌visualised‌ ‌them‌ ‌in‌ ‌a‌n affinity ‌map.‌ ‌From‌ ‌this‌ ‌map‌ ‌of‌ ‌themes‌ ‌Mit‌ ‌and‌ ‌I‌ ‌could‌ ‌look at clusters ‌of data‌ ‌and‌ make better decisions ‌identify/prioritise‌ ‌actions‌ ‌that‌ ‌could‌ ‌improve‌ ‌the‌ ‌user‌ ‌experience.

Affinity Map
image
Prioritisation Example
image

Prioritisation Mind Map
image

Summary

I conducted research, analysis and gathered requirements for future keyframe re-design projects. I learned a lot about UX design within a business but I also learned a great deal about stakeholder engagement and roadmap politics to the project detriment. Research findings were circulated amongst the development team and gained some support but ultimately due to other roadmap commitments it was decided due to the shear amount of work generated that it wasn't the right time to pursue a redesign.

Whilst disappointed at the time I did get an later opportunity to re-present my findings along with new research gained onsite to new members of the product team; it was agreed that we would schedule time into the roadmap to explore my ideas further.

Challenges

  • C++ Application with custom interface, extremely difficult and time consuming to implement UI changes.
  • Research generated more work than there was appetite/capacity in the team to implement.
  • Difficult to change the culture of a company new to UX processes.

Impact‌

  • Delivered‌ ‌the‌ ‌first‌ ‌UX‌ ‌research‌ ‌project‌ ‌conducted‌ ‌at‌ ‌disguise.‌ ‌
  • Circulated‌ ‌information‌ ‌back‌ ‌to‌ ‌the‌ ‌development‌ ‌team‌ ‌via‌ a ‌UX‌ ‌whiteboard in the office.‌ ‌
  • Ux Board
    image
  • Encouraged‌ ‌collaboration‌ ‌in‌ ‌the‌ ‌project‌ ‌throughout‌ ‌the‌ ‌team.‌ ‌
  • Presented‌ ‌my‌ ‌findings‌ ‌in‌ ‌a‌‌ ‌tech-talk‌‌ presentation ‌to‌ ‌the‌ ‌R&D‌ ‌team.‌ ‌
  • Research‌ ‌will‌ ‌contribute‌ ‌to‌ ‌future‌ ‌improvements‌ ‌to‌ ‌keyframing.‌ ‌